fix:项目初始化
This commit is contained in:
ouyangxiu
@@ -0,0 +1,217 @@
|
||||
<!--
|
||||
* @Author: 王涛
|
||||
* @Mail: no
|
||||
* @Date: 2020-09-29 19:56:44
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2022-03-29 15:36:11
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<draggable v-model="locaImg" class="list-group" tag="ul" v-bind="dragOptions" @start="drag = true" @end="drag = false">
|
||||
<div v-for="(img,index) in locaImg" :key="index" class="image-list" style="float: left;">
|
||||
<img class="el-upload-list__item-thumbnail image-detail" :src="domain+img" alt="">
|
||||
<!-- 遮罩层 -->
|
||||
<a href="#">
|
||||
<div class="image-mask">
|
||||
<span class="add" @click="handlePictureCardPreview(domain+img)">
|
||||
<i class="el-icon-view"></i>
|
||||
</span>
|
||||
<span class="delete" @click="removeImage(index)">
|
||||
<i class="el-icon-delete"></i>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
<el-dialog :visible.sync="dialogVisible" append-to-body>
|
||||
<img width="100%" :src="dialogImageUrl" alt="">
|
||||
</el-dialog>
|
||||
</div>
|
||||
</draggable>
|
||||
<el-upload action="/api/web/file/uploadImg" :show-file-list="false" list-type="picture-card" :file-list="fileList" :on-preview="handlePictureCardPreview" :on-change="handleChange" multiple :limit='100'>
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
export default {
|
||||
components: { draggable },
|
||||
data() {
|
||||
return {
|
||||
domain: this.$store.getters.getSystemConfig.webImgReq, // 播放视频的域名
|
||||
returnURL: [],
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
fileList: [
|
||||
// { name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' },
|
||||
// { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }
|
||||
],
|
||||
drag: false, // 拖拽效果是否开启
|
||||
locaImg: []
|
||||
}
|
||||
},
|
||||
props: {
|
||||
img: {
|
||||
type: Array,
|
||||
default: function() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dragOptions() {
|
||||
return {
|
||||
animation: 200,
|
||||
group: 'description',
|
||||
disabled: false,
|
||||
ghostClass: 'ghost'
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 监听拖动事件改变时，传出新的图片数组
|
||||
drag() {
|
||||
this.changeImgUrl()
|
||||
},
|
||||
img(New, old) {
|
||||
this.locaImg = []
|
||||
New.filter((item) => {
|
||||
this.locaImg.push(item)
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.locaImg = []
|
||||
if (this.img) {
|
||||
this.img.filter((item) => {
|
||||
this.locaImg.push(item)
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(file, fileList) {
|
||||
if (file.status === 'success') {
|
||||
this.locaImg.push(file.response.data.path)
|
||||
this.changeImgUrl()
|
||||
}
|
||||
},
|
||||
|
||||
// 移除图片
|
||||
removeImage(val) {
|
||||
this.locaImg.splice(val, 1)
|
||||
this.changeImgUrl()
|
||||
},
|
||||
// 预览
|
||||
handlePictureCardPreview(url) {
|
||||
this.dialogImageUrl = url
|
||||
this.dialogVisible = true
|
||||
},
|
||||
changeImgUrl(arr) {
|
||||
this.$emit('changeImgUrl', this.locaImg)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.list-group {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409eff;
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
line-height: 148px;
|
||||
text-align: center;
|
||||
}
|
||||
.avatar {
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
display: block;
|
||||
}
|
||||
.image-list {
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
border: 1px solid #c0ccda;
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
margin: 0 8px 8px 0;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
.image-list a:hover .image-mask {
|
||||
opacity: 1;
|
||||
}
|
||||
.el-icon-check {
|
||||
color: #fff;
|
||||
}
|
||||
.input-box {
|
||||
width: 80%;
|
||||
}
|
||||
.el-upload--picture-card {
|
||||
background-color: #fbfdff;
|
||||
border: 1px dashed #c0ccda;
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
line-height: 146px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.image-mask {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
cursor: default;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
opacity: 0;
|
||||
font-size: 20px;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
transition: opacity 0.3s;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.image-detail {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.image-mask::after {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.image-mask span {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
margin: 40% auto;
|
||||
}
|
||||
.image-mask .el-upload-list__item-delete {
|
||||
position: static;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
.add {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.delete {
|
||||
padding-right: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,240 @@
|
||||
<!--
|
||||
* @Author: 王涛
|
||||
* @Mail: no
|
||||
* @Date: 2020-09-29 19:56:44
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2022-03-29 15:36:11
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<draggable v-model="locaImg" class="list-group" tag="ul" v-bind="dragOptions" @start="drag = true" @end="drag = false">
|
||||
<div v-for="(img, index) in locaImg" :key="index" class="image-list" style="float: left">
|
||||
<img class="el-upload-list__item-thumbnail image-detail" :src="domain + img.image" alt="" />
|
||||
<!-- 遮罩层 -->
|
||||
<a href="#">
|
||||
<div class="image-mask">
|
||||
<span class="add" @click="handlePictureCardPreview(domain + img.image)">
|
||||
<i class="el-icon-view"></i>
|
||||
</span>
|
||||
<span class="delete" @click="removeImage(index)">
|
||||
<i class="el-icon-delete"></i>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
<el-dialog :visible.sync="dialogVisible" append-to-body>
|
||||
<img width="100%" :src="dialogImageUrl" alt="" />
|
||||
</el-dialog>
|
||||
<div class="input"><el-input v-model="locaImg[index].url" @input="changeImgUrl" :placeholder="`请输入第${index + 1}张图片跳转url`"></el-input></div>
|
||||
</div>
|
||||
</draggable>
|
||||
<el-upload
|
||||
action="/api/web/file/uploadImg"
|
||||
:show-file-list="false"
|
||||
list-type="picture-card"
|
||||
:file-list="fileList"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:on-change="handleChange"
|
||||
multiple
|
||||
:limit="100">
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
export default {
|
||||
components: { draggable },
|
||||
data() {
|
||||
return {
|
||||
domain: this.$store.getters.getSystemConfig.webImgReq, // 播放视频的域名
|
||||
returnURL: [],
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
fileList: [
|
||||
// { name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' },
|
||||
// { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }
|
||||
],
|
||||
drag: false, // 拖拽效果是否开启
|
||||
locaImg: []
|
||||
}
|
||||
},
|
||||
props: {
|
||||
img: {
|
||||
type: Array,
|
||||
default: function() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dragOptions() {
|
||||
return {
|
||||
animation: 200,
|
||||
group: 'description',
|
||||
disabled: false,
|
||||
ghostClass: 'ghost'
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 监听拖动事件改变时，传出新的图片数组
|
||||
drag() {
|
||||
this.changeImgUrl()
|
||||
},
|
||||
img(New, old) {
|
||||
this.locaImg = []
|
||||
New.filter(item => {
|
||||
this.locaImg.push({
|
||||
image: item.image,
|
||||
url: item.url
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.locaImg = []
|
||||
if (this.img) {
|
||||
this.img.filter(item => {
|
||||
this.locaImg.push({
|
||||
image: item.image,
|
||||
url: item.url
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(file, fileList) {
|
||||
if (file.status === 'success') {
|
||||
this.locaImg.push({ image: file.response.data.path, url: '' })
|
||||
this.changeImgUrl()
|
||||
}
|
||||
},
|
||||
|
||||
// 移除图片
|
||||
removeImage(val) {
|
||||
this.locaImg.splice(val, 1)
|
||||
this.changeImgUrl()
|
||||
},
|
||||
// 预览
|
||||
handlePictureCardPreview(url) {
|
||||
this.dialogImageUrl = url
|
||||
this.dialogVisible = true
|
||||
},
|
||||
changeImgUrl() {
|
||||
console.log(this.locaImg)
|
||||
this.$emit('changeImgUrl', this.locaImg)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.list-group {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409eff;
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
line-height: 148px;
|
||||
text-align: center;
|
||||
}
|
||||
.avatar {
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
display: block;
|
||||
}
|
||||
.image-list {
|
||||
background-color: #fff;
|
||||
border: 1px solid #c0ccda;
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
margin: 0 8px 8px 0;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin-bottom: 50px;
|
||||
.input {
|
||||
height: 30px;
|
||||
width: 250px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -35px;
|
||||
}
|
||||
}
|
||||
.image-list a:hover .image-mask {
|
||||
opacity: 1;
|
||||
}
|
||||
.el-icon-check {
|
||||
color: #fff;
|
||||
}
|
||||
.input-box {
|
||||
width: 80%;
|
||||
}
|
||||
.el-upload--picture-card {
|
||||
background-color: #fbfdff;
|
||||
border: 1px dashed #c0ccda;
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
line-height: 146px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.image-mask {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
cursor: default;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
opacity: 0;
|
||||
font-size: 20px;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
transition: opacity 0.3s;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.image-detail {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.image-mask::after {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.image-mask span {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
margin: 40% auto;
|
||||
}
|
||||
.image-mask .el-upload-list__item-delete {
|
||||
position: static;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
.add {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.delete {
|
||||
padding-right: 20px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user