✨(component): 更新日志

package/component/src/component/select/index.less

@@ -1,3 +1,8 @@
+@import "../checkbox/index.less";
+@import "../input/index.less";
+@import "../dropdown/index.less";
+@import "../tagInput/index.less";
+
 .layui-select {
   width: 220px;
 

package/component/src/component/select/index.vue

@@ -1,12 +1,12 @@
 <script lang="ts">
-export default {
+  export default {
     name: "LaySelect",
-};
+  };
-</script>
+  </script>
   
-<script setup lang="ts">
+  <script setup lang="ts">
-import "./index.less";
+  import "./index.less";
-import {
+  import {
     provide,
     computed,
     ref,
@@ -16,51 +16,59 @@ import {
     VNode,
     Component,
     watch,
-} from "vue";
+  } from "vue";
-import LayInput from "../input/index.vue";
+  import LayInput from "../input/index.vue";
-import LayTagInput from "../tagInput/index.vue";
+  import LayTagInput from "../tagInput/index.vue";
-import LayDropdown from "../dropdown/index.vue";
+  import LayDropdown from "../dropdown/index.vue";
-import LaySelectOption, {
+  import LaySelectOption, {
     LaySelectOptionProps,
-} from "../selectOption/index.vue";
+  } from "../selectOption/index.vue";
   
-export interface LaySelectProps {
+  export interface LaySelectProps {
     name?: string;
     create?: boolean;
     disabled?: boolean;
     placeholder?: string;
+    showEmpty?: boolean;
+    emptyMessage?: string;
     modelValue?: any;
     multiple?: boolean;
     items?: LaySelectOptionProps[];
     size?: "lg" | "md" | "sm" | "xs";
+    collapseTagsTooltip?: boolean;
+    minCollapsedNum?: number;
     allowClear?: boolean;
-}
+  }
   
-export interface SelectEmits {
+  export interface SelectEmits {
     (e: "update:modelValue", value: string): void;
     (e: "change", value: string): void;
-}
+  }
   
-const props = withDefaults(defineProps<LaySelectProps>(), {
+  const props = withDefaults(defineProps<LaySelectProps>(), {
     modelValue: null,
     placeholder: "请选择",
+    showEmpty: true,
+    emptyMessage: "请选择",
+    collapseTagsTooltip: true,
+    minCollapsedNum: 3,
     disabled: false,
     multiple: false,
     create: false,
     size: "md",
     allowClear: false,
-});
+  });
   
-const slots = useSlots();
+  const slots = useSlots();
-const searchValue = ref("");
+  const searchValue = ref("");
-const singleValue = ref("");
+  const singleValue = ref("");
-const multipleValue = ref([]);
+  const multipleValue = ref([]);
-const openState: Ref<boolean> = ref(false);
+  const openState: Ref<boolean> = ref(false);
-const selectedItem: Ref<any> = ref([]);
+  const selectedItem: Ref<any> = ref([]);
-const options = ref<any>([]);
+  const options = ref<any>([]);
-const emits = defineEmits<SelectEmits>();
+  const emits = defineEmits<SelectEmits>();
   
-onMounted(() => {
+  onMounted(() => {
     if (slots.default) {
       getOption(slots.default());
     }
@@ -71,9 +79,13 @@ onMounted(() => {
       selectedValue,
       () => {
         if (multiple.value) {
-        multipleValue.value = selectedValue.value.map((value: any) =>{
+          multipleValue.value = selectedValue.value.map((value: any) => {
-　　      return options.value.find((item: any) => item.value === value)
+            return options.value.find((item: any) => {
-        })
+              item.disabled == "" || item.disabled == true ? item.closable = false : item.closable = true;
+              return item.value === value;
+            });
+  
+          });
         } else {
           singleValue.value = options.value.find((item: any) => {
             return item.value === selectedValue.value;
@@ -82,9 +94,9 @@ onMounted(() => {
       },
       { immediate: true }
     );
-});
+  });
   
-const getOption = function (nodes: VNode[]) {
+  const getOption = function (nodes: VNode[]) {
     nodes?.map((item: VNode) => {
       let component = item.type as Component;
       if (component.name === LaySelectOption.name) {
@@ -93,9 +105,9 @@ const getOption = function (nodes: VNode[]) {
         getOption(item.children as VNode[]);
       }
     });
-};
+  };
   
-const selectedValue = computed({
+  const selectedValue = computed({
     get() {
       return props.modelValue;
     },
@@ -103,20 +115,20 @@ const selectedValue = computed({
       emits("update:modelValue", val);
       emits("change", val);
     },
-});
+  });
   
-const multiple = computed(() => {
+  const multiple = computed(() => {
     return props.multiple;
-});
+  });
   
-provide("openState", openState);
+  provide("openState", openState);
-provide("selectedItem", selectedItem);
+  provide("selectedItem", selectedItem);
-provide("selectedValue", selectedValue);
+  provide("selectedValue", selectedValue);
-provide("searchValue", searchValue);
+  provide("searchValue", searchValue);
-provide("multiple", multiple);
+  provide("multiple", multiple);
-</script>
+  </script>
   
-<template>
+  <template>
     <div class="layui-select">
       <lay-dropdown
         :disabled="disabled"
@@ -128,6 +140,8 @@ provide("multiple", multiple);
           v-if="multiple"
           v-model="multipleValue"
           :allow-clear="allowClear"
+          :collapseTagsTooltip="collapseTagsTooltip"
+          :minCollapsedNum="minCollapsedNum"
           :disabledInput="true"
         >
           <template #suffix>
@@ -161,6 +175,7 @@ provide("multiple", multiple);
                 size="sm"
               ></lay-input>
             </div>
+            <lay-select-option v-if="showEmpty && !multiple" :label="emptyMessage" value=""></lay-select-option>
             <template v-if="items">
               <lay-select-option
                 v-for="(item, index) in items"
@@ -173,4 +188,4 @@ provide("multiple", multiple);
         </template>
       </lay-dropdown>
     </div>
-</template>
+  </template>

package/component/src/component/selectOption/index.vue

@@ -14,7 +14,6 @@ import {
   Ref,
   onMounted,
 } from "vue";
-import { arrayExpression } from "@babel/types";
 
 export interface LaySelectOptionProps {
   label: string;

package/document-component/src/document/zh-CN/guide/changelog.md

@@ -19,6 +19,8 @@
           <li>[新增] tag-input 标签输入框组件, 用于录入事物的属性与纬度。</li>
           <li>[新增] table 组件 header 插槽, 用于在工具栏与表格之间插入元素。</li>
           <li>[新增] tabitem 组件 icon 属性, 提供 title 属性前置 icon 设置。</li>
+          <li>[新增] select 组件 collapseTagsTooltip 属性, 多选模式下是否悬浮显示折叠的选中项。</li>
+          <li>[新增] select 组件 minCollapsedNum 属性, 多选模式选中项超过多少时折叠。</li>
           <li>[修复] tolltip 组件 content 变化时, 位置无法自动计算调整的问题。</li>
           <li>[修复] breadcrumb-item 组件无法正确传递 attrs, 导致 @click 等自定义事件失效。</li>
           <li>[修复] layout 组件仅引入了 footer 作为内容元素时, layui-layout-vertical 样式不生效, 导致布局错误。</li>