基于 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 相关文章推荐
再谈IE中Flash控件的自动激活 ObjectWrap
Mar 09 Javascript
javascript 字符 Escape,encodeURI,encodeURIComponent
Jul 09 Javascript
js 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
js获取html页面节点方法(递归方式)
Dec 13 Javascript
JQuery遍历元素的后代和同胞实现方法
Sep 18 Javascript
微信小程序 canvas API详解及实例代码
Oct 08 Javascript
原生js实现放大镜
Feb 20 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
vue2.0 自定义日期时间过滤器
Jun 07 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 Javascript
npx create-react-app xxx创建项目报错的解决办法
Feb 17 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中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
PHP对象转换为数组函数(递归方法)
2012/02/04 PHP
php实现的双向队列类实例
2014/09/24 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
jquery $.each()使用探讨
2013/09/23 Javascript
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
jQuery使用animate创建动画用法实例
2015/08/07 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
详解react使用react-bootstrap当轮子造车
2017/08/15 Javascript
为什么我们要做三份 Webpack 配置文件
2017/09/18 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
2018/11/26 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
2019/09/02 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
python学生信息管理系统实现代码
2019/12/17 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
python 模拟登陆github的示例
2020/12/04 Python
Paper Cape官网:美国婴儿和儿童服装品牌
2019/11/02 全球购物
婚礼新郎父母答谢词
2014/01/16 职场文书
材料化学专业求职信
2014/07/15 职场文书
乡党政领导班子群众路线教育实践活动个人对照检查材料
2014/09/20 职场文书
服装区域经理岗位职责
2015/04/10 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书
数学复习课教学反思
2016/02/18 职场文书
初中物理教学反思
2016/02/19 职场文书
ipad隐藏软件app图标方法
2022/04/19 数码科技