actionsheet

操作菜单:可加入提示信息，可单独设置字体样式。

组件结构

  1. <template>
  2.     <view>
  3.         <view class="tui-actionsheet-class tui-actionsheet" :class="[show?'tui-actionsheet-show':'']">
  4.             <view class="tui-tips" :style="{fontSize:px(size),color:color}" v-if="tips">
  5.                 {{tips}}
  6.             </view>
  7.             <view :class="[isCancel?'tui-operate-box':'']">
  8.                 <block v-for="(item,index) in itemList" :key="index">
  9.                     <view class="tui-actionsheet-btn tui-actionsheet-divider" :class="[(!isCancel && index==itemList.length-1)?'tui-btn-last':'']"
  10.                      hover-class="tui-actionsheet-hover" :hover-stay-time="150" :data-index="index" :style="{color:item.color || '#1a1a1a'}"
  11.                      @tap="handleClickItem">{{item.text}}</view>
  12.                 </block>
  13.             </view>
  14.             <view class="tui-actionsheet-btn tui-actionsheet-cancel" hover-class="tui-actionsheet-hover" :hover-stay-time="150"
  15.              v-if="isCancel" @tap="handleClickCancel">取消</view>
  16.         </view>
  17.         <view class="tui-actionsheet-mask" :class="[show?'tui-mask-show':'']" @tap="handleClickMask"></view>
  18.     </view>
  19. </template>

组件脚本

  1. <script>
  2.     export default {
  3.         name: "tuiActionsheet",
  4.         props: {
  5.             //点击遮罩 是否可关闭
  6.             maskClosable: {
  7.                 type: Boolean,
  8.                 default: true
  9.             },
  10.             //显示操作菜单
  11.             show: {
  12.                 type: Boolean,
  13.                 default: false
  14.             },
  15.             //菜单按钮数组，自定义文本颜色，红色参考色：#e53a37
  16.             itemList: {
  17.                 type: Array,
  18.                 default: [{
  19.                     text: "确定",
  20.                     color: "#1a1a1a"
  21.                 }]
  22.             },
  23.             //提示文字
  24.             tips: {
  25.                 type: String,
  26.                 default: ""
  27.             },
  28.             //提示文字颜色
  29.             color: {
  30.                 type: String,
  31.                 default: "#9a9a9a"
  32.             },
  33.             //提示文字大小
  34.             size: {
  35.                 type: Number,
  36.                 default: 26
  37.             },
  38.             //是否需要取消按钮
  39.             isCancel: {
  40.                 type: Boolean,
  41.                 default: true
  42.             }
  43.         },
  44.         methods: {
  45.             px(num) {
  46.                 return uni.upx2px(num) + "px"
  47.             },
  48.             handleClickMask() {
  49.                 if (!this.maskClosable) return;
  50.                 this.handleClickCancel();
  51.             },
  52.             handleClickItem(e) {
  53.                 if (!this.show) return;
  54.                 const dataset = e.currentTarget.dataset;
  55.                 this.$emit('click', {
  56.                     index: dataset.index
  57.                 });
  58.             },
  59.             handleClickCancel() {
  60.                 this.$emit('cancel');
  61.             }
  62.         }
  63.     }
  64. </script>

组件样式

  1. ... 此处省略n行

脚本说明

  1.  props: 
  2.      "maskClosable" : 点击遮罩 是否可关闭,类型:"Boolean",默认值:true    
  3.      "show" :控制显示隐藏操作菜单,类型:"Boolean",默认值:false    
  4.      "itemList" :菜单按钮数组,类型:"Array",{text: 按钮显示文本,color: 按钮文本颜色},默认值:[{text: "确定",color: "#1a1a1a"}]
  5.      "tips":提示信息,类型:"String",默认值:""
  6.      "color":提示信息文字颜色,类型:"String",默认值:"#9a9a9a"
  7.      "size":提示文字大小,类型:"Number",默认值:26 (upx)
  8.      "isCancel": 否需要取消按钮,类型:"Boolean",默认值:true
  10.  methods:
  11.    "px":upx转换为px,现在支持动态绑定rpx,后续会去掉
  12.    "handleClickMask":遮罩层点击事件
  13.    "handleClickItem":菜单按钮点击事件
  14.    "handleClickCancel":取消关闭操作菜单事件

示例

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