first

src/components/form/area/index.vue

@@ -0,0 +1,42 @@
+<template>
+    <el-cascader ref="cascader" v-bind="$attrs" :options="options" :props="cascaderProps" @change="change" />
+</template>
+
+<script lang="ts" setup>
+import { defineComponent, ref, watch } from 'vue'
+
+defineOptions({
+    name: 'Area'
+})
+import { useDictData } from '@/stores/dictData'
+
+const cascaderProps = {
+    label: 'name',
+    value: 'id',
+    checkStrictly: true,
+    emitPath: false
+}
+const cascader = ref()
+const dictData = useDictData()
+const options = dictData.state.area
+const areaName = ref(dictData.state.area[0].name)
+const change = (e: any) => {
+    if (cascader.value.getCheckedNodes()[0].pathLabels.length == 1) {
+        areaName.value = cascader.value.getCheckedNodes()[0].pathLabels[0]
+    } else if (cascader.value.getCheckedNodes()[0].pathLabels.length >= 2) {
+        areaName.value = cascader.value.getCheckedNodes()[0].pathLabels[1]
+    }
+}
+// watch(
+//     () => $attrs,
+//     (newVal, oldVal) => {
+//         console.log(123)
+
+//         // GetEchar('中国')
+//     }
+// )
+
+defineExpose({ areaName, change })
+</script>
+
+<style scoped></style>