智慧城市页面小组件

上传单张图片：

效果图如：

 

 

use common\helpers\ComponentHelper;

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

?

1 2 3 4 5 6 7 8 9 10 11 12

<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;
                }
            },