标签：vue cn 预览 photo h5 https preview vant

h5页面使用全屏预览

最近需要在微信小程序中跳转到h5页面
在h5页面中需要进行图片预览展示
由于没有使用第三方的组件库。
只能手写，但是时间很紧张。
所以只能够寻找第三方的插件

vue-photo-preview的使用

<!-- 引入这个插件 -->
<script src="vue-photo-preview.js"></script>
<!-- 引入这个插件的css -->

<div class="img-bolick showlistimg">
    <!-- 非常重要  preview="1" 的值相同表示是一组可以轮播-->
    <div class="widthimg-box">
        <img class="imgwh" preview="1" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
    </div>
    <div class="widthimg-box">
        <img class="imgwh" preview="1" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
    </div>
    <div class="widthimg-box">
        <img class="imgwh" preview="1" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
    </div>	
</div>
</div>

var options = {
    fullscreenEl: true, //关闭全屏按钮
}
Vue.use(vuePhotoPreview, options)
var vm = new Vue({
    el: '#app',
    data: function() {
        return { 
            listimg:[]
        }
    },
    mounted() {
        //异步插入的图片.我们使用点击事件来模拟异步插入图片
        httpsBackData(){
            setTimeout(() => {
                //listimg 是视图上显示的数据源
                this.listimg=[
                'https://img01.yzcdn.cn/vant/cat.jpeg',
                'https://img.yzcdn.cn/vant/apple-1.jpg',
                'https://img.yzcdn.cn/vant/apple-2.jpg']
                //进行预览这样就ok了
                vm.$previewRefresh()
            }, 1000);
        },

        
        this.$preview.on('imageLoadComplete', (e, item) => {
            console.log("xxx", e, item )
            // console.log(this.$preview.self)
        })
    },
}

{{uploading-image-881834.png(uploading...)}}

标签：vue,cn,预览,photo,h5,https,preview,vant
来源： https://www.cnblogs.com/ishoulgodo/p/15626830.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。