智慧城市页面小组件

上传单张图片：

效果图如：

 

 

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-attachment');

            <el-form-item label="门店套餐图片:">
                <com-attachment v-if="!dataInfo.cover_pic" :multiple="false" :max="1" type="images" @selected="coverPic">
                    <div class="card-upload">
                        <i class="el-icon-plus"></i>
                    </div>
                </com-attachment>
                <div class="card-coverimg" v-else>
                    <el-image style="width: 200px; height: 80px" :src="dataInfo.cover_pic"></el-image>
                    <el-button @click="delPic('cover_pic')" class="icon-close" type="primary" size="mini" icon="el-icon-close" circle style="left: 176px;"></el-button>
                </div>
                <p class="tips-text">作用于商城列表、分享头图；建议尺寸：400*250像素。</p>
            </el-form-item>

　　

            coverPic(e) { // 选择图片
                this.dataInfo.cover_pic = e[0].url
            },
            delPic(type, index) { // 删除图片
                switch (type) {
                    case 'cover_pic':
                        this.dataInfo.cover_pic = ''
                        break;
                    case 'bannar_pic':
                        this.dataInfo.bannar_pic.splice(index, 1)
                        break;
                    case 'video_cover_pic':
                        this.dataInfo.video_cover_pic = '';
                        break;
                    default:
                        break;
                }
            },