Fab

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

组件结构

  1. <template>
  2. <view @touchmove.stop.prevent>
  3. <viewclass="tui-fab-box" :class="{'tui-fab-right':!left || (left && right)}" :style="{left:getLeft(),right:getRight(),bottom:bottom+'rpx'}">
  4. <viewclass="tui-fab-btn" :class="{'tui-visible':isOpen,'tui-fab-hidden':hidden}">
  5. <viewclass="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. <viewclass="tui-fab-item" :style="{width:width+'rpx',height:height+'rpx',background:item.bgColor || bgColor,borderRadius:radius}">
  9. <viewclass="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. <viewclass="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. <viewclass="tui-fab-icon tui-icon-plus"></view>
  17. </view>
  18. </view>
  19. <viewclass="tui-fab-mask" :class="{'tui-visible':isOpen}" @tap="handleClickCancel"></view>
  20. </view>
  21. </template>

组件脚本

  1. <script>
  2. //拓展出来的按钮不应多于6个,否则违反了作为悬浮按钮的快速、高效的原则
  3. exportdefault{
  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