Vue-toast-plu NPM

vue-toast-plu

基于 vue2 的移动端 tip-loading-toast 插件 (移动端使用 tip or loading)

1、安装：

npm install vue-toast-plu -S

2、引入：

import Toast from 'vue-toast-plu'
Vue.use(Toast)
// 初始化配置
Vue.use(Toast, options)

options:

options = {
	toastOptions: {
		// ... toast全局配置
	},
	tipOptions: {
		// ... tip全局配置
	},
	loadingOptions: {
		// ... loading全局配置
	}
}

toastOptions:

key	类型	默认值	解释	可选值
position	String	'topCenter'	显示位置	'topCenter', 'topLeft', 'topRight', 'bottomCenter', 'bottomLeft', 'bottomRight'
type	String	'info'	toasst 类型	'info', 'error', 'success', 'warning'
aotoClose	Boolean	true	自动消失
closeTime	Number	3000	定时器时间
width	Number	300	宽
height	Number	80	高
callback	Function\|Null	null	toast关闭后回调
title	String	'提示'	标题	'info' => ‘提示’, 'error' => '错误', 'success' => '成功', 'warning' => '警告'也可自定义任何字符串，将覆盖默认值

tipOptions

key	类型	默认值	解释	可选值
position	String	'bottom'	显示位置	'bottom', 'top', 'center'
width	Number\|String	'auto'	宽
wrap	Boolean	false	自动换行
closeTime	Number	3000	定时器时间

loadingOptions

key	类型	默认值	解释
msg	String	'loading...'	loading文本
showMsg	Boolean	true	是否显示文本

3、组件中使用

// toast 使用
vm = this.$toast('文本')
// 可自定义toastOptions覆盖全局配置或默认配置
this.$toast('文本', toastOptions)
// 快捷方法  注意: 快捷方法指定的位置或type优先级 > toastOptions
this.$toast.topCenter('文本')
this.$toast.success('文本', toastOptions)
// 关闭toast
vm.closeToast()

// tip 使用
this.$tip('文本')
// 可自定义tipOptions覆盖全局配置或默认配置
this.$tip('文本', tipOptions)
//  快捷方法  注意: 快捷方法指定的位置或type优先级 > tipOptions
this.$tip.position('文本')
this.$tip.position('文本', tipOptions)

// loading 使用
vm = this.$loading('文本')
this.$loading.open('文本')
// 可自定义loadingOptions覆盖全局配置或默认配置
this.$loading('文本', loadingOptions)
// 关闭loading
vm.close()
this.$loading.close()

@infinitebrahmanuniverse/nolb-vue-to @everything-registry/sub-chunk-3095

1.0.0

5 years ago