1.0.4 • Published 7 years ago
v-toast-plugin v1.0.4
v-toast-plugin
这是一个vue插件
怎样使用
# npm 安装
npm install v-toast-plugin --save-dev
# 在入口js文件引用
import Toast from 'v-toast-plugin'
# 注册插件
Vue.use(Toast, config(配置))
# 在vue组件中使用
this.$Toast(code, type, msg, vueComponent).then(res => { // 后续代码逻辑})
参数code(状态码【字符串】必须), type(弹出类型【整数0,1,2】必须), msg(自定义提示文本/标题【字符串】选填), vueComponent(自定义提示组件【vue组价对象】选填)
# 使用场景
场景1,做code码验证,不弹出
this.$Toast('3', 0).then(res => {// 后续代码逻辑})
场景2,做code码验证,弹出,定时结束后消失,正确操作提示
this.$Toast('200', 1).then(res => {// 后续代码逻辑})
场景3,做code码验证,弹出,定时结束后消失,正确操作提示,自定义提示内容
this.$Toast('200', 1, '操作正确').then(res => {// 后续代码逻辑})
场景4,做code码验证,弹出,定时结束后消失,错误操作提示
this.$Toast('404', 1).then(res => {// 后续代码逻辑})
场景5,做code码验证,弹出,定时结束后消失,错误操作提示,自定义提示内容
this.$Toast('404', 1, '操作错误').then(res => {// 后续代码逻辑})
场景6,做code码验证,弹出,选择提示
this.$Toast('200', 2).then(res => {// 后续代码逻辑})
场景7,做code码验证,弹出,选择提示,自定义提示标题
this.$Toast('200', 2, '[title:]警告').then(res => {// 后续代码逻辑})
场景8,做code码验证,弹出,选择提示,自定义提示内容
this.$Toast('200', 2, '一旦确认,数据不可恢复').then(res => {// 后续代码逻辑})
场景9,做code码验证,弹出,选择提示,自定义提示标题和内容
this.$Toast('200', 2, '一旦确认,数据不可恢复[title:]警告').then(res => {// 后续代码逻辑})
# 如果您不喜欢默认的提示样式和方式,您可以自己定制自己的提示组件,以上9个场景都可以用自己的组件实现,只需要在this.$Toast函数的第四个参数传入您自己的组件
例如:this.$Toast('200', 1, '这是我自己的组件', myVueComponent).then(res => {// 后续代码逻辑})
自定义组件的约定:
您需要在组件的props中声明一个'propsData',插件会把一个对象赋值给propsData。
对象的属性有status(提示状态,布尔,true正确提示,false错误提示),title(提示标题,字符串), msg(提示内容, 字符串), type(提示类型,整数0,1,2)
您可以根据propsData的数值编写自己的组件逻辑
插件在type = 2时候,默认会给您的组件提供两个执行函数emitConfirm(点击确定时可供调用), emitAbolish(点击取消时可供调用)
工程目录src/myToast.vue可供参考
这有个例子 demo for v-toast-plugin.
config配置对象
这是插件的初始化配置对象,它有codeList,msgList, rightCode, showTime;四个属性
# codeList(必须)类型:数组
状态码列表,它是一个数组,成员为字符串类型数据。例如:['200', '500', '404', ...]
# msgList(必须)类型:数组
匹配到的状态码对应提示文本列表,它是一个数组,成员为字符串类型数据。例如:['返回成功', '服务器出错了', '网络错误', ...]
# rightCode(必须)类型:数组
正确提示状态码列表,它是一个数组,成员为字符串类型数据。例如:['200']
# showTime(选填)类型:整数
提示框显示的时间,它是一个整数,例如:2000(2秒)