“我正参与「程序编写·启航计划」”
要求
实现一个图标库的部件如下图所示,规定能够提交svg和png格式照片,点一下可选定,并且在右上方表明删除图标可以点击删掉！
完成
逐渐想得用相片墙能直接完成,可是并不好,最后使用的如下所示方法完成:
1. 最先有一个弹出窗口
2. 弹出窗口里有一个提交部件,提交部件再放一个card信用卡用于展现上传照片。
3. 运用flex合理布局开展款式改动,那样合理布局就完成
4. 当提交完毕之后图片显示在卡牌中
5. 点击此处能够选定,选定以后给信用卡再加上黑影来描述现阶段选定(默认选中第一个),点一下明确将照片信息的传递给父部件,完成图片挑选
6. 点一下删掉能出提醒,点一下明确就删除图片,读取插口再次读取数据!
<el-dialog
:close-on-click-modal="false" // 在空白点一下容许弹窗关闭
title="图标库"
:visible.sync="dialogVisible"
width="40%"
@open="open" // 弹出窗口开启的情况下,能去调插口读取数据
>
<div>
<el-upload
name="upfile"
accept=".png,.svg" // 再选上传照片的弹出窗口内进行种类限定
list-type="picture-card"
:show-file-list="false"
:action="upload.url" // 照片上传详细地址
:data="upload.data"
:on-success="onSuccess" // 发布成功调用接口读取数据,对图标库开展更新
:before-upload="beforeUpload" // 提交以前,能够对上传图片种类开展校检
>
<i class="el-icon-upload" />
</el-upload>
<el-card v-for="(item,index) in iconList" :key="index" :class="item.active?'':'none'">
<el-button v-if="item.active" type="text"><i class="el-icon-close" /></el-button>
<el-image :src="item.url" />
</el-card>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="submitIcon">确 定</el-button>
</span>
</el-dialog>
文件属性校检
// 文件属性校检
beforeUpload(file) {
if (file.type !== 'image/png' && file.type !== 'image/svg xml') {
this.$message.warning('上传数据图表只支持SVG、PNG文件格式')
return false
}
}
提交部件款式改动(相片墙icon垂直居中)
::v-deep .el-upload--picture-card {
width:100px;
height:100px;
line-height: 100px;
text-align: center;
margin-right: 10px;
margin-top: 10px;
}
遇到的困难
一开始写的时候,其实并没有删掉作用,所以也是他在实施过程中感觉需要一个删掉因此写的当鼠标移入card时表明现阶段card的删除按钮,移除时掩藏删除按钮。
