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


Posted in Javascript onDecember 26, 2017

基于flexible.js 的 Vue 组件

前言:

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

Toast -- 显示框

效果展示

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

代码分析

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

dom结构

<transition name="fade">
 <div class="Toast" v-if="toastShow">
 <div
 class="box"
 :style="positionTop"
 >
 <span
 :class="iconClass"
 :style="iconBg"
 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

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 弹框关闭回调

示例

// 默认效果,只有提示信息
 <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 -- 显示框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
走出JavaScript初学困境—js初学
Dec 29 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
获取数组中最大最小值方法js代码(自写)
Aug 12 Javascript
动态加载jquery库的方法
Feb 12 Javascript
动态加载js、css等文件跨iframe实现
Feb 24 Javascript
输入框过滤非数字的js代码
Sep 18 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
Oct 10 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
Apr 08 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
微信小程序点击view动态添加样式过程解析
Jan 21 Javascript
在react项目中使用antd的form组件,动态设置input框的值
Oct 24 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
Dec 26 #Javascript
AngularJS实现的根据数量与单价计算总价功能示例
Dec 26 #Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 #Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 #Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 #Javascript
Vue 进入/离开动画效果
Dec 26 #Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 #Javascript
You might like
PHP脚本的10个技巧(2)
2006/10/09 PHP
php中实现记住密码自动登录的代码
2011/03/02 PHP
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
URL地址中的#符号使用说明
2011/02/12 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
AJAX跨域请求json数据的实现方法
2013/11/11 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
Vue中添加手机验证码组件功能操作方法
2017/12/07 Javascript
详解VueJS应用中管理用户权限
2018/02/02 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
[36:29]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs TNC
2018/04/02 DOTA
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
Python 用户登录验证的小例子
2013/03/06 Python
在cmder下安装ipython以及环境的搭建
2018/10/19 Python
django实现用户注册实例讲解
2019/10/30 Python
python 安装impala包步骤
2020/03/28 Python
python topk()函数求最大和最小值实例
2020/04/02 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
.net工程师笔试题
2012/06/09 面试题
2014年扶贫工作总结
2014/11/18 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
六一儿童节致辞
2015/07/31 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python
Python竟然能剪辑视频
2021/05/25 Python