61 lines
1.6 KiB
Vue
61 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<status-container titlet="图片">
|
||
|
|
<view slot="content">
|
||
|
|
<column-function :list="list" @chooseEv="chooseEv"></column-function>
|
||
|
|
<view v-if="ifPreview">
|
||
|
|
<img-video-preview :imgcurrent="imgcurrent" :list="imgList" @closeCustomEv="ifPreview=false"></img-video-preview>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</status-container>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import columnFunction from '@/components/function-list/column/column-function.vue';
|
||
|
|
import imgTools from '@/jsFile/img/yy-img.js';
|
||
|
|
import imgVideoPreview from '@/components/custom-preview/img-video-preview.vue';
|
||
|
|
export default {
|
||
|
|
components:{
|
||
|
|
columnFunction,
|
||
|
|
imgVideoPreview
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
list:[
|
||
|
|
{url:'',title:'选择图片可传递数量',iconsrc:'',iconWidth:60,iconHeight:60,content:'',contentColor:'#999999',ifNext:true},
|
||
|
|
{url:'',title:'自定义图片预览',iconsrc:'',iconWidth:60,iconHeight:60,content:'',contentColor:'#999999',ifNext:true},
|
||
|
|
],
|
||
|
|
imgList:[
|
||
|
|
// {src:'/static/deleteImg/公式.mp4',title:'标题',content:'描述描述描述描述描述描述描述描述'},
|
||
|
|
],
|
||
|
|
ifPreview:false,
|
||
|
|
imgcurrent:0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
chooseEv(obj) {
|
||
|
|
switch (obj.index){
|
||
|
|
case 0:
|
||
|
|
imgTools.chooseImg(9).then(res=>{
|
||
|
|
res.forEach((item,index)=>{
|
||
|
|
this.imgList.push({src:item,title:`标题${index+1}`,content:`描述描述描述描述描述描述描述描述${index+1}`})
|
||
|
|
})
|
||
|
|
});
|
||
|
|
break;
|
||
|
|
case 1:
|
||
|
|
if(this.imgList.length) {
|
||
|
|
this.imgcurrent = 0;
|
||
|
|
this.ifPreview = true;
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
|
||
|
|
</style>
|