目录
1.图片上传
HTML
<!-- //?模块说明 => => 轮播图模块 -->
<!--
从数据库中获得图片
增加时，把增加的图片传到数据库即可
删除时，把需要删除图片的id传过去即可
-->
<template>
<div class="imgLoad-layout">
<div
class="carouselImgBox"
:class="carouselImgList.length == 12 ? 'disNone' : ''"
>
<el-upload
action="#"
list-type="picture-card"
:limit="12"
:auto-upload="false"
:on-change="lookImg"
:before-remove="beforeRemove"
:file-list="carouselImgList"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
</div>
<Button @click="confirmUpdataImg">提交</Button>
</div>
</template>JS
<script>
import { mapMutations, mapState, mapGetters, mapActions } from 'vuex'
export default {
name: 'imgLoad',
props: {},
components: {},
data() {
return {
dialogImageUrl: '', //当前进行查看的文件的信息
dialogVisible: false, //查看文件的弹框
carouselImgList: [], //当前文件的图片信息
showCarouel: false, //预览
updateList: [], //当前正在编辑，需要更新的数组
}
},
methods: {
/**
* 监听方法
*/
//上传文件时获取文件信息
lookImg(file, fileList) {
console.log(file)
// 上传时，类型传A
let addImg = {
updateType: 'A',
updateData: file,
}
this.updateList.push(addImg)
},
//删除前
beforeRemove(file) {
let isDel = false
console.log(file)
// 删除不在数据库中的图片时
this.updateList.forEach((item, index) => {
if (file.uid === item.updateData.uid) {
this.updateList.splice(index, 1)
isDel = true
}
})
console.log(this.updateList)
// 删除已经在数据库中的图片
if (!isDel) {
// 删除时，类型传D
let delImg = {
updateType: 'D',
updateData: file.photoId,
}
this.updateList.push(delImg)
}
},
toBase64(file) {
return new Promise(function(resolve, reject) {
let reader = new FileReader()
let imgResult = ''
reader.readAsDataURL(file)
reader.onload = function() {
imgResult = reader.result
}
reader.onerror = function(error) {
reject(error)
}
reader.onloadend = function() {
resolve(imgResult)
}
})
},
/**
* 请求数据
*/
//确定图片的更新
async confirmUpdataImg() {
let param = {}
//循环更新的图片
console.log(this.carouselImgList)
for (let i = 0, len = this.updateList.length; i < len; i++) {
// 如果是新增
if (this.updateList[i].updateType === 'A') {
console.log(this.updateList[i])
this.updateList[i].updateData = await this.toBase64(
this.updateList[i].updateData.raw
)
}
}
param.data = {
updateList: this.updateList,
}
console.log(param)
this.updateList = []
this.carouselImgList = []
},
},
mounted() {},
computed: {},
watch: {},
filters: {},
}
</script>
CSS
<style lang="less" scoped>
.imgLoad-layout {
.carouselImgBox {
display: flex;
margin: 50px;
}
}
</style>2.封装的下拉多选组件
HTML代码
<template>
<!--
multiple 是否多选
clearable 是否可以清空选项
collapse-tags 多选时是否将它们合并为一段文字
若选择大于两项时，合并显示数字
-->
<div class="about-layout">
<el-select
v-model="searchData.passTypes"
multiple
:collapse-tags="searchData.passTypes.length > 2"
clearable
placeholder="类型"
@change="change"
>
<!-- value 内部绑定的值 label我们看到的选项的值 -->
<el-option
v-for="item in statusList"
:key="item.type"
:value="item.type"
:label="item.name"
>
<span class="check"></span> <!--封装的框框-->
<span class="text">{
{ item.name }}</span> <!--设定颜色之类的样式-->
</el-option>
</el-select>
</div>
</template>JS代码
<script>
export default {
name: "About",
data() {
return {
searchData: {
passTypes: [], //因为是多选，所以绑定的是个数组 单选可以是字符串
},
statusList: [
{
type: "N",
name: "吃饭",
},
{
type: "O",
name: "喝水",
},
{
type: "Q",
name: "玩耍",
},
],
};
},
methods: {
change() {
//可以发送请求
console.log(123);
},
},
};
</script>CSS代码
//自定义，多选下拉
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
content: "";
}
.el-select-dropdown__item.selected {
font-weight: normal;
color: #71c922 !important;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected .check {
background-color: #71c922;
border-color: #71c922;
}
.el-select-dropdown.is-multiple
.el-select-dropdown__item.selected
.check:after {
transform: rotate(45deg) scaleY(1);
}
.el-select-dropdown.is-multiple .el-select-dropdown__item .check::after {
box-sizing: content-box;
content: "";
border: 1px solid #fff;
border-left: 0;
border-top: 0;
height: 7px;
left: 4px;
position: absolute;
top: 1px;
transform: rotate(45deg) scaleY(0);
width: 3px;
transition: transform 0.15s ease-in 0.05s;
transform-origin: center;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item .check {
top: 2px;
display: inline-block;
position: relative;
border: 1px solid #dcdfe6;
border-radius: 2px;
box-sizing: border-box;
width: 14px;
height: 14px;
background-color: #fff;
z-index: 1;
transition: border-color 0.1s cubic-bezier(0.71, -0.46, 0.29, 1.46),
background-color 0.1s cubic-bezier(0.71, -0.46, 0.29, 1.46);
}
.el-select-dropdown.is-multiple .el-select-dropdown__item .text {
display: inline-block;
padding-left: 10px;
line-height: 19px;
font-size: 14px;
color: #44566c;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected .text {
color: #71c922;
}