怎么使用flexible的Vue组件Toast显示框
这篇文章主要介绍了怎么使用flexible的Vue组件Toast显示框的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么使用flexible的Vue组件Toast显示框文章都会有所收获，下面我们一起来看看吧。
成都创新互联公司是专业的尤溪网站建设公司，尤溪接单;提供成都做网站、网站制作、成都外贸网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行尤溪网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
Toast -- 显示框
效果展示
代码分析
div包含icon小图标和文字说明，构成简单的dom结构，利用props定义变量值，用computed计算属性对传入的值进行解构，watch监听弹框显示，并结合.sync修饰符达到双向数据绑定，同时用$emit向父组件派发事件，方便父组件监听回调。
dom结构
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显示框
本文URL：
http://cdxtjz.cn/article/gjehcp.html
