npm i vant -S
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
vant的ImagePreview 图片预览组件
组件调用
如果需要在图片预览内嵌入组件或其他自定义内容,可以使用组件调用的方式,调用前需要通过 Vue.use 注册组件
<van-image-preview
v-model="show"
:images="images"
@change="onChange"
>
<template v-slot:index>第{{ index }}页</template>
</van-image-preview>
export default {
data() {
return {
show: false,
index: 0,
images: [
'https://img.yzcdn.cn/1.jpg',
'https://img.yzcdn.cn/2.jpg'
]
};
},
methods: {
onChange(index) {
this.index = index;
}
}
}
vue---图片预览(h5手机端--vant插件)
最新推荐文章于 2024-05-25 09:36:29 发布