问题:项目用的是html写的h5页面,里面使用了vue+jquery,因为要做一个图片预览的功能,就想到了vant里的ImagePreview组件,想使用一下,但是引入的时候出现了问题。
1.引入css文件
<link rel="stylesheet" type="text/css" href="../../lib/vant/index.css"/>
2.引入js文件
<script type="text/javascript" src="../../lib/vue/vue.min.js"></script>
<script type="text/javascript" src="../../lib/vant/vant.min.js"></script>
3.注册使用vant
Vue.use(vant.ImagePreview)
4.使用组件
使用组件和import有所不同,值可以自己选填,我是写在点击页面图片时候使用的
changeimg () {
console.log("999")
vant.ImagePreview({
images: ["https://m.360buyimg.com/babel/jfs/t1/44979/17/18719/194364/62be70ddEe3749112/5873151012657077.jpg.webp","https://m.360buyimg.com/babel/jfs/t1/44979/17/18719/194364/62be70ddEe3749112/5873151012657077.jpg.webp"],
startPosition: '1'
})
}
5.页面组件
<vant-image-preview>
<img @click="changeimg" src="https://m.360buyimg.com/babel/jfs/t1/44979/17/18719/194364/62be70ddEe3749112/5873151012657077.jpg.webp" >
<img @click="changeimg" src="https://m.360buyimg.com/babel/jfs/t1/44979/17/18719/194364/62be70ddEe3749112/5873151012657077.jpg.webp" >
<img @click="changeimg" src="https://m.360buyimg.com/babel/jfs/t1/44979/17/18719/194364/62be70ddEe3749112/5873151012657077.jpg.webp" >
</vant-image-preview>