!fix(input): 修改/优化input属性问题 (#2578)

* fix(input): 修改/优化input属性问题 * chore(input): move to setup sugar * test(input): update input snapshot * fix(input): taro h5与小程序端对齐 --------- Co-authored-by: Eiinu <[email protected]>
jdf2e · Oct 18, 2023 · 0a0a8a8 · 0a0a8a8
1 parent 3dfc7a8
commit 0a0a8a8
Show file tree

Hide file tree

Showing 7 changed files with 164 additions and 215 deletions.
diff --git a/packages/nutui-taro-demo/src/dentry/pages/input/index.vue b/packages/nutui-taro-demo/src/dentry/pages/input/index.vue
@@ -7,8 +7,8 @@
     <h2>自定义类型</h2>
     <nut-input v-model="state.text" placeholder="文本" />
     <nut-input v-model="state.password" type="password" placeholder="密码" />
-    <nut-input v-model="state.number" type="number" placeholder="数字" />
-    <nut-input v-model="state.digit" type="digit" placeholder="整数" />
+    <nut-input v-model="state.digit" type="digit" placeholder="数字（支持小数）" />
+    <nut-input v-model="state.number" type="number" placeholder="整数" />
 
     <h2>禁用和只读</h2>
     <nut-input v-model="state.readonly" readonly placeholder="只读" />
@@ -80,76 +80,58 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { reactive } from 'vue';
 import { Close, Ask } from '@nutui/icons-vue-taro';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-export default {
-  components: {
-    Close,
-    Ask,
-    Header
-  },
-  setup() {
-    const env = Taro.getEnv();
 
-    const state = reactive({
-      val1: '',
-      val2: '',
-      text: '',
-      password: '',
-      number: '',
-      digit: '',
-      tel: '',
-      readonly: '',
-      disabled: '',
-      showIcon: '',
-      required: '',
-      error1: '',
-      error2: '',
-      buttonVal: '',
-      format1: '',
-      format2: '',
-      textarea: '',
-      align1: '',
-      align2: '',
-      event: '',
-      slotsValue: '',
-      clear: '',
-      clear2: '',
-      adjustPosition: false,
-      show: false,
-      msg: ''
-    });
-    setTimeout(function () {
-      // state.val1 = '异步数据';
-    }, 2000);
-    const clear = (value: string | number, event: Event) => {
-      console.log('clear:', value, event);
-      showToast('clear');
-    };
-    const showToast = (msg: string) => {
-      state.show = true;
-      state.msg = msg;
-    };
-    const clickInput = (value: string | number) => {
-      console.log('clickInput:', value);
-      showToast('clickInput');
-    };
-    const formatter = (value: string) => value.replace(/\d/g, '');
-    const clearValue = () => {
-      state.clear2 = '';
-    };
-    return {
-      state,
-      clear,
-      clickInput,
-      formatter,
-      clearValue,
-      env
-    };
-  }
+const env = Taro.getEnv();
+
+const state = reactive({
+  val1: '',
+  val2: '',
+  text: '',
+  password: '',
+  number: '',
+  digit: '',
+  tel: '',
+  readonly: '',
+  disabled: '禁用',
+  showIcon: '',
+  required: '',
+  error1: '',
+  error2: '',
+  buttonVal: '',
+  format1: '',
+  format2: '',
+  textarea: '',
+  align1: '',
+  align2: '',
+  event: '',
+  slotsValue: '',
+  clear: '',
+  clear2: '',
+  adjustPosition: false,
+  show: false,
+  msg: ''
+});
+
+const clear = (value: string | number, event: Event) => {
+  console.log('clear:', value, event);
+  showToast('clear');
+};
+const showToast = (msg: string) => {
+  state.show = true;
+  state.msg = msg;
+};
+const clickInput = (value: string | number) => {
+  console.log('clickInput:', value);
+  showToast('clickInput');
+};
+const formatter = (value: string) => value.replace(/\d/g, '');
+const clearValue = () => {
+  state.clear2 = '';
 };
 </script>
 

diff --git a/src/packages/__VUE/input/__tests__/__snapshots__/input.spec.ts.snap b/src/packages/__VUE/input/__tests__/__snapshots__/input.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`should render word limit correctly 1`] = `
-"<view class=\\"nut-input-box\\"><input style=\\"text-align: left;\\" type=\\"text\\" class=\\"input-text\\" maxlength=\\"\\" placeholder=\\"\\" format-trigger=\\"onChange\\" enterkeyhint=\\"done\\">
+"<view class=\\"nut-input-box\\"><input type=\\"text\\" class=\\"input-text\\" style=\\"text-align: left;\\" maxlength=\\"\\" placeholder=\\"\\" format-trigger=\\"onChange\\" enterkeyhint=\\"done\\">
   <!--v-if-->
 </view>"
 `;
@@ -11,7 +11,7 @@ exports[`should render word limit correctly when modelValue is null 1`] = `
   <view class=\\"nut-input-value\\">
     <view class=\\"nut-input-inner\\">
       <!--v-if-->
-      <view class=\\"nut-input-box\\"><input style=\\"text-align: left;\\" type=\\"text\\" class=\\"input-text\\" maxlength=\\"\\" placeholder=\\"\\" format-trigger=\\"onChange\\" enterkeyhint=\\"done\\">
+      <view class=\\"nut-input-box\\"><input type=\\"text\\" class=\\"input-text\\" style=\\"text-align: left;\\" maxlength=\\"\\" placeholder=\\"\\" format-trigger=\\"onChange\\" enterkeyhint=\\"done\\">
         <!--v-if-->
       </view>
       <!--v-if-->

diff --git a/src/packages/__VUE/input/demo.vue b/src/packages/__VUE/input/demo.vue
@@ -77,13 +77,14 @@
   </div>
 </template>
 
-<script lang="ts">
-import { reactive, defineComponent } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import { Close, Ask } from '@nutui/icons-vue';
 import { showToast } from '@/packages/nutui.vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('input');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
+
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
@@ -102,7 +103,7 @@ const initTranslate = () =>
       text: '文本',
       textPlaceholder: '请输入文本',
       passwordPlaceholder: '请输入密码',
-      numberPlaceholder: '请输入数字',
+      numberPlaceholder: '请输入数字（支持小数）',
       digitPlaceholder: '请输入整数',
       telPlaceholder: '请输入手机号',
       readonly: '输入框只读',
@@ -142,7 +143,7 @@ const initTranslate = () =>
       text: 'Text',
       textPlaceholder: 'Text',
       passwordPlaceholder: 'Password',
-      numberPlaceholder: 'Number',
+      numberPlaceholder: 'Number (Support Decimals)',
       digitPlaceholder: 'Digit',
       telPlaceholder: 'Tel',
       readonly: 'Readonly',
@@ -167,65 +168,48 @@ const initTranslate = () =>
       placeholder5: 'Input Align'
     }
   });
-export default defineComponent({
-  components: {
-    Close,
-    Ask
-  },
-  setup() {
-    initTranslate();
-    const state = reactive({
-      val1: '',
-      val2: '',
-      text: '',
-      password: '',
-      number: '',
-      digit: '',
-      tel: '',
-      readonly: '',
-      disabled: '',
-      showIcon: '',
-      required: '',
-      error1: '',
-      error2: '',
-      buttonVal: '',
-      format1: '',
-      format2: '',
-      textarea: '',
-      align1: '',
-      align2: '',
-      noBorder1: '',
-      noBorder2: '',
-      clear: '',
-      clear2: '',
-      event: '',
-      slotsValue: ''
-    });
-    setTimeout(function () {
-      // state.val1 = '异步数据';
-    }, 2000);
-    const clear = (event: Event) => {
-      showToast.text('clear');
-      console.log('clear:', event);
-    };
-    const clickInput = (event: Event) => {
-      showToast.text('clickInput');
-      console.log('clickInput:', event);
-    };
-    const clearValue = () => {
-      state.clear2 = '';
-    };
-    const formatter = (value: string) => value.replace(/\d/g, '');
-    return {
-      state,
-      clear,
-      clickInput,
-      formatter,
-      translate,
-      clearValue
-    };
-  }
+
+initTranslate();
+const state = reactive({
+  val1: '',
+  val2: '',
+  text: '',
+  password: '',
+  number: '',
+  digit: '',
+  tel: '',
+  readonly: '',
+  disabled: '',
+  showIcon: '',
+  required: '',
+  error1: '',
+  error2: '',
+  buttonVal: '',
+  format1: '',
+  format2: '',
+  textarea: '',
+  align1: '',
+  align2: '',
+  noBorder1: '',
+  noBorder2: '',
+  clear: '',
+  clear2: '',
+  event: '',
+  slotsValue: ''
 });
+
+const clear = (event: Event) => {
+  showToast.text('clear');
+  console.log('clear:', event);
+};
+const clickInput = (event: Event) => {
+  showToast.text('clickInput');
+  console.log('clickInput:', event);
+};
+const clearValue = () => {
+  state.clear2 = '';
+};
+const formatter = (value: string) => value.replace(/\d/g, '');
 </script>
 
 <style lang="scss" scoped></style>