Commit 7419c0ca27db343a4555cbeab0d6a4ef914493bb
1 parent
976a4b61
图片组件功能完善
Showing
2 changed files
with
34 additions
and
27 deletions
src/views/bigscreenDesigner/designer/components/customUploadNew.vue
| @@ -12,7 +12,8 @@ | @@ -12,7 +12,8 @@ | ||
| 12 | <el-button size="medium" type="info" icon="el-icon-upload2" @click="uploadHandler">点击上传</el-button> | 12 | <el-button size="medium" type="info" icon="el-icon-upload2" @click="uploadHandler">点击上传</el-button> |
| 13 | <input type="file" class="file" ref="files" @change="getImages" /> | 13 | <input type="file" class="file" ref="files" @change="getImages" /> |
| 14 | <div class="image-list"> | 14 | <div class="image-list"> |
| 15 | - <el-image class="image" v-for="item in fileList" :key="item.fileId" :src="item.urlPath" lazy></el-image> | 15 | + <el-image class="image" v-for="item in fileList" :key="item.fileId" :src="item.urlPath" lazy |
| 16 | + @click="imageClickHander(item)"></el-image> | ||
| 16 | </div> | 17 | </div> |
| 17 | </el-dialog> | 18 | </el-dialog> |
| 18 | 19 | ||
| @@ -48,14 +49,20 @@ export default { | @@ -48,14 +49,20 @@ export default { | ||
| 48 | uploadImgUrl: "" | 49 | uploadImgUrl: "" |
| 49 | }; | 50 | }; |
| 50 | }, | 51 | }, |
| 51 | - async created() { | 52 | + created() { |
| 52 | this.uploadImgUrl = this.value; | 53 | this.uploadImgUrl = this.value; |
| 53 | - const rs = await getFielList(); | ||
| 54 | - if (rs.code === 200 || rs.code === "200") { | ||
| 55 | - this.fileList = rs.data; | ||
| 56 | - } | 54 | + this.getFielList(); |
| 57 | }, | 55 | }, |
| 58 | methods: { | 56 | methods: { |
| 57 | + // 获取图片列表 | ||
| 58 | + async getFielList() { | ||
| 59 | + const rs = await getFielList(); | ||
| 60 | + if (rs.code === 200 || rs.code === "200") { | ||
| 61 | + let fileList = rs.data; | ||
| 62 | + fileList.reverse(); | ||
| 63 | + this.fileList = fileList; | ||
| 64 | + } | ||
| 65 | + }, | ||
| 59 | uploadHandler() { | 66 | uploadHandler() { |
| 60 | this.$refs.files.click(); | 67 | this.$refs.files.click(); |
| 61 | }, | 68 | }, |
| @@ -68,6 +75,7 @@ export default { | @@ -68,6 +75,7 @@ export default { | ||
| 68 | this.$message.warning("只能上传图片格式") | 75 | this.$message.warning("只能上传图片格式") |
| 69 | } | 76 | } |
| 70 | }, | 77 | }, |
| 78 | + // 图片上传 | ||
| 71 | upload(file) { | 79 | upload(file) { |
| 72 | let that = this; | 80 | let that = this; |
| 73 | let formdata = new FormData(); | 81 | let formdata = new FormData(); |
| @@ -79,33 +87,31 @@ export default { | @@ -79,33 +87,31 @@ export default { | ||
| 79 | .then(response => { | 87 | .then(response => { |
| 80 | let res = response.data; | 88 | let res = response.data; |
| 81 | if (res.code === "200") { | 89 | if (res.code === "200") { |
| 82 | - that.uploadImgUrl = res.data.urlPath; | ||
| 83 | - that.$emit("input", that.uploadImgUrl); | ||
| 84 | - that.$emit("change", that.uploadImgUrl); | 90 | + this.getFielList(); |
| 91 | + // that.uploadImgUrl = res.data.urlPath; | ||
| 92 | + // that.$emit("input", that.uploadImgUrl); | ||
| 93 | + // that.$emit("change", that.uploadImgUrl); | ||
| 85 | } | 94 | } |
| 86 | }); | 95 | }); |
| 87 | }, | 96 | }, |
| 88 | - changeInput(e) { | ||
| 89 | - // if (e) { | ||
| 90 | - // this.uploadImgUrl = e; | ||
| 91 | - // } else { | ||
| 92 | - // this.$refs.files.value = ""; | ||
| 93 | - // this.uploadImgUrl = ""; | ||
| 94 | - // } | ||
| 95 | - // this.$emit("input", this.uploadImgUrl); | ||
| 96 | - // this.$emit("change", this.uploadImgUrl); | ||
| 97 | - } | 97 | + // 文本框url改变 |
| 98 | + changeInput() { | ||
| 99 | + this.$emit("input", this.uploadImgUrl); | ||
| 100 | + this.$emit("change", this.uploadImgUrl); | ||
| 101 | + }, | ||
| 102 | + // 图片点击事件 | ||
| 103 | + imageClickHander(item) { | ||
| 104 | + const { urlPath } = item; | ||
| 105 | + this.uploadImgUrl = urlPath; | ||
| 106 | + this.$emit("input", urlPath); | ||
| 107 | + this.$emit("change", urlPath); | ||
| 108 | + this.dialogVisible = false; | ||
| 109 | + }, | ||
| 98 | } | 110 | } |
| 99 | }; | 111 | }; |
| 100 | </script> | 112 | </script> |
| 101 | <style lang="scss" scoped> | 113 | <style lang="scss" scoped> |
| 102 | .file { | 114 | .file { |
| 103 | - // position: absolute; | ||
| 104 | - // width: 100%; | ||
| 105 | - // padding: 100%; | ||
| 106 | - // right: 0; | ||
| 107 | - // top: 0; | ||
| 108 | - // opacity: 0; | ||
| 109 | display: none; | 115 | display: none; |
| 110 | } | 116 | } |
| 111 | 117 |
src/views/bigscreenDesigner/designer/widget/widgetImage.vue
| 1 | <template> | 1 | <template> |
| 2 | <div class="imagebox" :style="styleColor"> | 2 | <div class="imagebox" :style="styleColor"> |
| 3 | - <div class="bg"></div> | ||
| 4 | - <img :class="transStyle.startRotate ? 'startImg' : ''" :style="imgStyle" :src="imgStyle.imageAdress" alt="" /> | 3 | + <div class="bg" v-if="!imgStyle.imageAdress"></div> |
| 4 | + <img :class="transStyle.startRotate ? 'startImg' : ''" :style="imgStyle" :src="imgStyle.imageAdress" alt="" | ||
| 5 | + v-else /> | ||
| 5 | </div> | 6 | </div> |
| 6 | </template> | 7 | </template> |
| 7 | <script> | 8 | <script> |