基于 flexible 的 Vue 组件:Toast -- 显示框效果

前端之家收集整理的这篇文章主要介绍了基于 flexible 的 Vue 组件:Toast -- 显示框效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

基于flexible.js 的 Vue 组件

前言:

Toast -- 显示框

效果展示

代码分析

div包含icon小图标和文字说明,构成简单的dom结构,利用props定义变量值,用computed计算属性对传入的值进行解构,watch监听弹框显示,并结合.sync修饰符达到双向数据绑定,同时用$emit向父组件派发事件,方便父组件监听回调。

dom结构

{{message}}

props数据

computed

watch

{ this.$emit('update:toastShow',false) // 利用了.sync达到双向数据绑定 this.$emit('toastClose'); },this.duration) } } } }

使用说明

组件地址: (不能npm,只能手动下载使用)

下载并放入自己项目中 —— import 引入组件 —— components中注册组件 —— 使用

props

显示框显示、隐藏。需添加.sync修饰符才能自动关闭,详见例子提示信息自定义小图标(图片需require引入)显示时间,负数代表不执行定时任务

$emit

关闭回调

示例

效果,只有提示信息 // 关于sync的说明,请看官网(主要是为了达到双向数据绑定,子组件修改父组件状态)

// 增加自带小图标
<toast
message = 'success'
iconClass = 'success'
:toastShow.sync = 'isShow2'

// 自定义类型

data() {
return {
this.isShow5 : true,bg: require('../assets/logo.png'),// 图片必须用require进来
}
},isClose5() {
setTimeout(()=>{
this.isShow5 = false;
},2000)
}

总结

以上所述是小编给大家介绍的基于 flexible 的 Vue 组件:Toast -- 显示框。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/vue/34488.html

猜你在找的Vue相关文章