基于 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 相关文章推荐
jquery 模拟类搜索框自动完成搜索提示功能(改进)
May 24 Javascript
纯js实现背景图片切换效果代码
Nov 14 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
Apr 06 Javascript
js实现表单多按钮提交action的处理方法
Oct 24 Javascript
jQuery实现图片局部放大镜效果
Mar 17 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
基于angularJS的表单验证指令介绍
Oct 21 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
使用vue-resource进行数据交互的实例
Sep 02 Javascript
webpack-dev-server远程访问配置方法
Feb 22 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
Mar 16 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 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中session退出登陆问题
2014/02/27 PHP
YII模块实现绑定二级域名的方法
2014/07/09 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
JS中静态页面实现微信分享功能
2017/02/06 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
js如何获取图片url的Blob值并预览示例代码
2019/03/07 Javascript
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
Python 字符串操作方法大全
2014/03/11 Python
详解Python核心对象类型字符串
2018/02/11 Python
Django Rest framework权限的详细用法
2019/07/25 Python
python 实现识别图片上的数字
2019/07/30 Python
Python绘制热力图示例
2019/09/27 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
Python 实现平台类游戏添加跳跃功能
2020/03/27 Python
python3 re返回形式总结
2020/11/20 Python
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
热能动力工程毕业生自荐信
2013/11/07 职场文书
仓库管理制度
2014/01/21 职场文书
中学生教师节演讲稿
2014/09/03 职场文书
2014年保险公司工作总结
2014/11/22 职场文书
公积金具结保证书
2015/05/11 职场文书
小学体育教学随笔
2015/08/14 职场文书
三好学生竞选稿
2015/11/21 职场文书
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android
Android studio 简单计算器的编写
2022/05/20 Java/Android