actionsheet

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

组件结构

  1. <template>
  2. <view>
  3. <viewclass="tui-actionsheet-class tui-actionsheet" :class="[show?'tui-actionsheet-show':'']">
  4. <viewclass="tui-tips" :style="{fontSize:px(size),color:color}"v-if="tips">
  5. {{tips}}
  6. </view>
  7. <view :class="[isCancel?'tui-operate-box':'']">
  8. <blockv-for="(item,index) in itemList" :key="index">
  9. <viewclass="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. <viewclass="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. <viewclass="tui-actionsheet-mask" :class="[show?'tui-mask-show':'']" @tap="handleClickMask"></view>
  18. </view>
  19. </template>

组件脚本

  1. <script>
  2. exportdefault{
  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行,下载源码查看

基本使用 badge