🌀(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

@@ -304,7 +304,7 @@ defineExpose({
         ref="inputRefEl"
         class="layui-tag-input-inner-input"
         :style="inputStyle"
-          :disabled="(disabled || disabledInput)"
+        :disabled="disabled || disabledInput"
         :placeholder="placeholder"
         :readonly="readonly"
         @keydown.enter="handleEnter"

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], () => {
+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`
-}, {
+    textareaRef.value!.style.height = "1px";
+    textareaRef.value!.style.height = `${
+      textareaRef.value?.scrollHeight + 2
+    }px`;
+  },
+  {
     immediate: true,
-})
+  }
+);
 </script>
 
 <template>

package/component/src/utils/vueUtil.ts

@@ -44,14 +44,14 @@ export function convertSlotName(vm: ComponentInternalInstance, name: string) {
     ? 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();
 }