feat: input组件新增input slot插槽 (#1418)

* fix: 抽离 input  ConfirmTextType

* feat: input、switch国际化

* feat: category、address国际化

* feat: taro升级maxlength问题

* fix: 国际化增加默认字段

* fix: blank

* fix: input组件国际化文案修改

* feat: input组件新增input slot插槽

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

@@ -531,6 +531,8 @@ The user can enter content in the text box. Configure the icons on both sides of
 | Name  | Description     | 
 |-------|----------|
 | button | Insert button |
+| input `v3.1.22` | Custom input |
+
 
 
 

src/packages/__VUE/input/doc.md

@@ -531,6 +531,7 @@ app.use(Icon);
 | 名称  | 说明     | 
 |-------|----------|
 | button | 自定义输入框尾部按钮 |
+| input `v3.1.22` | 自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效 |
 
 
 

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

@@ -1,97 +1,120 @@
 <template>
   <view :class="classes">
-    <view v-if="leftIcon && leftIcon.length > 0" class="nut-input-left-icon" @click="onClickLeftIcon">
-      <nut-icon :name="leftIcon" :size="leftIconSize"></nut-icon>
-    </view>
-    <view
-      v-if="label"
-      class="nut-input-label"
-      :class="labelClass"
-      :style="{
-        width: `${labelWidth}px`,
-        textAlign: labelAlign
-      }"
-    >
-      <view class="label-string">
-        {{ label }}
-        {{ colon ? ':' : '' }}
+    <template v-if="$slots.input">
+      <view
+        v-if="label"
+        class="nut-input-label"
+        :class="labelClass"
+        :style="{
+          width: `${labelWidth}px`,
+          textAlign: labelAlign
+        }"
+      >
+        <view class="label-string">
+          {{ label }}
+          {{ colon ? ':' : '' }}
+        </view>
       </view>
-    </view>
-    <view class="nut-input-value">
-      <view class="nut-input-inner">
-        <div class="nut-input-box">
-          <textarea
-            v-if="type == 'textarea'"
-            class="input-text"
-            ref="inputRef"
-            :style="stylesTextarea"
-            :maxlength="maxLength"
-            :placeholder="placeholder || translate('placeholder')"
-            placeholder-class="nut-placeholder"
-            :disabled="disabled"
-            :readonly="readonly"
-            :value="modelValue"
-            :formatTrigger="formatTrigger"
-            :autofocus="autofocus"
-            :adjust-position="adjustPosition"
-            @input="onInput"
-            @focus="onFocus"
-            @blur="onBlur"
-            @click="onClickInput"
-          />
-          <input
-            v-else
-            class="input-text"
-            ref="inputRef"
-            :style="styles"
-            :type="inputType(type)"
-            :maxlength="maxLength"
-            :placeholder="placeholder || translate('placeholder')"
-            placeholder-class="nut-placeholder"
-            :disabled="disabled"
-            :readonly="readonly"
-            :value="modelValue"
-            :formatTrigger="formatTrigger"
-            :autofocus="autofocus"
-            :confirm-type="confirmType"
-            :adjust-position="adjustPosition"
-            @input="onInput"
-            @focus="onFocus"
-            @blur="onBlur"
-            @click="onClickInput"
-          />
-          <view v-if="readonly" class="nut-input-disabled-mask"></view>
-        </div>
-        <div class="nut-input-clear-box">
-          <nut-icon
-            class="nut-input-clear"
-            v-if="clearable && !readonly"
-            v-show="active && modelValue.length > 0"
-            :name="clearIcon"
-            :size="clearSize"
-            @click="clear"
-          >
-          </nut-icon>
-        </div>
-        <view v-if="rightIcon && rightIcon.length > 0" class="nut-input-right-icon" @click="onClickRightIcon">
-          <nut-icon :name="rightIcon" :size="rightIconSize"></nut-icon>
+      <view class="nut-input-value">
+        <view class="nut-input-inner" @click="onClickInput">
+          <slot name="input"></slot>
         </view>
-        <slot v-if="$slots.button" name="button" class="nut-input-button"></slot>
       </view>
-      <view v-if="showWordLimit && maxLength" class="nut-input-word-limit">
-        <span class="nut-input-word-num">{{ modelValue ? modelValue.length : 0 }}</span
-        >/{{ maxLength }}
+    </template>
+    <template v-else>
+      <view v-if="leftIcon && leftIcon.length > 0" class="nut-input-left-icon" @click="onClickLeftIcon">
+        <nut-icon :name="leftIcon" :size="leftIconSize"></nut-icon>
       </view>
       <view
-        v-if="errorMessage"
-        class="nut-input-error-message"
+        v-if="label"
+        class="nut-input-label"
+        :class="labelClass"
         :style="{
-          textAlign: errorMessageAlign
+          width: `${labelWidth}px`,
+          textAlign: labelAlign
         }"
       >
-        {{ errorMessage }}
+        <view class="label-string">
+          {{ label }}
+          {{ colon ? ':' : '' }}
+        </view>
       </view>
