!17 [修复] select组件中外部参数变更后组件内的数值变化不生效的问题

Merge pull request !17 from 鄢鹏权/develop

example/docs/zh-CN/components/select.md

@@ -27,6 +27,40 @@ export default {
 }
 </script>
 
+
+::: title 数据联动
+:::
+
+::: demo
+
+<template>
+  <lay-select v-model="value">
+    <lay-select-option value="1" label="学习"></lay-select-option>
+    <lay-select-option value="2" label="编码"></lay-select-option>
+    <lay-select-option value="3" label="运动"></lay-select-option>
+  </lay-select>
+  <lay-button @click="change1">点击切换(当前值:{{value}})</lay-button>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  name:'selectChange',
+  setup() {
+    const value = ref(null);
+    var i = 1;
+    function change1(){
+      value.value=i++%3+1
+    }
+    return {
+      value,
+      change1
+    }
+  }
+}
+</script>
+
 :::
 
 ::: title 选择禁用
@@ -74,6 +108,7 @@ export default {
     <lay-select-option value="6" label="打篮球"></lay-select-option>
     <lay-select-option value="7" label="rap"></lay-select-option>
   </lay-select>
+  <lay-button @click="mvalue=[1,5,7]">点击切换(当前值:{{mvalue.join()}})</lay-button>
 </template>
 
 <script>

src/module/page/index.vue

@@ -48,6 +48,7 @@
 			到第
 			<input
 				v-model="currentPageShow"
+				@keypress.enter="jumpPage()"
 				type="number"
 				class="layui-input layui-input-number"
 			/>页

src/module/select/index.vue

@@ -151,16 +151,21 @@ watch(
 	}
 );
 
-watch(
+watch(props, () => {
-  () => props.modelValue,
+	let value = props.modelValue;
-  (value) => {
+	if (props.multiple) {
+		if (Array.isArray(value)) {
 			selectItem.value.value = value;
-    if (!value && value !== 0) {
+			selectItem.value.label = value.map((o) => ItemsMap.value[o]);
-      props.multiple && (selectItem.value.value = []);
+		} else {
-      selectItem.value.label = props.multiple ? [] : null;
+			console.error("多选时请传入数组值");
 		}
+	} else {
+		selectItem.value.value = value;
+		//@ts-ignore
+		selectItem.value.label = ItemsMap.value[value] || "";
 	}
-);
+});
 
 // 禁止操作子项
 const disabledItemMap: { [key: string | number]: boolean } = {};
@@ -202,7 +207,14 @@ const removeItemHandle = function (e: MouseEvent, _selectItem: SelectItem) {
 	e.stopPropagation();
 	selectItemHandle(_selectItem, false);
 };
-
+const ItemsMap: Ref<{ [index: string]: string }> = ref({});
+const selectItemPush = function (p: SelectItem) {
+	if (p.value !== null) {
+		//@ts-ignore
+		ItemsMap.value[p.value] = p.label;
+	}
+};
 provide("selectItemHandle", selectItemHandle);
 provide("selectItem", selectItem);
+provide("selectItemPush", selectItemPush);
 </script>

src/module/selectOption/index.vue

@@ -24,7 +24,7 @@ export default {
 
 <script setup lang="ts">
 import LayCheckbox from "../checkbox";
-import { SelectItem, SelectItemHandle } from "../type";
+import { SelectItem, SelectItemHandle, SelectItemPush } from "../type";
 import { computed, defineProps, inject, onMounted, Ref } from "vue";
 
 const props = withDefaults(
@@ -40,26 +40,42 @@ const props = withDefaults(
 
 const selectItemHandle = inject("selectItemHandle") as SelectItemHandle;
 const selectItem = inject("selectItem") as Ref<SelectItem>;
+const selectItemPush = inject("selectItemPush") as Ref<SelectItemPush>;
 
 const selectHandle = function () {
 	!props.disabled && callSelectItemHandle(!selected.value);
-}
+};
-const callSelectItemHandle = function(isChecked ?: boolean){
+const callSelectItemHandle = function (isChecked?: boolean) {
-  selectItemHandle({
+	// console.log("callSelectItemHandle");
-    value : props.value,
+	selectItemHandle(
-    label : props.label,
+		{
-    disabled : props.disabled
+			value: props.value,
-  }, isChecked);
+			label: props.label,
-}
+			disabled: props.disabled,
+		},
+		isChecked
+	);
+};
 const selected = computed({
-  get(){
+	get() {
 		const selectValues = selectItem.value.value;
 		if (Array.isArray(selectValues)) {
 			return (selectValues as any[]).indexOf(props.value) > -1;
 		}
-    return selectItem.value.value === props.value
+		return selectItem.value.value === props.value;
 	},
-  set(val){}
+	set(val) {},
-})
+});
-onMounted(() => selected.value && callSelectItemHandle())
+const callSelectItemPush = function () {
+	let item = {
+		value: props.value,
+		label: props.label,
+		disabled: props.disabled,
+	};
+	selectItemPush(item);
+};
+onMounted(() => {
+	callSelectItemPush();
+	selected.value && callSelectItemHandle();
+});
 </script>

src/module/type/select.ts

@@ -9,3 +9,7 @@ export interface SelectItem {
 export interface SelectItemHandle {
   (selectItem: SelectItem, isChecked?: boolean): void;
 }
+
+export interface SelectItemPush {
+  (selectItem: SelectItem): void
+}