怎么使用flexible的Vue组件Toast显示框
这篇文章主要介绍了怎么使用flexible的Vue组件Toast显示框的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么使用flexible的Vue组件Toast显示框文章都会有所收获,下面我们一起来看看吧。
成都创新互联公司是专业的尤溪网站建设公司,尤溪接单;提供成都做网站、网站制作、成都外贸网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行尤溪网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
Toast -- 显示框
效果展示
代码分析
div包含icon小图标和文字说明,构成简单的dom结构,利用props定义变量值,用computed计算属性对传入的值进行解构,watch监听弹框显示,并结合.sync修饰符达到双向数据绑定,同时用$emit向父组件派发事件,方便父组件监听回调。
dom结构
{{message}}
props数据
props: { message: { // 提示内容 type: String, }, toastShow: { // 是否显示 type: Boolean, default: false }, iconClass: { // 背景图片 type: String, }, iconImage: { // 自定义背景图片 }, duration: { // 定时器 type: Number, default: 1500 }, position: { // 弹出框位置 type: String, default: '50%' } },
computed
computed: { // 用于判断显示框位置 positionTop() { return { top: this.position } }, // 自定义父组件传过来的背景图片 iconBg() { if (this.iconImage) { return { backgroundImage: `url(${this.iconImage})` } } else { return; } }, // 用于判断icon是否显示 iconIsShow() { if (this.iconClass == 'success') { return true; } else if (this.iconClass == 'close') { return true; } else if (this.iconClass == 'warning') { return true; } else if (this.iconImage) { return true; } else { return false; } } },
watch
watch: { toastShow() { // 监听toast显示,向父组件派发事件 if (this.toastShow) { if (this.duration < 0) { this.$emit('toastClose'); } else { setTimeout(()=>{ this.$emit('update:toastShow', false) // 利用了.sync达到双向数据绑定 this.$emit('toastClose'); }, this.duration) } } } }
使用说明
组件地址: src/components/Toast.vue (不能npm,只能手动下载使用)
下载并放入自己项目中 —— import 引入组件 —— components中注册组件 —— 使用
props
props | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
toastShow | 控制显示框显示、隐藏。需添加.sync修饰符才能自动关闭,详见例子 | Boolean | false true | false |
message | 提示信息 | String | ||
iconClass | icon小图标 | String | success warning close | |
iconImage | 自定义小图标(图片需require引入) | |||
duration | 定时器(毫秒),控制弹框显示时间,负数代表不执行定时任务 | Number | 1500 | |
position | 弹框位置(距顶) | String | '50%' |
$emit
$emit | 说明 | 参数 |
---|---|---|
toastClose | 弹框关闭回调 |
示例
// 默认效果,只有提示信息// 关于sync的说明,请看官网(主要是为了达到双向数据绑定,子组件修改父组件状态) // 增加自带小图标 // 自定义类型 data() { return { this.isShow5 : true, bg: require('../assets/logo.png'), // 图片必须用require进来 } }, isClose5() { setTimeout(()=>{ this.isShow5 = false; }, 2000) }
关于“怎么使用flexible的Vue组件Toast显示框”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“怎么使用flexible的Vue组件Toast显示框”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联行业资讯频道。
标题名称:怎么使用flexible的Vue组件Toast显示框
网页路径:http://scyanting.com/article/gjehcp.html