index.vue 3.6KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <template>
  2. <uni-shadow-root class="vant-dist-share-sheet-index"><van-popup round class="van-share-sheet" :show="show" position="bottom" :overlay="overlay" :duration="duration" :z-index="zIndex" :overlay-style="overlayStyle" :close-on-click-overlay="closeOnClickOverlay" :safe-area-inset-bottom="safeAreaInsetBottom" @close="onClose" @click-overlay="onClickOverlay">
  3. <view class="van-share-sheet__header">
  4. <view class="van-share-sheet__title">
  5. <slot name="title"></slot>
  6. </view>
  7. <view v-if="title" class="van-share-sheet__title">{{ title }}</view>
  8. <view class="van-share-sheet__description">
  9. <slot name="description"></slot>
  10. </view>
  11. <view v-if="description" class="van-share-sheet__description">
  12. {{ description }}
  13. </view>
  14. </view>
  15. <block v-if="computed.isMulti(options)">
  16. <options v-for="(item,index) in (options)" :key="item.index" :show-border="index !== 0" :options="item" @select="onSelect"></options>
  17. </block>
  18. <options v-else :options="options" @select="onSelect"></options>
  19. <button type="button" class="van-share-sheet__cancel" @click="onCancel">
  20. {{ cancelText }}
  21. </button>
  22. </van-popup></uni-shadow-root>
  23. </template>
  24. <wxs src="./index.wxs" module="computed"></wxs>
  25. <script>
  26. import VanPopup from '../popup/index.vue'
  27. import Options from './options.vue'
  28. global['__wxVueOptions'] = {components:{'van-popup': VanPopup,'options': Options}}
  29. global['__wxRoute'] = 'vant/dist/share-sheet/index'
  30. import { VantComponent } from '../common/component';
  31. VantComponent({
  32. props: {
  33. // whether to show popup
  34. show: Boolean,
  35. // overlay custom style
  36. overlayStyle: String,
  37. // z-index
  38. zIndex: {
  39. type: Number,
  40. value: 100,
  41. },
  42. title: String,
  43. cancelText: {
  44. type: String,
  45. value: '取消',
  46. },
  47. description: String,
  48. options: {
  49. type: Array,
  50. value: [],
  51. },
  52. overlay: {
  53. type: Boolean,
  54. value: true,
  55. },
  56. safeAreaInsetBottom: {
  57. type: Boolean,
  58. value: true,
  59. },
  60. closeOnClickOverlay: {
  61. type: Boolean,
  62. value: true,
  63. },
  64. duration: {
  65. type: null,
  66. value: 300,
  67. },
  68. },
  69. methods: {
  70. onClickOverlay() {
  71. this.$emit('click-overlay');
  72. },
  73. onCancel() {
  74. this.onClose();
  75. this.$emit('cancel');
  76. },
  77. onSelect(event) {
  78. this.$emit('select', event.detail);
  79. },
  80. onClose() {
  81. this.$emit('close');
  82. },
  83. },
  84. });
  85. export default global['__wxComponents']['vant/dist/share-sheet/index']
  86. </script>
  87. <style platform="mp-weixin">
  88. @import '../common/index.css';.van-share-sheet__header{padding:12px 16px 4px;text-align:center}.van-share-sheet__title{margin-top:8px;color:#323233;font-weight:400;font-size:14px;line-height:20px}.van-share-sheet__title:empty,.van-share-sheet__title:not(:empty)+.van-share-sheet__title{display:none}.van-share-sheet__description{display:block;margin-top:8px;color:#969799;font-size:12px;line-height:16px}.van-share-sheet__description:empty,.van-share-sheet__description:not(:empty)+.van-share-sheet__description{display:none}.van-share-sheet__cancel{display:block;box-sizing:initial;width:100%;height:auto;padding:0;font-size:16px;line-height:48px;text-align:center;background:#fff;border:none}.van-share-sheet__cancel:before{display:block;height:8px;background-color:#f7f8fa;content:" "}.van-share-sheet__cancel:after{display:none}.van-share-sheet__cancel:active{background-color:#f2f3f5}
  89. </style>