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

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

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

Toast — 显示框

效果展示

代码分析

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

dom结构

<transition name="fade">   <div class="Toast" v-if="toastShow">   <div   class="box"   :   >   <span   :class="iconClass"   :   v-if="iconIsShow"   ></span>   <p   v-if="message"   >{{message}}</p>   </div>   </div>  </transition>

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

$emit

示例

// 默认效果，只有提示信息   <toast   message = '默认信息'   :toastShow.sync = 'isShow1' // 需添加.sync修饰符，才能达到自动关闭的效果，否则只能监听toastClose手动关闭   ></toast>  // 关于sync的说明，请看官网（主要是为了达到双向数据绑定，子组件修改父组件状态）      // 增加自带小图标   <toast   message = 'success'   iconClass = 'success'   :toastShow.sync = 'isShow2'   ></toast>  // 自定义类型   <toast   message = '自定义'   position = '70%'   :duration = '-1' //负数代表不执行定时任务，自己根据需要去关闭   :iconImage='bg' // 自定义icon小图标，在data中需require引入，看下面   :toastShow = 'isShow5' // 因为需要手动关闭，所以不需要.sync了   @toastClose = 'isClose5' // 监听回调，手动关闭，看下面   ></toast>      data() {   return {   this.isShow5 : true,   bg: require('../assets/logo.png'), // 图片必须用require进来   }   },   isClose5() {   setTimeout(()=>{   this.isShow5 = false;   }, 2000)   }

关于“怎么使用flexible的Vue组件Toast显示框”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“怎么使用flexible的Vue组件Toast显示框”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注高防服务器网行业资讯频道。

[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。

[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[