|
@@ -1,23 +1,30 @@
|
|
|
<template>
|
|
|
<div class="image-effect-setting">
|
|
|
-
|
|
|
<div class="image-list-wrap">
|
|
|
<button class="add-btn" v-if="images.length === 0" @click="selectHandle">
|
|
|
- <img src="@/assets/images/default/hotspot_scene_add.png" alt="">
|
|
|
- <div>{{$i18n.t('hotspot.add_image')}}</div>
|
|
|
+ <img src="@/assets/images/default/hotspot_scene_add.png" alt="" />
|
|
|
+ <div>{{ $i18n.t("hotspot.add_image") }}</div>
|
|
|
</button>
|
|
|
<ul class="image-list" v-else>
|
|
|
<button class="add-btn" @click="selectHandle">
|
|
|
<div class="inner-wrap">
|
|
|
- <img src="@/assets/images/default/hotspot_scene_add.png" alt="">
|
|
|
- <div>{{$i18n.t('hotspot.add_tooltips')}}</div>
|
|
|
+ <img src="@/assets/images/default/hotspot_scene_add.png" alt="" />
|
|
|
+ <div>{{ $i18n.t("hotspot.add_tooltips") }}</div>
|
|
|
</div>
|
|
|
</button>
|
|
|
- <li v-for="(item,i) in images" :key="i">
|
|
|
- <img class="thumb" :src="item.icon || $thumb" alt="">
|
|
|
+ <li v-for="(item, i) in images" :key="i">
|
|
|
+ <img class="thumb" :src="item.icon || $thumb" alt="" />
|
|
|
<button class="delete-btn" @click="del(item)">
|
|
|
- <img class="normal" src="@/assets/images/icons/close01_normal@2x.png" alt="">
|
|
|
- <img class="hover" src="@/assets/images/icons/close01_hover@2x.png" alt="">
|
|
|
+ <img
|
|
|
+ class="normal"
|
|
|
+ src="@/assets/images/icons/close01_normal@2x.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ class="hover"
|
|
|
+ src="@/assets/images/icons/close01_hover@2x.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
</button>
|
|
|
</li>
|
|
|
</ul>
|
|
@@ -32,7 +39,6 @@
|
|
|
:isMultiSelection="true"
|
|
|
/>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -40,45 +46,46 @@
|
|
|
import MaterialSelector from "@/components/materialSelector.vue";
|
|
|
|
|
|
export default {
|
|
|
- components:{
|
|
|
+ components: {
|
|
|
MaterialSelector,
|
|
|
},
|
|
|
- props:['image'],
|
|
|
- data(){
|
|
|
+ props: ["image"],
|
|
|
+ data() {
|
|
|
return {
|
|
|
- images: [...this.image],
|
|
|
+ images: this.image ? this.image : [],
|
|
|
isShowSelect: false,
|
|
|
- }
|
|
|
+ };
|
|
|
},
|
|
|
- methods:{
|
|
|
- del(item){
|
|
|
- let index = this.images.findIndex(i => i.id === item.id)
|
|
|
- ~index && this.images.splice(index, 1)
|
|
|
+ methods: {
|
|
|
+ del(item) {
|
|
|
+ let index = this.images.findIndex((i) => i.id === item.id);
|
|
|
+ ~index && this.images.splice(index, 1);
|
|
|
},
|
|
|
selectHandle() {
|
|
|
- this.isShowSelect = true
|
|
|
+ this.isShowSelect = true;
|
|
|
},
|
|
|
handleSelect(data) {
|
|
|
- this.images = this.images.concat(data)
|
|
|
- this.isShowSelect = false
|
|
|
+ this.images = this.images.concat(data);
|
|
|
+ if (this.images.length > 20) {
|
|
|
+ this.$alert({ content: this.$i18n.t("hotspot.img_size") });
|
|
|
+ this.images.length = 20;
|
|
|
+ }
|
|
|
+ this.isShowSelect = false;
|
|
|
},
|
|
|
},
|
|
|
watch: {
|
|
|
images(newVal) {
|
|
|
- if (newVal.length > 20) {
|
|
|
- return this.$alert({ content: this.$i18n.t('hotspot.img_size') });
|
|
|
- }
|
|
|
- this.$emit('imageChange',newVal)
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ this.$emit("imageChange", newVal);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.image-effect-setting {
|
|
|
> .image-list-wrap {
|
|
|
min-height: 242px;
|
|
|
- background: #1A1B1D;
|
|
|
+ background: #1a1b1d;
|
|
|
border-radius: 2px;
|
|
|
border: 1px solid #404040;
|
|
|
position: relative;
|
|
@@ -106,7 +113,7 @@ export default {
|
|
|
> .add-btn {
|
|
|
background: none;
|
|
|
border-radius: 2px;
|
|
|
- border: 2px solid #0076F6;
|
|
|
+ border: 2px solid #0076f6;
|
|
|
color: @color;
|
|
|
cursor: pointer;
|
|
|
display: inline-block;
|