u-action-sheet.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. <template>
  2. <u-popup mode="bottom" :border-radius="borderRadius" :popup="false" v-model="value" :maskCloseAble="maskCloseAble"
  3. length="auto" :safeAreaInsetBottom="safeAreaInsetBottom" @close="popupClose" :z-index="uZIndex">
  4. <view class="u-tips u-border-bottom" v-if="tips.text" :style="[tipsStyle]">
  5. {{tips.text}}
  6. </view>
  7. <block v-for="(item, index) in list" :key="index">
  8. <view
  9. @touchmove.stop.prevent
  10. @tap="itemClick(index)"
  11. :style="[itemStyle(index)]"
  12. class="u-action-sheet-item u-line-1"
  13. :class="[index < list.length - 1 ? 'u-border-bottom' : '']"
  14. :hover-stay-time="150"
  15. >
  16. <text>{{item.text}}</text>
  17. <text class="u-action-sheet-item__subtext u-line-1" v-if="item.subText">{{item.subText}}</text>
  18. </view>
  19. </block>
  20. <view class="u-gab" v-if="cancelBtn">
  21. </view>
  22. <view @touchmove.stop.prevent class="u-actionsheet-cancel u-action-sheet-item" hover-class="u-hover-class"
  23. :hover-stay-time="150" v-if="cancelBtn" @tap="close">{{cancelText}}</view>
  24. </u-popup>
  25. </template>
  26. <script>
  27. /**
  28. * actionSheet 操作菜单
  29. * @description 本组件用于从底部弹出一个操作菜单,供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI,配置更加灵活,所有平台都表现一致。
  30. * @tutorial https://www.uviewui.com/components/actionSheet.html
  31. * @property {Array<Object>} list 按钮的文字数组,见官方文档示例
  32. * @property {Object} tips 顶部的提示文字,见官方文档示例
  33. * @property {String} cancel-text 取消按钮的提示文字
  34. * @property {Boolean} cancel-btn 是否显示底部的取消按钮(默认true)
  35. * @property {Number String} border-radius 弹出部分顶部左右的圆角值,单位rpx(默认0)
  36. * @property {Boolean} mask-close-able 点击遮罩是否可以关闭(默认true)
  37. * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
  38. * @property {Number String} z-index z-index值(默认1075)
  39. * @property {String} cancel-text 取消按钮的提示文字
  40. * @event {Function} click 点击ActionSheet列表项时触发
  41. * @event {Function} close 点击取消按钮时触发
  42. * @example <u-action-sheet :list="list" @click="click" v-model="show"></u-action-sheet>
  43. */
  44. export default {
  45. name: "u-action-sheet",
  46. props: {
  47. // 点击遮罩是否可以关闭actionsheet
  48. maskCloseAble: {
  49. type: Boolean,
  50. default: true
  51. },
  52. // 按钮的文字数组,可以自定义颜色和字体大小,字体单位为rpx
  53. list: {
  54. type: Array,
  55. default () {
  56. // 如下
  57. // return [{
  58. // text: '确定',
  59. // color: '',
  60. // fontSize: ''
  61. // }]
  62. return [];
  63. }
  64. },
  65. // 顶部的提示文字
  66. tips: {
  67. type: Object,
  68. default () {
  69. return {
  70. text: '',
  71. color: '',
  72. fontSize: '26'
  73. }
  74. }
  75. },
  76. // 底部的取消按钮
  77. cancelBtn: {
  78. type: Boolean,
  79. default: true
  80. },
  81. // 是否开启底部安全区适配,开启的话,会在iPhoneX机型底部添加一定的内边距
  82. safeAreaInsetBottom: {
  83. type: Boolean,
  84. default: false
  85. },
  86. // 通过双向绑定控制组件的弹出与收起
  87. value: {
  88. type: Boolean,
  89. default: false
  90. },
  91. // 弹出的顶部圆角值
  92. borderRadius: {
  93. type: [String, Number],
  94. default: 0
  95. },
  96. // 弹出的z-index值
  97. zIndex: {
  98. type: [String, Number],
  99. default: 0
  100. },
  101. // 取消按钮的文字提示
  102. cancelText: {
  103. type: String,
  104. default: '取消'
  105. }
  106. },
  107. computed: {
  108. // 顶部提示的样式
  109. tipsStyle() {
  110. let style = {};
  111. if (this.tips.color) style.color = this.tips.color;
  112. if (this.tips.fontSize) style.fontSize = this.tips.fontSize + 'rpx';
  113. return style;
  114. },
  115. // 操作项目的样式
  116. itemStyle() {
  117. return (index) => {
  118. let style = {};
  119. if (this.list[index].color) style.color = this.list[index].color;
  120. if (this.list[index].fontSize) style.fontSize = this.list[index].fontSize + 'rpx';
  121. // 选项被禁用的样式
  122. if (this.list[index].disabled) style.color = '#c0c4cc';
  123. return style;
  124. }
  125. },
  126. uZIndex() {
  127. // 如果用户有传递z-index值,优先使用
  128. return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
  129. }
  130. },
  131. methods: {
  132. // 点击取消按钮
  133. close() {
  134. // 发送input事件,并不会作用于父组件,而是要设置组件内部通过props传递的value参数
  135. // 这是一个vue发送事件的特殊用法
  136. this.popupClose();
  137. this.$emit('close');
  138. },
  139. // 弹窗关闭
  140. popupClose() {
  141. this.$emit('input', false);
  142. },
  143. // 点击某一个item
  144. itemClick(index) {
  145. // disabled的项禁止点击
  146. if(this.list[index].disabled) return;
  147. this.$emit('click', index);
  148. this.$emit('input', false);
  149. }
  150. }
  151. }
  152. </script>
  153. <style lang="scss" scoped>
  154. @import "../../libs/css/style.components.scss";
  155. .u-tips {
  156. font-size: 26rpx;
  157. text-align: center;
  158. padding: 34rpx 0;
  159. line-height: 1;
  160. color: $u-tips-color;
  161. }
  162. .u-action-sheet-item {
  163. @include vue-flex;;
  164. line-height: 1;
  165. justify-content: center;
  166. align-items: center;
  167. font-size: 32rpx;
  168. padding: 34rpx 0;
  169. flex-direction: column;
  170. }
  171. .u-action-sheet-item__subtext {
  172. font-size: 24rpx;
  173. color: $u-tips-color;
  174. margin-top: 20rpx;
  175. }
  176. .u-gab {
  177. height: 12rpx;
  178. background-color: rgb(234, 234, 236);
  179. }
  180. .u-actionsheet-cancel {
  181. color: $u-main-color;
  182. }
  183. </style>