基于手淘 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 — 显示框

  • 效果展示


  • 代码分析

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

    • dom结构

          

      {{message}}

    • 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 {
                          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
      iconClassicon小图标String success
      warning
      close
      iconImage自定义小图标(图片需require引入)
      duration定时器(毫秒),控制弹框显示时间,负数代表不执行定时任务Number1500
      position弹框位置(距顶)String‘50%’
    • $emit

      $emit说明参数
      toastClose弹框关闭回调
    • 示例

      // 默认效果,只有提示信息
                                // 关于sync的说明,请看官网(主要是为了达到双向数据绑定,子组件修改父组件状态)
        
        // 增加自带小图标
        
      // 自定义类型
          
          
          data() {
              return {
                  this.isShow5 : true,
                  bg: require('../assets/logo.png'), // 图片必须用require进来
              }
          },
          isClose5() {
              setTimeout(()=>{
                  this.isShow5 = false;
              }, 2000)
          }
  • 结束语

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

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

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

稀土掘金责编内容来自:稀土掘金 (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 移动开发 » 基于手淘 flexible 的 Vue 组件:Toast — 显示框

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录