index.vue 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. <template>
  2. <uni-shadow-root class="weapp-lib-action-sheet-index"><van-popup :show="show" position="bottom" :round="round" :z-index="zIndex" :overlay="overlay" custom-class="van-action-sheet custom-class" :safe-area-inset-bottom="safeAreaInsetBottom" :close-on-click-overlay="closeOnClickOverlay" @close="onClickOverlay">
  3. <view v-if="title" class="van-action-sheet__header">
  4. {{ title }}
  5. <van-icon name="cross" custom-class="van-action-sheet__close" @click="onClose"></van-icon>
  6. </view>
  7. <view v-if="description" class="van-action-sheet__description van-hairline--bottom">
  8. {{ description }}
  9. </view>
  10. <view v-if="actions && actions.length" class="list-class">
  11. <button v-for="(item,index) in (actions)" :key="item.index" :open-type="item.disabled || item.loading || (canIUseGetUserProfile && item.openType === 'getUserInfo') ? '' : item.openType" :style="item.color ? 'color: ' + item.color : ''" :class="(utils.bem('action-sheet__item', { disabled: item.disabled || item.loading }))+' '+(item.className || '')" hover-class="van-action-sheet__item--hover" :data-index="index" @click="_$self[(item.disabled || item.loading ? '' : 'onSelect')||'_$noop']($event)" @getuserinfo="onGetUserInfo" @contact="onContact" @getphonenumber="onGetPhoneNumber" @error="onError" @launchapp="onLaunchApp" @opensetting="onOpenSetting" :lang="lang" :session-from="sessionFrom" :send-message-title="sendMessageTitle" :send-message-path="sendMessagePath" :send-message-img="sendMessageImg" :show-message-card="showMessageCard" :app-parameter="appParameter">
  12. <block v-if="(!item.loading)">
  13. {{ item.name }}
  14. <view v-if="item.subname" class="van-action-sheet__subname">{{ item.subname }}</view>
  15. </block>
  16. <van-loading v-else custom-class="van-action-sheet__loading" size="22px"></van-loading>
  17. </button>
  18. </view>
  19. <slot></slot>
  20. <block v-if="cancelText">
  21. <view class="van-action-sheet__gap"></view>
  22. <view class="van-action-sheet__cancel" hover-class="van-action-sheet__cancel--hover" hover-stay-time="70" @click="onCancel">
  23. {{ cancelText }}
  24. </view>
  25. </block>
  26. </van-popup></uni-shadow-root>
  27. </template>
  28. <wxs src="../wxs/utils.wxs" module="utils"></wxs>
  29. <script>
  30. import VanIcon from '../icon/index.vue'
  31. import VanPopup from '../popup/index.vue'
  32. import VanLoading from '../loading/index.vue'
  33. global['__wxVueOptions'] = {components:{'van-icon': VanIcon,'van-popup': VanPopup,'van-loading': VanLoading}}
  34. global['__wxRoute'] = 'weapp/lib/action-sheet/index'
  35. "use strict";
  36. Object.defineProperty(exports, "__esModule", { value: true });
  37. var component_1 = require("../common/component");
  38. var button_1 = require("../mixins/button");
  39. (0, component_1.VantComponent)({
  40. classes: ['list-class'],
  41. mixins: [button_1.button],
  42. props: {
  43. show: Boolean,
  44. title: String,
  45. cancelText: String,
  46. description: String,
  47. round: {
  48. type: Boolean,
  49. value: true,
  50. },
  51. zIndex: {
  52. type: Number,
  53. value: 100,
  54. },
  55. actions: {
  56. type: Array,
  57. value: [],
  58. },
  59. overlay: {
  60. type: Boolean,
  61. value: true,
  62. },
  63. closeOnClickOverlay: {
  64. type: Boolean,
  65. value: true,
  66. },
  67. closeOnClickAction: {
  68. type: Boolean,
  69. value: true,
  70. },
  71. safeAreaInsetBottom: {
  72. type: Boolean,
  73. value: true,
  74. },
  75. },
  76. methods: {
  77. onSelect: function (event) {
  78. var _this = this;
  79. var index = event.currentTarget.dataset.index;
  80. var _a = this.data, actions = _a.actions, closeOnClickAction = _a.closeOnClickAction, canIUseGetUserProfile = _a.canIUseGetUserProfile;
  81. var item = actions[index];
  82. if (item) {
  83. this.$emit('select', item);
  84. if (closeOnClickAction) {
  85. this.onClose();
  86. }
  87. if (item.openType === 'getUserInfo' && canIUseGetUserProfile) {
  88. wx.getUserProfile({
  89. desc: item.getUserProfileDesc || ' ',
  90. complete: function (userProfile) {
  91. _this.$emit('getuserinfo', userProfile);
  92. },
  93. });
  94. }
  95. }
  96. },
  97. onCancel: function () {
  98. this.$emit('cancel');
  99. },
  100. onClose: function () {
  101. this.$emit('close');
  102. },
  103. onClickOverlay: function () {
  104. this.$emit('click-overlay');
  105. this.onClose();
  106. },
  107. },
  108. });
  109. export default global['__wxComponents']['weapp/lib/action-sheet/index']
  110. </script>
  111. <style platform="mp-weixin">
  112. @import '../common/index.css';.van-action-sheet{color:var(--action-sheet-item-text-color,#323233);max-height:var(--action-sheet-max-height,90%)!important}.van-action-sheet__cancel,.van-action-sheet__item{background-color:var(--action-sheet-item-background,#fff);font-size:var(--action-sheet-item-font-size,16px);line-height:var(--action-sheet-item-line-height,22px);padding:14px 16px;text-align:center}.van-action-sheet__cancel--hover,.van-action-sheet__item--hover{background-color:#f2f3f5}.van-action-sheet__cancel:after,.van-action-sheet__item:after{border-width:0}.van-action-sheet__cancel{color:var(--action-sheet-cancel-text-color,#646566)}.van-action-sheet__gap{background-color:var(--action-sheet-cancel-padding-color,#f7f8fa);display:block;height:var(--action-sheet-cancel-padding-top,8px)}.van-action-sheet__item--disabled{color:var(--action-sheet-item-disabled-text-color,#c8c9cc)}.van-action-sheet__item--disabled.van-action-sheet__item--hover{background-color:var(--action-sheet-item-background,#fff)}.van-action-sheet__subname{color:var(--action-sheet-subname-color,#969799);font-size:var(--action-sheet-subname-font-size,12px);line-height:var(--action-sheet-subname-line-height,20px);margin-top:var(--padding-xs,8px)}.van-action-sheet__header{font-size:var(--action-sheet-header-font-size,16px);font-weight:var(--font-weight-bold,500);line-height:var(--action-sheet-header-height,48px);text-align:center}.van-action-sheet__description{color:var(--action-sheet-description-color,#969799);font-size:var(--action-sheet-description-font-size,14px);line-height:var(--action-sheet-description-line-height,20px);padding:20px var(--padding-md,16px);text-align:center}.van-action-sheet__close{color:var(--action-sheet-close-icon-color,#c8c9cc);font-size:var(--action-sheet-close-icon-size,22px)!important;line-height:inherit!important;padding:var(--action-sheet-close-icon-padding,0 16px);position:absolute!important;right:0;top:0}.van-action-sheet__loading{display:flex!important}
  113. </style>