menuitem增加自定义titleClass属性和优化input组件disabled和readonly状态下的事件处理 (#1480)

* feat(menuitem): 增加activeTitleClass和inActiveTitleClass自定义标题属性

* fix(input): 优化输入框在disabled和readonly状态下的事件处理,关联Issues#1441

* fix(input): 优化输入框在disabled和readonly状态下的事件处理,关联Issues#1441

* fix(input): 优化输入框在disabled和readonly状态下的事件处理,关联Issues#1441

src/packages/__VUE/input/index.taro.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes">
+  <view :class="classes" @click="onClick">
     <template v-if="$slots.input">
       <view
         v-if="label"
@@ -369,6 +369,9 @@ export default create({
     };
 
     const onFocus = (event: Event) => {
+      if (props.disabled || props.readonly) {
+        return;
+      }
       const input = event.target as HTMLInputElement;
       let value = input.value;
       active.value = true;
@@ -376,6 +379,9 @@ export default create({
     };
 
     const onBlur = (event: Event) => {
+      if (props.disabled || props.readonly) {
+        return;
+      }
       setTimeout(() => {
         active.value = false;
       }, 200);
@@ -403,12 +409,32 @@ export default create({
     };
 
     const onClickInput = (event: MouseEvent) => {
+      if (props.disabled) {
+        return;
+      }
       emit('click-input', event);
     };
 
-    const onClickLeftIcon = (event: MouseEvent) => emit('click-left-icon', event);
+    const onClickLeftIcon = (event: MouseEvent) => {
+      if (props.disabled) {
+        return;
+      }
+      emit('click-left-icon', event);
+    };
+
+    const onClickRightIcon = (event: MouseEvent) => {
+      if (props.disabled) {
+        return;
+      }
+      emit('click-right-icon', event);
+    };
 
-    const onClickRightIcon = (event: MouseEvent) => emit('click-right-icon', event);
+    const onClick = (e: MouseEvent) => {
+      if (props.disabled) {
+        e.stopPropagation();
+        return;
+      }
+    };
 
     watch(
       () => props.modelValue,
@@ -436,6 +462,7 @@ export default create({
       onClickInput,
       onClickLeftIcon,
       onClickRightIcon,
+      onClick,
       translate
     };
   }

src/packages/__VUE/input/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes">
+  <view :class="classes" @click="onClick">
     <template v-if="$slots.input">
       <view
         v-if="label"
@@ -347,6 +347,9 @@ export default create({
     };
 
     const onFocus = (event: Event) => {
+      if (props.disabled || props.readonly) {
+        return;
+      }
       const input = event.target as HTMLInputElement;
       let value = input.value;
       active.value = true;
@@ -357,6 +360,9 @@ export default create({
     };
 
     const onBlur = (event: Event) => {
+      if (props.disabled || props.readonly) {
+        return;
+      }
       setTimeout(() => {
         active.value = false;
       }, 200);
@@ -384,12 +390,32 @@ export default create({
     };
 
     const onClickInput = (event: MouseEvent) => {
+      if (props.disabled) {
+        return;
+      }
       emit('click-input', event);
     };
 
-    const onClickLeftIcon = (event: MouseEvent) => emit('click-left-icon', event);
+    const onClickLeftIcon = (event: MouseEvent) => {
+      if (props.disabled) {
+        return;
+      }
+      emit('click-left-icon', event);
+    };
+
+    const onClickRightIcon = (event: MouseEvent) => {
+      if (props.disabled) {
+        return;
+      }
+      emit('click-right-icon', event);
+    };
 
-    const onClickRightIcon = (event: MouseEvent) => emit('click-right-icon', event);
+    const onClick = (e: PointerEvent) => {
+      if (props.disabled) {
+        e.stopImmediatePropagation();
+        return;
+      }
+    };
 
     watch(
       () => props.modelValue,
@@ -417,6 +443,7 @@ export default create({
       onClickInput,
       onClickLeftIcon,
       onClickRightIcon,
+      onClick,
       translate
     };
   }

src/packages/__VUE/menu/doc.en-US.md

@@ -404,6 +404,10 @@ export default {
 | title-icon         | Custome title icon     | String | -                |
 | option-icon `v3.1.22`         | Custome option icon     | String | 'Check'                |
 | direction `v3.1.22`         | Expand direction, can be set to up     | String | 'down'                |
+activeTitleClass | Active custome title class | String | - |
+inactiveTitleClass | Inactive custome title class | String | - |
+
+
 
 ### MenuItem Events
 

src/packages/__VUE/menu/doc.md

@@ -406,6 +406,8 @@ export default {
 | title-icon         | 自定义标题图标     | String | -                |
 | option-icon `v3.1.22`         | 自定义选项图标     | String | 'Check'                |
 | direction  `v3.1.22`        | 菜单展开方向，可选值为up     | String | 'down'                |
+activeTitleClass | 选项选中时自定义标题样式类 | String | - |
+inactiveTitleClass | 选项非选中时自定义标题样式类 | String | - |
 
 ### MenuItem Events
 

src/packages/__VUE/menuitem/index.taro.vue

@@ -31,12 +31,12 @@
           v-for="(option, index) in options"
           :key="index"
           class="nut-menu-item__option"
-          :class="{ active: option.value === modelValue }"
+          :class="[{ active: option.value === modelValue }]"
           :style="{ 'flex-basis': 100 / cols + '%' }"
           @click="onClick(option)"
         >
-          <nut-icon v-if="option.value === modelValue" :name="optionIcon" :color="parent.props.activeColor"></nut-icon>
-          <view :style="{ color: option.value === modelValue ? parent.props.activeColor : '' }">{{ option.text }}</view>
+          <nut-icon :class="{ activeTitleClass: option.value === modelValue, inactiveTitleClass: option.value !== modelValue }" v-if="option.value === modelValue" :name="optionIcon" :color="parent.props.activeColor"></nut-icon>
+          <view :class="{ activeTitleClass: option.value === modelValue, inactiveTitleClass: option.value !== modelValue }" :style="{ color: option.value === modelValue ? parent.props.activeColor : '' }">{{ option.text }}</view>
         </view>
         <slot></slot>
       </view>
@@ -67,6 +67,8 @@ export default create({
       default: 1
     },
     titleIcon: String,
+    activeTitleClass: String,
+    inactiveTitleClass: String,
     optionIcon: {
       type: String,
       default: 'Check'

src/packages/__VUE/menuitem/index.vue

@@ -32,12 +32,21 @@
           v-for="(option, index) in options"
           :key="index"
           class="nut-menu-item__option"
-          :class="{ active: option.value === modelValue }"
+          :class="[{ active: option.value === modelValue }]"
           :style="{ 'flex-basis': 100 / cols + '%' }"
           @click="onClick(option)"
         >
-          <nut-icon v-if="option.value === modelValue" :name="optionIcon" :color="parent.props.activeColor"></nut-icon>
-          <view :style="{ color: option.value === modelValue ? parent.props.activeColor : '' }">{{ option.text }}</view>
+          <nut-icon
+            :class="{ activeTitleClass: option.value === modelValue, inactiveTitleClass: option.value !== modelValue }"
+            v-if="option.value === modelValue"
+            :name="optionIcon"
+            :color="parent.props.activeColor"
+          ></nut-icon>
+          <view
+            :class="{ activeTitleClass: option.value === modelValue, inactiveTitleClass: option.value !== modelValue }"
+            :style="{ color: option.value === modelValue ? parent.props.activeColor : '' }"
+            >{{ option.text }}</view
+          >
         </view>
         <slot></slot>
       </view>
@@ -68,6 +77,8 @@ export default create({
       default: 1
     },
     titleIcon: String,
+    activeTitleClass: String,
+    inactiveTitleClass: String,
     optionIcon: {
       type: String,
       default: 'Check'