16:58

Tips - 提示

简介

Tips为方法类，内部使用了基于 vuex 的状态管理，主要封装了loading、toast、confirm等常用方法。

注意

• 如果项目中没有使用vuex，同时也没有使用本库封装的Store，则不要调用此类内部方法
• 封装的tips提示工具类，已经挂载到全局prototype，可使用this.$tips或导入Tips对象使用
• 使用au-layout作为父布局的已经默认倒入Loading、Toast组件，直接使用方法即可，否则参照组件使用规则使用，详见Loading、Toast 组件介绍
• confirm方法为封装的Promise风格的uni.showModal(OBJECT)，详见官方文档，showModal (opens new window)

<template>
	<au-layout>
 	  <au-button @click="loading">显示loading</au-button>
 	  <au-button @click="toast">显示toast</au-button>
 	  <au-button @click="confirm">显示confirm</au-button>
	</au-layout>
</template>
<script>
import { Tips } from '@anyup/uniui'
export default {
  data() {
    return {
    }
  },
  methods: {
    loading() {
	  this.$tips.loading()
	  // new Tips.loading() // 使用类
    },
	toast() {
	  this.$tips.toast('提示', 'success')
	  // new Tips.toast('提示', 'success') // 使用类
    },
	confrim() {
	  this.$tips.confirm('请确认').then(()=>{
		// 确认
	  }).catch(()=>{
		// 取消
	  })
	  // new Tips.confirm('请确认') // 使用类
	}
  }
}
</script>

API

Methods

名称	说明	参数说明
loading	显示加载弹窗	-
loaded	隐藏加载弹窗	-
toast	显示提示弹窗	title:提示内容, icon:图标
confrim	显示确认弹窗	content:显示内容 options:{ title,showCancel,confirmText,cancelText } payload: 回调数据