options.vue 2.3KB

123456789101112131415161718192021222324252627282930313233343536
  1. <template>
  2. <uni-shadow-root class="vant-dist-share-sheet-options"><view :class="utils.bem('share-sheet__options', { border: showBorder })">
  3. <view v-for="(item,index) in (options)" :key="item.index" class="van-share-sheet__option" :data-index="index" @click="onSelect">
  4. <button class="van-share-sheet__button" :open-type="item.openType">
  5. <image :src="computed.getIconURL(item.icon)" class="van-share-sheet__icon"></image>
  6. </button>
  7. <view v-if="item.name" class="van-share-sheet__name">{{ item.name }}</view>
  8. <view v-if="item.description" class="van-share-sheet__option-description">
  9. {{ item.description }}
  10. </view>
  11. </view>
  12. </view></uni-shadow-root>
  13. </template>
  14. <wxs src="../wxs/utils.wxs" module="utils"></wxs><wxs src="./options.wxs" module="computed"></wxs>
  15. <script>
  16. global['__wxRoute'] = 'vant/dist/share-sheet/options'
  17. import { VantComponent } from '../common/component';
  18. VantComponent({
  19. props: {
  20. options: Array,
  21. showBorder: Boolean,
  22. },
  23. methods: {
  24. onSelect(event) {
  25. const { index } = event.currentTarget.dataset;
  26. const option = this.data.options[index];
  27. this.$emit('select', Object.assign(Object.assign({}, option), { index }));
  28. },
  29. },
  30. });
  31. export default global['__wxComponents']['vant/dist/share-sheet/options']
  32. </script>
  33. <style platform="mp-weixin">
  34. @import '../common/index.css';.van-share-sheet__options{position:relative;display:flex;padding:16px 0 16px 8px;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}.van-share-sheet__options--border:before{position:absolute;box-sizing:border-box;transform-origin:center;content:" ";pointer-events:none;top:0;right:0;left:16px;border-top:1px solid #ebedf0;transform:scaleY(.5)}.van-share-sheet__options::-webkit-scrollbar{height:0}.van-share-sheet__option{display:flex;flex-direction:column;align-items:center;-webkit-user-select:none;user-select:none}.van-share-sheet__option:active{opacity:.7}.van-share-sheet__button{height:auto;padding:0;line-height:inherit;background-color:initial;border:0}.van-share-sheet__button:after{border:0}.van-share-sheet__icon{width:48px;height:48px;margin:0 16px}.van-share-sheet__name{margin-top:8px;padding:0 4px;color:#646566;font-size:12px}.van-share-sheet__option-description{padding:0 4px;color:#c8c9cc;font-size:12px}
  35. </style>