-    </view>
+      <view class="nut-input-value">
+        <view class="nut-input-inner">
+          <div class="nut-input-box">
+            <textarea
+              v-if="type == 'textarea'"
+              class="input-text"
+              ref="inputRef"
+              :style="stylesTextarea"
+              :maxlength="maxLength"
+              :placeholder="placeholder || translate('placeholder')"
+              placeholder-class="nut-placeholder"
+              :disabled="disabled"
+              :readonly="readonly"
+              :value="modelValue"
+              :formatTrigger="formatTrigger"
+              :autofocus="autofocus"
+              :adjust-position="adjustPosition"
+              @input="onInput"
+              @focus="onFocus"
+              @blur="onBlur"
+              @click="onClickInput"
+            />
+            <input
+              v-else
+              class="input-text"
+              ref="inputRef"
+              :style="styles"
+              :type="inputType(type)"
+              :maxlength="maxLength"
+              :placeholder="placeholder || translate('placeholder')"
+              placeholder-class="nut-placeholder"
+              :disabled="disabled"
+              :readonly="readonly"
+              :value="modelValue"
+              :formatTrigger="formatTrigger"
+              :autofocus="autofocus"
+              :confirm-type="confirmType"
+              :adjust-position="adjustPosition"
+              @input="onInput"
+              @focus="onFocus"
+              @blur="onBlur"
+              @click="onClickInput"
+            />
+            <view v-if="readonly" class="nut-input-disabled-mask"></view>
+          </div>
+          <div class="nut-input-clear-box">
+            <nut-icon
+              class="nut-input-clear"
+              v-if="clearable && !readonly"
+              v-show="active && modelValue.length > 0"
+              :name="clearIcon"
+              :size="clearSize"
+              @click="clear"
+            >
+            </nut-icon>
+          </div>
+          <view v-if="rightIcon && rightIcon.length > 0" class="nut-input-right-icon" @click="onClickRightIcon">
+            <nut-icon :name="rightIcon" :size="rightIconSize"></nut-icon>
+          </view>
+          <slot v-if="$slots.button" name="button" class="nut-input-button"></slot>
+        </view>
+        <view v-if="showWordLimit && maxLength" class="nut-input-word-limit">
+          <span class="nut-input-word-num">{{ modelValue ? modelValue.length : 0 }}</span
+          >/{{ maxLength }}
+        </view>
+        <view
+          v-if="errorMessage"
+          class="nut-input-error-message"
+          :style="{
+            textAlign: errorMessageAlign
+          }"
+        >
+          {{ errorMessage }}
+        </view>
+      </view>
+    </template>
   </view>
 </template>
 <script lang="ts">
@@ -165,7 +188,7 @@ export default create({
     },
     maxLength: {
       type: [String, Number],
-      default: ''
+      default: '9999'
     },
     leftIconSize: {
       type: [String, Number],
@@ -301,12 +324,12 @@ export default create({
       }
     };
 
-    const formValue = computed(() => {
-      if (customValue.value && slots.input) {
-        return customValue.value();
-      }
-      return props.modelValue;
-    });
+    // const formValue = computed(() => {
+    //   if (customValue.value && slots.input) {
+    //     return customValue.value();
+    //   }
+    //   return props.modelValue;
+    // });
 
     const onInput = (event: Event) => {
       const input = event.target as HTMLInputElement;

src/packages/__VUE/input/index.vue

@@ -1,85 +1,108 @@
 <template>
   <view :class="classes">
-    <view v-if="leftIcon && leftIcon.length > 0" class="nut-input-left-icon" @click="onClickLeftIcon">
-      <nut-icon :name="leftIcon" :size="leftIconSize"></nut-icon>
-    </view>
-    <view
-      v-if="label"
-      class="nut-input-label"
-      :class="labelClass"
-      :style="{
-        width: `${labelWidth}px`,
-        textAlign: labelAlign
-      }"
-    >
-      <view class="label-string">
-        {{ label }}
-        {{ colon ? ':' : '' }}
+    <template v-if="$slots.input">
+      <view
+        v-if="label"
+        class="nut-input-label"
+        :class="labelClass"
+        :style="{
+          width: `${labelWidth}px`,
+          textAlign: labelAlign
+        }"
+      >
+        <view class="label-string">
+          {{ label }}
+          {{ colon ? ':' : '' }}
+        </view>
       </view>
-    </view>
-    <view class="nut-input-value">
-      <view class="nut-input-inner" @click="onClickInput">
-        <textarea
-          v-if="type == 'textarea'"
-          class="input-text"
-          ref="inputRef"
-          :style="stylesTextarea"
-          :maxlength="maxLength"
-          :placeholder="placeholder || translate('placeholder')"
-          :disabled="disabled"
-          :readonly="readonly"
-          :value="modelValue"
-          :formatTrigger="formatTrigger"
-          :autofocus="autofocus"
-          @input="onInput"
-          @focus="onFocus"
-          @blur="onBlur"
-        />
-        <input
-          v-else
-          class="input-text"
-          ref="inputRef"
-          :style="styles"
-          :type="inputType(type)"
-          :maxlength="maxLength"
-          :placeholder="placeholder || translate('placeholder')"
-          :disabled="disabled"
-          :readonly="readonly"
-          :value="modelValue"
-          :formatTrigger="formatTrigger"
-          :autofocus="autofocus"
-          @input="onInput"
-          @focus="onFocus"
-          @blur="onBlur"
-        />
-        <nut-icon
-          class="nut-input-clear"
-          v-if="clearable && !readonly"
-          v-show="active && modelValue.length > 0"
-          :name="clearIcon"
-          :size="clearSize"
-          @click="clear"
-        >
-        </nut-icon>
-        <view v-if="rightIcon && rightIcon.length > 0" class="nut-input-right-icon" @click="onClickRightIcon">
-          <nut-icon :name="rightIcon" :size="rightIconSize"></nut-icon>
+      <view class="nut-input-value">
+        <view class="nut-input-inner" @click="onClickInput">
+          <slot name="input"></slot>
         </view>
-        <slot v-if="$slots.button" name="button" class="nut-input-button"></slot>
       </view>
-      <view v-if="showWordLimit && maxLength" class="nut-input-word-limit">
-        <span class="nut-input-word-num">{{ modelValue ? modelValue.length : 0 }}</span
-        >/{{ maxLength }}
+    </template>
+    <template v-else>
+      <view v-if="leftIcon && leftIcon.length > 0" class="nut-input-left-icon" @click="onClickLeftIcon">
+        <nut-icon :name="leftIcon" :size="leftIconSize"></nut-icon>
       </view>
       <view
-        v-if="errorMessage"
-        class="nut-input-error-message"
+        v-if="label"
+        class="nut-input-label"
+        :class="labelClass"
         :style="{
-          textAlign: errorMessageAlign
+          width: `${labelWidth}px`,
+          textAlign: labelAlign
         }"
       >
