随笔 - 242  文章 - 2  评论 - 7  阅读 - 19万 

第一种:函数调用

import { ImagePreview } from 'vant';
ImagePreview({
                images: this.imagesList, // 图片集合
                closeable: true		// 关闭按钮
})

第二种:组件调用
组件调用区分全局调用或局部调用。全局调用使用Vue.use()组册,局部调用使用components注册。

  • 全局
Main.js 引入
import { ImagePreview } from 'vant';
Vue.use(ImagePreview);

// 调用
ImagePreview({
                images: this.imagesList,
                closeable: true	
})

  • 局部
import previewPicture1 from '../../components/vant-packs/preview-picture';
// 引用
<previewPicture1 v-if="imgShow" 
            :isShow="imgShow"
            :list="images"
            @handleClose="handleImgClose"
            />
// 注册
components:{ previewPicture1 }

// 子组件
<van-image-preview v-model="show" :images="list" @change="onChange" @closed="handleClosed">
            <template v-slot:index>第{{ index+1 }}页</template>
            <template #cover>第{{ index+1 }}页</template>
</van-image-preview>

参考文献:https://youzan.github.io/vant/#/zh-CN/image-preview

posted on   羽丫头不乖  阅读(2295)  评论(0编辑  收藏  举报
编辑推荐:
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示