CDN模式使用vant组件 引入之后调用不了组件

问题:项目用的是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>

页面的图片的大小。展示的顺序啥的,就根据后台传的数据再修改,现在还只是死的数据。ok啦!

经验分享 程序员 微信小程序 职场和发展