基于手淘 flexible 的 Vue 组件：Toast -- 显示框

vue-flexible-components

基于手淘 flexible.js 的 Vue 组件

前言：

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

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	falsetrue	false
    message	提示信息	String
    iconClass	icon小图标	String	successwarningclose
    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)
      }

 

• 结束语

  第一次封装Vue组件，战战兢兢,虽说是很简单的组件，到我手中也是问题不断。但是，我却很享受这个过程，因为我始终坚信，能力就是在不断探索中提高的，没有挫折，哪能进步！

  同时,也恳请各位大佬，对上述问题，提出意见和建议，祝我一臂之力，不胜感激！

  其它组件也将会在GitHub vue-flexible-components 中陆续更新，敬请关注。