124

src/components/MyComponents/Provinces2/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="form-item-box" :style="{ width: width }">
+    <el-cascader class="el-cascader-zj" :props="{ value: 'label', label: 'label', children: 'children' }"
+      :options="arercity" expand-trigger="hover" change-on-select @change="onInChange" :placeholder="placeholder"
+      v-bind="$attrs" v-model="value"></el-cascader>
+  </div>
+</template>
+
+<script setup>
+import { COMPONENT_WIDTH } from '@/constant';
+import allAreas from "./provicesData";
+import {
+  ref,
+  defineProps,
+  defineEmits,
+  defineExpose,
+  computed,
+  nextTick,
+  watch
+} from "vue";
+const props = defineProps({
+  //获取组件传值
+  placeholder: {
+    default: "请选择地区位置",
+    type: String
+  },
+
+  provinces2: {
+    default: () => [],
+    type: Array
+  },
+  width: {
+    default: COMPONENT_WIDTH,
+    type: String
+  }
+});
+const value = ref([]);
+
+nextTick(() => {
+  if (props.provinces2.length > 0) {
+    init(props.provinces2);
+  }
+});
+
+const init = (data) => { };
+const registerAddress = ref([]);
+
+const arercity = ref(allAreas);
+const emits = defineEmits(["update:provinces2"]);
+const onInChange = (e) => {
+  emits("update:provinces2", e);
+};
+// const onInput = (e) => {
+//   emits("update:provinces2", e);
+// };
+</script>
+
+<style lang="scss" scoped>
+.el-cascader-zj {
+  width: 100%;
+}
+</style>