128 lines
2.5 KiB
Vue
128 lines
2.5 KiB
Vue
|
<template>
|
||
|
|
<a-modal class="library_setLabel"
|
||
|
|
v-model:visible="setLabelShow"
|
||
|
|
:footer="null"
|
||
|
|
title="Edit tag"
|
||
|
|
width="65%"
|
||
|
|
:maskClosable="false"
|
||
|
|
:centered="true"
|
||
|
|
@onCancel="clearSetLabel"
|
||
|
|
>
|
||
|
|
<a-cascader
|
||
|
|
v-model:value="value"
|
||
|
|
style="width: 100%"
|
||
|
|
:multiple="multiple"
|
||
|
|
max-tag-count="responsive"
|
||
|
|
:options="options"
|
||
|
|
placeholder="Please select"
|
||
|
|
></a-cascader>
|
||
|
|
</a-modal>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
<script lang="ts">
|
||
|
|
import { defineComponent,ref,createVNode} from 'vue'
|
||
|
|
import { Https } from "@/tool/https";
|
||
|
|
import {dataURLtoFile,base64toFile} from "@/tool/util"
|
||
|
|
import { getCookie } from "@/tool/cookie";
|
||
|
|
import 'vue-cropper/dist/index.css'
|
||
|
|
import { VueCropper } from "vue-cropper";
|
||
|
|
import { useStore } from "vuex";
|
||
|
|
import { useI18n } from 'vue-i18n';
|
||
|
|
import { Modal,message,Upload,CascaderProps } from 'ant-design-vue';
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
components:{
|
||
|
|
VueCropper,
|
||
|
|
},
|
||
|
|
setup() {
|
||
|
|
let cropperTime:any = ref()
|
||
|
|
let multiple = ref(false)
|
||
|
|
const options: CascaderProps['options'] = [
|
||
|
|
{
|
||
|
|
label: 'Light',
|
||
|
|
value: 'light',
|
||
|
|
children: new Array(20)
|
||
|
|
.fill(null)
|
||
|
|
.map((_, index) => ({ label: `Number ${index}`, value: index })),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Bamboo',
|
||
|
|
value: 'bamboo',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
label: 'Little',
|
||
|
|
value: 'little',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
label: `'Toy Fish'`,
|
||
|
|
value: 'fish',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Toy Cards',
|
||
|
|
value: 'cards',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Toy Bird',
|
||
|
|
value: 'bird',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
let {t} = useI18n()
|
||
|
|
return {
|
||
|
|
multiple,
|
||
|
|
value: ref<string[]>([]),
|
||
|
|
options,
|
||
|
|
|
||
|
|
t
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data(){
|
||
|
|
return{
|
||
|
|
setLabelShow:false,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted(){
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
sex:{
|
||
|
|
handler(newVal:any,oldVal:any){
|
||
|
|
// let imgbox:any = this.$refs.imgbox
|
||
|
|
// let imgBoxSizeBG = imgbox?.getElementsByClassName('cropper-view-box-BG')?.[0]
|
||
|
|
// if(imgBoxSizeBG){
|
||
|
|
// if(newVal == 'Male'){
|
||
|
|
// imgBoxSizeBG.style.background = `url(./image/maleBG.png) no-repeat 0 0 / 100% 100%`
|
||
|
|
// }else{
|
||
|
|
// imgBoxSizeBG.style.background = `url(./image/femaleBG.png) no-repeat 0 0 / 100% 100%`
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
init(str:any){
|
||
|
|
this.setLabelShow = true
|
||
|
|
if(str === 'add'){
|
||
|
|
this.multiple = false
|
||
|
|
}else{
|
||
|
|
this.multiple = true
|
||
|
|
}
|
||
|
|
console.log(this.$parent?.options);
|
||
|
|
|
||
|
|
},
|
||
|
|
clearSetLabel(){
|
||
|
|
this.setLabelShow = false
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
<style lang="less">
|
||
|
|
.library_setLabel{
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|