怎么使用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://cqcxhl.com/article/gjehcp.html

重庆分公司，新征程启航

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

其他资讯