当前位置:Gxlcms > JavaScript > 在Vue组件Toast中如何实现显示框效果

在Vue组件Toast中如何实现显示框效果

时间:2021-07-01 10:21:17 帮助过:19人阅读

这篇文章主要介绍了基于 flexible 的 Vue 组件:Toast -- 显示框效果,需要的朋友可以参考下

基于flexible.js 的 Vue 组件

前言:

  • 目前手头的移动端Vue项目是用手淘的 lib-flexible 作适配的,并用px2rem 来自动转换成rem。关于lib-flexible和px2rem的配置,请移步 vue-cli 配置 flexible 。

  • 由于使用rem作适配,导致现有的很多移动端UI框架不能与之很好的配合,往往需要大动干戈更改UI框架的样式,背离了使用UI框架达到快速开发的初衷。

  • 为了以后项目的组件复用,以及提高开发可复用组件的能力,特把平时项目中 常用的、简单的 组件单独拎出来。

  • 此为小白之作,论代码质量、难易程度、复用度,远不及各位大佬之杰作,求轻喷。同时,也恳请各位,提出意见和建议,不胜感激!

  • GitHub地址:vue-flexible-components

Toast -- 显示框

效果展示

代码分析

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

dom结构

<transition name="fade">
 <p class="Toast" v-if="toastShow">
 <p
 class="box"
 :style="positionTop"
 >
 <span
 :class="iconClass"
 :style="iconBg"
 v-if="iconIsShow"
 ></span>
 <p
 v-if="message"
 >{{message}}</p>
 </p>
 </p>
</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修饰符才能自动关闭,详见例子Booleanfalse
true
false
message提示信息String
iconClassicon小图标Stringsuccess
warning
close
iconImage自定义小图标(图片需require引入)
duration定时器(毫秒),控制弹框显示时间,负数代表不执行定时任务Number1500
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)
 }

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

如何解决Router跨模块跳转问题

详细解读react后端渲染模板

在React中有关高阶组件详细介绍

在Javascript中如何实现网页抢红包

在JS中如何实现网页自动秒杀点击(详细教程)

以上就是在Vue 组件Toast中如何实现显示框效果的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行