🌀(component): 优化 tag-input 组件 disabled 状态优化

package/component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "1.7.10",
+  "version": "1.7.11",
   "author": "就眠儀式",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",

package/component/src/component/tab/index.vue

@@ -266,17 +266,22 @@ const update = () => {
 };
 
 const horizontalScroll = (e: WheelEvent) => {
-  e.preventDefault()
+  e.preventDefault();
   const navSize = getNavSize();
   const containerSize = navRef.value![`offset${sizeName.value}`];
   const currentOffset = navOffset.value;
   const scrollNextSize = scrollNextRef.value?.[`offset${sizeName.value}`] ?? 0;
-  const direction = Math.abs(e.deltaX) >= Math.abs(e.deltaY) ? e.deltaX : e.deltaY
-  const distance = 50 * (direction > 0 ? 1 : -1)
-  const newOffset = Math.max(currentOffset + distance, 0)
-  if ((navSize - currentOffset <= containerSize - scrollNextSize && direction > 0)) return;
-  navOffset.value = newOffset
-}
+  const direction =
+    Math.abs(e.deltaX) >= Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
+  const distance = 50 * (direction > 0 ? 1 : -1);
+  const newOffset = Math.max(currentOffset + distance, 0);
+  if (
+    navSize - currentOffset <= containerSize - scrollNextSize &&
+    direction > 0
+  )
+    return;
+  navOffset.value = newOffset;
+};
 
 const renderTabIcon = (attrs: Record<string, unknown>) => {
   const tab = attrs.tabData as TabData;

package/component/src/component/tagInput/index.less

@@ -108,6 +108,9 @@
       .layui-tag-input-inner-input {
         height: @@height - (@@inner-padding + @tag-input-boeder)* 2;
         vertical-align: middle;
+        &:disabled {
+          background: transparent;
+        }
       }
 
       .layui-tag-input-inner {

package/component/src/component/tagInput/index.vue

@@ -300,22 +300,22 @@ defineExpose({
           </template>
         </LayToopTip>
       </template>
-        <input
-          ref="inputRefEl"
-          class="layui-tag-input-inner-input"
-          :style="inputStyle"
-          :disabled="(disabled || disabledInput)"
-          :placeholder="placeholder"
-          :readonly="readonly"
-          @keydown.enter="handleEnter"
-          @keyup="handleBackspaceKeyUp"
-          @input="handleInput"
-          @focus="handleFocus"
-          @blur="handleBlur"
-          @compositionstart="handleComposition"
-          @compositionupdate="handleComposition"
-          @compositionend="handleComposition"
-        />
+      <input
+        ref="inputRefEl"
+        class="layui-tag-input-inner-input"
+        :style="inputStyle"
+        :disabled="disabled || disabledInput"
+        :placeholder="placeholder"
+        :readonly="readonly"
+        @keydown.enter="handleEnter"
+        @keyup="handleBackspaceKeyUp"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @compositionstart="handleComposition"
+        @compositionupdate="handleComposition"
+        @compositionend="handleComposition"
+      />
     </span>
     <span
       v-if="allowClear && tagData?.length && !disabled"

package/component/src/component/textarea/index.vue

@@ -7,7 +7,7 @@ export default {
 <script setup lang="ts">
 import { LayIcon } from "@layui/icons-vue";
 import { computed, ref, watch } from "vue";
-import {isObject } from "@vueuse/shared"
+import { isObject } from "@vueuse/shared";
 import "./index.less";
 
 export interface TextareaProps {
@@ -18,7 +18,7 @@ export interface TextareaProps {
   showCount?: boolean;
   allowClear?: boolean;
   maxlength?: number;
-  autosize?: boolean | { minHeight: number, maxHeight: number };
+  autosize?: boolean | { minHeight: number; maxHeight: number };
 }
 
 const props = defineProps<TextareaProps>();
@@ -82,18 +82,24 @@ const wordCount = computed(() => {
   return count;
 });
 
-watch([() => props.modelValue, textareaRef], () => {
-  if (!textareaRef.value || !props.autosize) return;
-  const height: number = textareaRef.value?.scrollHeight + 2; // 边框 
-  if (isObject(props.autosize)) {
-    const { minHeight, maxHeight } = props.autosize;
-    if (height < minHeight || height > maxHeight) return;
+watch(
+  [() => props.modelValue, textareaRef],
+  () => {
+    if (!textareaRef.value || !props.autosize) return;
+    const height: number = textareaRef.value?.scrollHeight + 2; // 边框
+    if (isObject(props.autosize)) {
+      const { minHeight, maxHeight } = props.autosize;
+      if (height < minHeight || height > maxHeight) return;
+    }
+    textareaRef.value!.style.height = "1px";
+    textareaRef.value!.style.height = `${
+      textareaRef.value?.scrollHeight + 2
+    }px`;
+  },
+  {
+    immediate: true,
   }
-  textareaRef.value!.style.height = '1px'
-  textareaRef.value!.style.height = `${textareaRef.value?.scrollHeight + 2}px`
-}, {
-  immediate: true,
-})
+);
 </script>
 
 <template>

package/component/src/utils/vueUtil.ts

@@ -40,18 +40,18 @@ export const isArrayChildren = (
 export function convertSlotName(vm: ComponentInternalInstance, name: string) {
   const camelCaseName = camelCase(name);
   const kebabCaseName = kebabCase(name);
-  return vm.slots[camelCaseName] 
-    ? camelCaseName 
-    : vm.slots[kebabCaseName] 
+  return vm.slots[camelCaseName]
+    ? camelCaseName
+    : vm.slots[kebabCaseName]
     ? kebabCaseName
-    : name
+    : name;
 }
 
 export function camelCase(str: string) {
-  return str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ''))
+  return str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ""));
 }
 
 export function kebabCase(key: string) {
-  const result = key.replace(/([A-Z])/g, ' $1').trim();
-  return result.split(' ').join('-').toLowerCase()
+  const result = key.replace(/([A-Z])/g, " $1").trim();
+  return result.split(" ").join("-").toLowerCase();
 }