designer-hub/packages/app/src/pages/common/components/share-action-sheet.vue

<script setup lang="ts">
import timeline from '@designer-hub/assets/src/libs/assets/timeline'
import wechat from '@designer-hub/assets/src/libs/assets/wechat'

const modelValue = defineModel({
  default: false,
  type: Boolean,
})
const props = withDefaults(
  defineProps<{
    options?: any
  }>(),
  {},
)
const emits = defineEmits<{ select: [action: string | 'share' | 'timeline'] }>()
const actions = [
  { icon: wechat, title: '微信好友', value: 'share' },
  { icon: timeline, title: '朋友圈', value: 'timeline' },
]
const handleAction = (it: { value: string }) => {
  modelValue.value = false
  emits('select', it.value)
}
</script>

<template>
  <wd-action-sheet v-model="modelValue" title="分享到" @close="modelValue = false">
    <view class="" style="">
      <div class="flex justify-around">
        <template v-for="(it, index) in actions" :key="index">
          <button :open-type="it.value" :data-options="options">
            <div class="flex flex-col items-center gap-2" @click="handleAction(it)">
              <div class="w-12 h-12 relative">
                <wd-img width="100%" height="100%" :src="it.icon"></wd-img>
              </div>
              <div class="text-black/60 text-xs font-normal font-['PingFang_SC'] leading-relaxed">
                {{ it.title }}
              </div>
            </div>
          </button>
        </template>
      </div>
      <div>
        <wd-button block type="text" @click="modelValue = false">取消</wd-button>
      </div>
    </view>
  </wd-action-sheet>
</template>

<style scoped lang="scss"></style>