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啦!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值