2023-11-7-1

src/component/LibraryPage/setLabel.vue

@@ -0,0 +1,128 @@
+<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>