Fab

悬浮按钮:可设置left，right，bottom值，可设置大小，颜色等，具体参考文档。拓展出来的按钮不应多于6个，否则违反了作为悬浮按钮的快速、高效的原则。

组件结构

  1. <template>
  2.     <view @touchmove.stop.prevent>
  3.         <view class="tui-fab-box" :class="{'tui-fab-right':!left || (left && right)}" :style="{left:getLeft(),right:getRight(),bottom:bottom+'rpx'}">
  4.             <view class="tui-fab-btn" :class="{'tui-visible':isOpen,'tui-fab-hidden':hidden}">
  5.                 <view class="tui-fab-item-box" :class="{'tui-fab-item-left':left && !right && item.imgUrl}" v-for="(item,index) in btnList"
  6.                  :key="index" @tap.stop="handleClick(index)">
  7.                     <view :class="[left && !right?'tui-text-left':'tui-text-right']" v-if="item.imgUrl" :style="{fontSize:item.fontSize+'rpx',color:item.color}">{{item.text || ""}}</view>
  8.                     <view class="tui-fab-item" :style="{width:width+'rpx',height:height+'rpx',background:item.bgColor || bgColor,borderRadius:radius}">
  9.                         <view class="tui-fab-title" v-if="!item.imgUrl" :style="{fontSize:item.fontSize+'rpx',color:item.color}">{{item.text || ""}}</view>
  10.                         <image :src="item.imgUrl" class="tui-fab-img" v-else :style="{width:item.imgWidth+'rpx',height:item.imgHeight+'rpx'}"></image>
  11.                     </view>
  12.                 </view>
  13.             </view>
  14.             <view class="tui-fab-item" :class="{'tui-active':isOpen}" :style="{width:width+'rpx',height:height+'rpx',borderRadius:radius,background:bgColor,color:color}"
  15.              @tap.stop="handleClick(-1)">
  16.                 <view class="tui-fab-icon tui-icon-plus"></view>
  17.             </view>
  18.         </view>
  19.         <view class="tui-fab-mask" :class="{'tui-visible':isOpen}" @tap="handleClickCancel"></view>
  20.     </view>
  21. </template>

组件脚本

  1. <script>
  2.     //拓展出来的按钮不应多于6个，否则违反了作为悬浮按钮的快速、高效的原则
  3.     export default {
  4.         name: "tuiFab",
  5.         props: {
  6.             //rpx 为0时值为auto
  7.             left: {
  8.                 type: Number,
  9.                 default: 0
  10.             },
  11.             //rpx 当为0时且left不为0，值为auto
  12.             right: {
  13.                 type: Number,
  14.                 default: 80
  15.             },
  16.             //rpx bottom值
  17.             bottom: {
  18.                 type: Number,
  19.                 default: 100
  20.             },
  21.             //默认按钮 宽度 rpx
  22.             width: {
  23.                 type: Number,
  24.                 default: 108
  25.             },
  26.             //默认按钮 高度 rpx
  27.             height: {
  28.                 type: Number,
  29.                 default: 108
  30.             },
  31.             //圆角值
  32.             radius: {
  33.                 type: String,
  34.                 default: "50%"
  35.             },
  36.             //默认按钮背景颜色
  37.             bgColor: {
  38.                 type: String,
  39.                 default: "#5677fc"
  40.             },
  41.             //字体颜色
  42.             color: {
  43.                 type: String,
  44.                 default: "#fff"
  45.             },
  46.             //拓展按钮
  47.             // bgColor: "#5677fc",
  48.             // //图标/图片地址
  49.             // imgUrl: "/static/images/fab/fab_reward.png",
  50.             // //图片高度 rpx
  51.             // imgHeight: 60,
  52.             // //图片宽度 rpx
  53.             // imgWidth: 60,
  54.             // //名称
  55.             // text: "名称",
  56.             // //字体大小
  57.             // fontSize: 30,
  58.             // //字体颜色
  59.             // color: "#fff"
  60.             btnList: {
  61.                 type: Array,
  62.                 default () {
  63.                     return []
  64.                 }
  65.             },
  66.             //点击遮罩 是否可关闭
  67.             maskClosable: {
  68.                 type: Boolean,
  69.                 default: false
  70.             }
  71.         },
  72.         data() {
  73.             return {
  74.                 isOpen: false,
  75.                 hidden: true,
  76.                 timer: null
  77.             };
  78.         },
  79.         methods: {
  80.             getLeft() {
  81.                 let val = "auto"
  82.                 if (this.left && !this.right) {
  83.                     val = this.left + 'rpx'
  84.                 }
  85.                 return val
  86.             },
  87.             getRight() {
  88.                 let val = this.right + 'rpx'
  89.                 if (this.left && !this.right) {
  90.                     val = "auto"
  91.                 }
  92.                 return val
  93.             },
  94.             handleClick: function(index) {
  95.                 this.hidden = false
  96.                 clearTimeout(this.timer)
  97.                 if (index == -1 && this.btnList.length) {
  98.                     this.isOpen = !this.isOpen
  99.                 } else {
  100.                     this.$emit("click", {
  101.                         index: index
  102.                     })
  103.                     this.isOpen = false
  104.                 }
  105.                 if (!this.isOpen) {
  106.                     this.timer = setTimeout(() => {
  107.                         this.hidden = true
  108.                     }, 200)
  109.                 }
  110.             },
  111.             handleClickCancel: function() {
  112.                 if (!this.maskClosable) return;
  113.                 this.isOpen = false
  114.             }
  115.         },
  116.         beforeDestroy() {
  117.             clearTimeout(this.timer)
  118.             this.timer = null
  119.         }
  120.     }
  121. </script>

组件样式

... 此处省略n行

脚本说明

 props: 
     "left" :left值，为0时值为auto，单位rpx(下同)，类型:"Number"，默认值:0    
     "right" :right值，当为0时且left不为0，值为auto，类型:"Number",默认值:80    
     "bottom" :bottom值，类型:"Number"，默认值：100
     "width":默认按钮宽度,类型:"Number"，默认值:108
     "height":默认按钮高度,类型:"Number"，默认值:108
     "radius":圆角值，类型:"String",默认值:"50%"
     "bgColor":默认按钮背景颜色，类型:"String",默认值:"#5677fc"
     "color":字体颜色，类型:"String",默认值:"#fff"
     "btnList":拓展按钮列表，类型:"Array",默认值:"[]"
              [
                 //背景颜色
                bgColor: "#5677fc",
                //图标/图片地址
                imgUrl: "/static/images/fab/fab_reward.png",
                //图片高度 rpx
                imgHeight: 60,
                //图片宽度 rpx
                imgWidth: 60,
                //名称
                text: "名称",
                //字体大小
                fontSize: 30,
                //字体颜色
                color: "#fff"
            ]
     "maskClosable":点击遮罩 是否可关闭，类型:"Boolean",默认值:false

 methods:
   "handleClick":按钮点击事件，当有扩展按钮时，默认按钮点击只做【打开/关闭】扩展按钮操作
   "handleClickCancel":关闭扩展按钮，遮罩事件

示例

... 此处省略n行,下载源码查看

预览图

fab 悬浮按钮 - 图1