u-action-sheet.vue 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
  1. <template>
  2. <u-popup
  3. :show="show"
  4. mode="bottom"
  5. @close="closeHandler"
  6. :safeAreaInsetBottom="safeAreaInsetBottom"
  7. :round="round"
  8. >
  9. <view class="u-action-sheet">
  10. <view
  11. class="u-action-sheet__header"
  12. v-if="title"
  13. >
  14. <text class="u-action-sheet__header__title u-line-1">{{title}}</text>
  15. <view
  16. class="u-action-sheet__header__icon-wrap"
  17. @tap.stop="cancel"
  18. >
  19. <u-icon
  20. name="close"
  21. size="17"
  22. color="#c8c9cc"
  23. bold
  24. ></u-icon>
  25. </view>
  26. </view>
  27. <text
  28. class="u-action-sheet__description"
  29. :style="[{
  30. marginTop: `${title && description ? 0 : '18px'}`
  31. }]"
  32. v-if="description"
  33. >{{description}}</text>
  34. <slot>
  35. <u-line v-if="description"></u-line>
  36. <view class="u-action-sheet__item-wrap">
  37. <template v-for="(item, index) in actions">
  38. <!-- #ifdef MP -->
  39. <button
  40. :key="index"
  41. class="u-reset-button"
  42. :openType="item.openType"
  43. @getuserinfo="onGetUserInfo"
  44. @contact="onContact"
  45. @getphonenumber="onGetPhoneNumber"
  46. @error="onError"
  47. @launchapp="onLaunchApp"
  48. @opensetting="onOpenSetting"
  49. :lang="lang"
  50. :session-from="sessionFrom"
  51. :send-message-title="sendMessageTitle"
  52. :send-message-path="sendMessagePath"
  53. :send-message-img="sendMessageImg"
  54. :show-message-card="showMessageCard"
  55. :app-parameter="appParameter"
  56. @tap="selectHandler(index)"
  57. :hover-class="!item.disabled && !item.loading ? 'u-action-sheet--hover' : ''"
  58. >
  59. <!-- #endif -->
  60. <view
  61. class="u-action-sheet__item-wrap__item"
  62. @tap.stop="selectHandler(index)"
  63. :hover-class="!item.disabled && !item.loading ? 'u-action-sheet--hover' : ''"
  64. :hover-stay-time="150"
  65. >
  66. <template v-if="!item.loading">
  67. <text
  68. class="u-action-sheet__item-wrap__item__name"
  69. :style="[itemStyle(index)]"
  70. >{{ item.name }}</text>
  71. <text
  72. v-if="item.subname"
  73. class="u-action-sheet__item-wrap__item__subname"
  74. >{{ item.subname }}</text>
  75. </template>
  76. <u-loading-icon
  77. v-else
  78. custom-class="van-action-sheet__loading"
  79. size="18"
  80. mode="circle"
  81. />
  82. </view>
  83. <!-- #ifdef MP -->
  84. </button>
  85. <!-- #endif -->
  86. <u-line v-if="index !== actions.length - 1"></u-line>
  87. </template>
  88. </view>
  89. </slot>
  90. <u-gap
  91. bgColor="#eaeaec"
  92. height="6"
  93. v-if="cancelText"
  94. ></u-gap>
  95. <view hover-class="u-action-sheet--hover">
  96. <text
  97. @touchmove.stop.prevent
  98. :hover-stay-time="150"
  99. v-if="cancelText"
  100. class="u-action-sheet__cancel-text"
  101. @tap="cancel"
  102. >{{cancelText}}</text>
  103. </view>
  104. </view>
  105. </u-popup>
  106. </template>
  107. <script>
  108. import openType from '../../libs/mixin/openType'
  109. import button from '../../libs/mixin/button'
  110. import props from './props.js';
  111. /**
  112. * ActionSheet 操作菜单
  113. * @description 本组件用于从底部弹出一个操作菜单,供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI,配置更加灵活,所有平台都表现一致。
  114. * @tutorial https://www.uviewui.com/components/actionSheet.html
  115. *
  116. * @property {Boolean} show 操作菜单是否展示 (默认 false )
  117. * @property {String} title 操作菜单标题
  118. * @property {String} description 选项上方的描述信息
  119. * @property {Array<Object>} actions 按钮的文字数组,见官方文档示例
  120. * @property {String} cancelText 取消按钮的提示文字,不为空时显示按钮
  121. * @property {Boolean} closeOnClickAction 点击某个菜单项时是否关闭弹窗 (默认 true )
  122. * @property {Boolean} safeAreaInsetBottom 处理底部安全区 (默认 true )
  123. * @property {String} openType 小程序的打开方式 (contact | launchApp | getUserInfo | openSetting |getPhoneNumber |error )
  124. * @property {Boolean} closeOnClickOverlay 点击遮罩是否允许关闭 (默认 true )
  125. * @property {Number|String} round 圆角值,默认无圆角 (默认 0 )
  126. * @property {String} lang 指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文
  127. * @property {String} sessionFrom 会话来源,openType="contact"时有效
  128. * @property {String} sendMessageTitle 会话内消息卡片标题,openType="contact"时有效
  129. * @property {String} sendMessagePath 会话内消息卡片点击跳转小程序路径,openType="contact"时有效
  130. * @property {String} sendMessageImg 会话内消息卡片图片,openType="contact"时有效
  131. * @property {Boolean} showMessageCard 是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示"可能要发送的小程序"提示,用户点击后可以快速发送小程序消息,openType="contact"时有效 (默认 false )
  132. * @property {String} appParameter 打开 APP 时,向 APP 传递的参数,openType=launchApp 时有效
  133. *
  134. * @event {Function} select 点击ActionSheet列表项时触发
  135. * @event {Function} close 点击取消按钮时触发
  136. * @event {Function} getuserinfo 用户点击该按钮时,会返回获取到的用户信息,回调的 detail 数据与 wx.getUserInfo 返回的一致,openType="getUserInfo"时有效
  137. * @event {Function} contact 客服消息回调,openType="contact"时有效
  138. * @event {Function} getphonenumber 获取用户手机号回调,openType="getPhoneNumber"时有效
  139. * @event {Function} error 当使用开放能力时,发生错误的回调,openType="error"时有效
  140. * @event {Function} launchapp 打开 APP 成功的回调,openType="launchApp"时有效
  141. * @event {Function} opensetting 在打开授权设置页后回调,openType="openSetting"时有效
  142. * @example <u-action-sheet :actions="list" :title="title" :show="show"></u-action-sheet>
  143. */
  144. export default {
  145. name: "u-action-sheet",
  146. // 一些props参数和methods方法,通过mixin混入,因为其他文件也会用到
  147. mixins: [openType, button, uni.$u.mixin, props],
  148. data() {
  149. return {
  150. }
  151. },
  152. computed: {
  153. // 操作项目的样式
  154. itemStyle() {
  155. return (index) => {
  156. let style = {};
  157. if (this.actions[index].color) style.color = this.actions[index].color
  158. if (this.actions[index].fontSize) style.fontSize = uni.$u.addUnit(this.actions[index].fontSize)
  159. // 选项被禁用的样式
  160. if (this.actions[index].disabled) style.color = '#c0c4cc'
  161. return style;
  162. }
  163. },
  164. },
  165. methods: {
  166. closeHandler() {
  167. // 允许点击遮罩关闭时,才发出close事件
  168. if(this.closeOnClickOverlay) {
  169. this.$emit('close')
  170. }
  171. },
  172. // 点击取消按钮
  173. cancel() {
  174. this.$emit('close')
  175. },
  176. selectHandler(index) {
  177. const item = this.actions[index]
  178. if (item && !item.disabled && !item.loading) {
  179. this.$emit('select', item)
  180. if (this.closeOnClickAction) {
  181. this.$emit('close')
  182. }
  183. }
  184. },
  185. }
  186. }
  187. </script>
  188. <style lang="scss" scoped>
  189. @import "../../libs/css/components.scss";
  190. $u-action-sheet-reset-button-width:100% !default;
  191. $u-action-sheet-title-font-size: 16px !default;
  192. $u-action-sheet-title-padding: 12px 30px !default;
  193. $u-action-sheet-title-color: $u-main-color !default;
  194. $u-action-sheet-header-icon-wrap-right:15px !default;
  195. $u-action-sheet-header-icon-wrap-top:15px !default;
  196. $u-action-sheet-description-font-size:13px !default;
  197. $u-action-sheet-description-color:14px !default;
  198. $u-action-sheet-description-margin: 18px 15px !default;
  199. $u-action-sheet-item-wrap-item-padding:15px !default;
  200. $u-action-sheet-item-wrap-name-font-size:16px !default;
  201. $u-action-sheet-item-wrap-subname-font-size:13px !default;
  202. $u-action-sheet-item-wrap-subname-color: #c0c4cc !default;
  203. $u-action-sheet-item-wrap-subname-margin-top:10px !default;
  204. $u-action-sheet-cancel-text-font-size:16px !default;
  205. $u-action-sheet-cancel-text-color:$u-content-color !default;
  206. $u-action-sheet-cancel-text-font-size:15px !default;
  207. $u-action-sheet-cancel-text-hover-background-color:rgb(242, 243, 245) !default;
  208. .u-reset-button {
  209. width: $u-action-sheet-reset-button-width;
  210. }
  211. .u-action-sheet {
  212. text-align: center;
  213. &__header {
  214. position: relative;
  215. padding: $u-action-sheet-title-padding;
  216. &__title {
  217. font-size: $u-action-sheet-title-font-size;
  218. color: $u-action-sheet-title-color;
  219. font-weight: bold;
  220. text-align: center;
  221. }
  222. &__icon-wrap {
  223. position: absolute;
  224. right: $u-action-sheet-header-icon-wrap-right;
  225. top: $u-action-sheet-header-icon-wrap-top;
  226. }
  227. }
  228. &__description {
  229. font-size: $u-action-sheet-description-font-size;
  230. color: $u-tips-color;
  231. margin: $u-action-sheet-description-margin;
  232. text-align: center;
  233. }
  234. &__item-wrap {
  235. &__item {
  236. padding: $u-action-sheet-item-wrap-item-padding;
  237. @include flex;
  238. align-items: center;
  239. justify-content: center;
  240. flex-direction: column;
  241. &__name {
  242. font-size: $u-action-sheet-item-wrap-name-font-size;
  243. color: $u-main-color;
  244. text-align: center;
  245. }
  246. &__subname {
  247. font-size: $u-action-sheet-item-wrap-subname-font-size;
  248. color: $u-action-sheet-item-wrap-subname-color;
  249. margin-top: $u-action-sheet-item-wrap-subname-margin-top;
  250. text-align: center;
  251. }
  252. }
  253. }
  254. &__cancel-text {
  255. font-size: $u-action-sheet-cancel-text-font-size;
  256. color: $u-action-sheet-cancel-text-color;
  257. text-align: center;
  258. padding: $u-action-sheet-cancel-text-font-size;
  259. }
  260. &--hover {
  261. background-color: $u-action-sheet-cancel-text-hover-background-color;
  262. }
  263. }
  264. </style>