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

发布时间：2020-12-17 02:39:33 所属栏目：百科来源：网络整理

导读：基于flexible.js 的 Vue 组件前言：目前手头的移动端Vue项目是用手淘的作适配的，并用px2rem 来自动转换成rem。关于lib-flexible和px2rem的配置，请移步。由于使用rem作适配，导致现有的很多移动端UI框架不能与之很好的配合，往往需要大动干戈更改UI框

基于flexible.js 的 Vue 组件

前言：

目前手头的移动端Vue项目是用手淘的作适配的，并用px2rem 来自动转换成rem。关于lib-flexible和px2rem的配置，请移步。
由于使用rem作适配，导致现有的很多移动端UI框架不能与之很好的配合，往往需要大动干戈更改UI框架的样式，背离了使用UI框架达到快速开发的初衷。
为了以后项目的组件复用，以及提高开发可复用组件的能力，特把平时项目中常用的、简单的组件单独拎出来。
此为小白之作，论代码质量、难易程度、复用度，远不及各位大佬之杰作，求轻喷。同时，也恳请各位，提出意见和建议，不胜感激！
GitHub地址：

Toast -- 显示框

效果展示

代码分析

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

dom结构

props数据

computed

watch

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

使用说明

组件地址：（不能npm，只能手动下载使用）

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

props

$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 -- 显示框。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!