vant 设为封面 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>

</head>
<style>
    .img_uploader {padding: 10px 16px;}
    .img_upload_item {position: relative;margin: 0 10px 10px 0;border-radius: 8px;overflow: hidden;}
    .preview_cover {position: absolute;bottom: 0;box-sizing: border-box;width: 100%;padding: 8px;color: #fff;font-size: 12px;text-align: center;background: rgba(0, 0, 0, 0.3);}
    .img_uploader .van-image__error,.van-image__img,.van-image__loading {object-fit: cover;}
    .img_uploader .van-uploader__preview-image{width: 100px;height: 100px;margin: auto;border-radius: 8px;}
    .img_uploader .van-uploader__upload {width: 100px;height: 100px;border-radius: 8px;}
    .img_uploader .van-uploader__preview-delete{top: 1px;right: 1px;width: 24px;height: 24px;border-radius: 50%;background-color: transparent;padding: 2px;}
    .del_icon{color: #ffffff;background-color: rgba(0,0,0,.7);border-radius: 50%;overflow: hidden;}
    .isCover{background-color: #4378be;}
    .img_preview_cover{position: absolute;right: 0;bottom: 0;left: 0;}
    .img_uploader .van-image-preview__close-icon--top-right{font-size:30px}
</style>

<body>
    <div id="app">
        <div class="img_uploader">
            <div class="van-uploader__wrapper">
                <div class="img_upload_item" v-for="(item,index) in fileList" :key="index" >
                    <div class="van-image van-uploader__preview-image" @click="previewImg(fileList,index)">
                        <img :src="item.content" alt="图片" class="van-image__img">
                    </div>
                    <div class="img_preview_cover"  @click="setCover(item,index)">
                        <div class="preview_cover isCover van-ellipsis" v-if="index == 0">封面图</div>
                        <div class="preview_cover van-ellipsis" v-else>设为封面</div>
                    </div>
                    <div class="van-uploader__preview-delete">
                        <van-icon name="close" size='24' class="del_icon"></van-icon>
                    </div>
                </div>
                <van-uploader :after-read="onRead"> </van-uploader>
            </div>
        </div>
    </div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data() {
            return {
                fileList: [
                    {content: 'https://img01.yzcdn.cn/vant/leaf.jpg'},
                    {content: 'https://img.yzcdn.cn/vant/cat.jpeg'},
                    {content: 'https://img01.yzcdn.cn/vant/leaf.jpg'},
                    {content: 'https://img.yzcdn.cn/vant/cat.jpeg'},
                    {content: 'https://img01.yzcdn.cn/vant/leaf.jpg'},
                ],
            }
        },
        methods: {
            // 上传图片到图片服务器
            onRead(file) {
                this.fileList.push(file) 
            },
            // 点击预览
            previewImg(images, index) {
                let listSrc = [];
                this.fileList.forEach(function(v,i){
                    listSrc.push(v.content)
                })
                vant.ImagePreview({
                    images:listSrc,
                    startPosition: index,
                    closeable:true,
                });
                
            },
            // 设为封面
            setCover(item,index){
                var _v = this.fileList[0]
                this.fileList.splice(index,1);
                this.fileList.unshift(item);
                if(item == _v){
                    this.$toast('当前图片已经设为封面！');
                }else{
                    this.$toast('设置封面成功！');
                }
            },
        }
    })
</script>

</html>
posted @ 2022-02-14 16:31  JaneLifeVlog  阅读(45)  评论(0)    收藏  举报