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
  9. methods:
  10. "px":upx转换为px,现在支持动态绑定rpx,后续会去掉
  11. "handleClickMask":遮罩层点击事件
  12. "handleClickItem":菜单按钮点击事件
  13. "handleClickCancel":取消关闭操作菜单事件

示例

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