怎么使用flexible的Vue组件Toast显示框

这篇文章主要介绍了怎么使用flexible的Vue组件Toast显示框的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么使用flexible的Vue组件Toast显示框文章都会有所收获,下面我们一起来看看吧。

成都创新互联公司是专业的尤溪网站建设公司,尤溪接单;提供成都做网站、网站制作、成都外贸网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行尤溪网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

Toast -- 显示框

效果展示

怎么使用flexible的Vue组件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修饰符才能自动关闭,详见例子Booleanfalse 
 true
false
message提示信息String

iconClassicon小图标Stringsuccess 
 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://pwwzsj.com/article/gjehcp.html

其他资讯