Vant 反馈层组件全解：ActionSheet、ShareSheet、Notify 与 ImagePreview

<script setup>
import { ref } from 'vue';
import { showNotify, showToast } from 'vant';

const show = ref(false);
const actions = [
  { name: '收藏商品', icon: 'star-o' },
  { name: '分享给好友', icon: 'share-o', subname: '可获得积分' },
  { name: '举报', color: '#ee0a24' },
  { name: '正在下架中', disabled: true },
];

const onSelect = (action, index) => {
  // close-on-click-action 为 true 时组件会自行关闭
  showToast(`选择了：${action.name}（第 ${index + 1} 项）`);
  showNotify({ type: 'success', message: `${action.name} 成功` });
};
</script>

<template>
  <van-cell is-link title="更多操作" @click="show = true" />

  <van-action-sheet
    v-model:show="show"
    :actions="actions"
    cancel-text="取消"
    description="请选择要执行的操作"
    close-on-click-action
    @select="onSelect"
    @cancel="() => console.log('已取消')"
  />
</template>

<script setup>
import { ref } from 'vue';
import { showNotify } from 'vant';

const showShare = ref(false);
const options = [
  [
    { name: '微信', icon: 'wechat' },
    { name: '朋友圈', icon: 'wechat-moments' },
    { name: '微博', icon: 'weibo' },
    { name: 'QQ', icon: 'qq' },
  ],
  [
    { name: '复制链接', icon: 'link' },
    { name: '生成海报', icon: 'poster' },
    { name: '二维码', icon: 'qrcode' },
  ],
];

const onSelect = (option, index) => {
  showShare.value = false;
  showNotify({ type: 'primary', message: `已选择：${option.name}（${index}）` });
};
</script>

<template>
  <van-share-sheet
    v-model:show="showShare"
    title="分享给好友"
    description="分享后可获得 10 积分"
    :options="options"
    cancel-text="取消"
    @select="onSelect"
  />
</template>

import { setNotifyDefaultOptions } from 'vant';
import 'vant/es/notify/style';

setNotifyDefaultOptions({
  type: 'primary',
  duration: 2000,
  position: 'top',
  onClose() {
    console.log('notify closed');
  },
});

import { showNotify, closeNotify } from 'vant';

showNotify('已加入购物车');
showNotify({ type: 'danger', message: '库存不足', duration: 0 });

// 需要常驻时手动关闭
closeNotify();

import { showImagePreview } from 'vant';
import 'vant/es/image-preview/style';

const images = [
  'https://example.com/goods-1.jpg',
  'https://example.com/goods-2.jpg',
];

const instance = showImagePreview({
  images,
  startPosition: 1,      // 从第 2 张开始
  closeable: true,       // 显示右上角关闭图标
  showIndex: true,
  maxZoom: 3,
  onChange: (index) => console.log('current', index),
  onClose: () => console.log('preview closed'),
});

// 需要时主动关闭：instance.close();

<script setup>
import { ref } from 'vue';
import { showNotify, showImagePreview, showToast } from 'vant';

const images = ['/a.jpg', '/b.jpg', '/c.jpg'];
const showActions = ref(false);
const showShare = ref(false);

const actions = [
  { name: '分享', icon: 'share-o' },
  { name: '收藏', icon: 'star-o' },
  { name: '举报', color: '#ee0a24' },
];
const shareOptions = [
  [
    { name: '微信', icon: 'wechat' },
    { name: '朋友圈', icon: 'wechat-moments' },
  ],
  [{ name: '复制链接', icon: 'link' }],
];

const onSelectAction = (action) => {
  if (action.name === '分享') {
    showShare.value = true;
    return;
  }
  showNotify({ type: 'success', message: `${action.name}成功` });
};

const onSelectShare = async (option) => {
  showShare.value = false;
  if (option.icon === 'link') {
    await navigator.clipboard.writeText(location.href);
    showNotify({ type: 'success', message: '链接已复制' });
    return;
  }
  showToast(`调起 ${option.name} 分享`);
};

const preview = (index: number) =>
  showImagePreview({ images, startPosition: index, closeable: true });
</script>

<template>
  <van-swipe :autoplay="0" @change="() => {}">
    <van-swipe-item v-for="(src, i) in images" :key="src">
      <img :src="src" @click="preview(i)" />
    </van-swipe-item>
  </van-swipe>

  <van-action-sheet
    v-model:show="showActions"
    :actions="actions"
    cancel-text="取消"
    close-on-click-action
    @select="onSelectAction"
  />
  <van-share-sheet
    v-model:show="showShare"
    title="分享商品"
    :options="shareOptions"
    @select="onSelectShare"
  />
</template>