-        {{ errorMessage }}
+        <view class="label-string">
+          {{ label }}
+          {{ colon ? ':' : '' }}
+        </view>
       </view>
-    </view>
+      <view class="nut-input-value">
+        <view class="nut-input-inner" @click="onClickInput">
+          <textarea
+            v-if="type == 'textarea'"
+            class="input-text"
+            ref="inputRef"
+            :style="stylesTextarea"
+            :maxlength="maxLength"
+            :placeholder="placeholder || translate('placeholder')"
+            :disabled="disabled"
+            :readonly="readonly"
+            :value="modelValue"
+            :formatTrigger="formatTrigger"
+            :autofocus="autofocus"
+            @input="onInput"
+            @focus="onFocus"
+            @blur="onBlur"
+          />
+          <input
+            v-else
+            class="input-text"
+            ref="inputRef"
+            :style="styles"
+            :type="inputType(type)"
+            :maxlength="maxLength"
+            :placeholder="placeholder || translate('placeholder')"
+            :disabled="disabled"
+            :readonly="readonly"
+            :value="modelValue"
+            :formatTrigger="formatTrigger"
+            :autofocus="autofocus"
+            @input="onInput"
+            @focus="onFocus"
+            @blur="onBlur"
+          />
+          <nut-icon
+            class="nut-input-clear"
+            v-if="clearable && !readonly"
+            v-show="active && modelValue.length > 0"
+            :name="clearIcon"
+            :size="clearSize"
+            @click="clear"
+          >
+          </nut-icon>
+          <view v-if="rightIcon && rightIcon.length > 0" class="nut-input-right-icon" @click="onClickRightIcon">
+            <nut-icon :name="rightIcon" :size="rightIconSize"></nut-icon>
+          </view>
+          <slot v-if="$slots.button" name="button" class="nut-input-button"></slot>
+        </view>
+        <view v-if="showWordLimit && maxLength" class="nut-input-word-limit">
+          <span class="nut-input-word-num">{{ modelValue ? modelValue.length : 0 }}</span
+          >/{{ maxLength }}
+        </view>
+        <view
+          v-if="errorMessage"
+          class="nut-input-error-message"
+          :style="{
+            textAlign: errorMessageAlign
+          }"
+        >
+          {{ errorMessage }}
+        </view>
+      </view>
+    </template>
   </view>
 </template>
 <script lang="ts">
@@ -153,7 +176,7 @@ export default create({
     },
     maxLength: {
       type: [String, Number],
-      default: ''
+      default: '9999'
     },
     leftIcon: {
       type: String,
@@ -281,12 +304,12 @@ export default create({
       }
     };
 
-    const formValue = computed(() => {
-      if (customValue.value && slots.input) {
-        return customValue.value();
-      }
-      return props.modelValue;
-    });
+    // const formValue = computed(() => {
+    //   if (customValue.value && slots.input) {
+    //     return customValue.value();
+    //   }
+    //   return props.modelValue;
+    // });
 
     const onInput = (event: Event) => {
       const input = event.target as HTMLInputElement;