Browse Source

feat: input、searchBar组件添加confirm-type属性 (#1258)

Co-authored-by: love_forever <1039168735@qq.com>
mikasayw 3 years ago
parent
commit
344b8309fd

+ 1 - 0
src/packages/__VUE/input/doc.md

@@ -418,6 +418,7 @@ app.use(Icon);
 | error-message-align | 底部错误提示文案对齐方式,可选值 `left`、`center`、`right`          | String | - |
 | error-message-align | 底部错误提示文案对齐方式,可选值 `left`、`center`、`right`          | String | - |
 | formatter      | 输入内容格式化函数    | `(val: string) => string` | - |
 | formatter      | 输入内容格式化函数    | `(val: string) => string` | - |
 | format-trigger | 格式化函数触发的时机,可选值为 `onChange`、`onBlur` | String | - |
 | format-trigger | 格式化函数触发的时机,可选值为 `onChange`、`onBlur` | String | - |
+| confirm-type   | 键盘右下角按钮的文字(`仅支持小程序`),仅在`type='text'`时生效,可选值 `send`:发送、`search`:搜索、`next`:下一个、`go`:前往、`done`:完成 | String |   `done`   |
 | adjust-position| 键盘弹起时,是否自动上推页面,仅支持原生     | Boolean | `true` |
 | adjust-position| 键盘弹起时,是否自动上推页面,仅支持原生     | Boolean | `true` |
 
 
 ### Event
 ### Event

+ 42 - 0
src/packages/__VUE/input/index.taro.vue

@@ -51,6 +51,7 @@
           :value="modelValue"
           :value="modelValue"
           :formatTrigger="formatTrigger"
           :formatTrigger="formatTrigger"
           :autofocus="autofocus"
           :autofocus="autofocus"
+          :confirm-type="confirmType"
           :adjust-position="adjustPosition"
           :adjust-position="adjustPosition"
           @input="onInput"
           @input="onInput"
           @focus="onFocus"
           @focus="onFocus"
@@ -93,6 +94,44 @@ import { createComponent } from '@/packages/utils/create';
 import { formatNumber } from './util';
 import { formatNumber } from './util';
 
 
 const { componentName, create, translate } = createComponent('input');
 const { componentName, create, translate } = createComponent('input');
+interface Events {
+  eventName: 'focus' | 'blur' | 'clear' | 'change' | 'update:modelValue';
+  params: (string | number | Event)[];
+}
+export type InputAlignType = 'left' | 'center' | 'right'; // text-align
+export type InputFormatTrigger = 'onChange' | 'onBlur'; // onChange: 在输入时执行格式化 ; onBlur: 在失焦时执行格式化
+export type InputType =
+  | 'tel'
+  | 'url'
+  | 'date'
+  | 'file'
+  | 'text'
+  | 'time'
+  | 'week'
+  | 'color'
+  | 'digit'
+  | 'email'
+  | 'image'
+  | 'month'
+  | 'radio'
+  | 'range'
+  | 'reset'
+  | 'button'
+  | 'hidden'
+  | 'number'
+  | 'search'
+  | 'submit'
+  | 'checkbox'
+  | 'password'
+  | 'textarea'
+  | 'datetime-local';
+export type confirmTextType = 'send' | 'search' | 'next' | 'go' | 'done'
+
+export type InputRule = {
+  pattern?: RegExp;
+  message?: string;
+  required?: boolean;
+};
 
 
 export default create({
 export default create({
   props: {
   props: {
@@ -224,6 +263,9 @@ export default create({
       type: Boolean,
       type: Boolean,
       default: false
       default: false
     },
     },
+    confirmType: {
+      type: String as PropType<confirmTextType>,
+      default: 'done'
     adjustPosition: {
     adjustPosition: {
       type: Boolean,
       type: Boolean,
       default: true
       default: true

+ 4 - 1
src/packages/__VUE/searchbar/doc.md

@@ -197,6 +197,9 @@ app.use(SearchBar).use(Icon);
 | clearable          | 是否展示清除按钮 | Boolean | true     |
 | clearable          | 是否展示清除按钮 | Boolean | true     |
 | background      | 输入框外部背景 | String |   '#fff'   |
 | background      | 输入框外部背景 | String |   '#fff'   |
 | input-background   | 输入框内部背景 | String |   '#f7f7f7'   |
 | input-background   | 输入框内部背景 | String |   '#f7f7f7'   |
+| input-background   | 输入框内部背景 | String |   '#f7f7f7'   |
+| confirm-type   | 键盘右下角按钮的文字(`仅支持小程序`),仅在`type='text'`时生效,可选值 `send`:发送、`search`:搜索、`next`:下一个、`go`:前往、`done`:完成 | String |   `done`   |
+| input-background   | 输入框内部背景 | String |   '#f7f7f7'   |
 | autofocus `v3.1.21` | 是否自动聚焦 | boolean | false |
 | autofocus `v3.1.21` | 是否自动聚焦 | boolean | false |
 | disabled `v3.1.21` | 是否禁用输入框 | boolean | false |
 | disabled `v3.1.21` | 是否禁用输入框 | boolean | false |
 | readonly `v3.1.21`| 输入框只读 | boolean | false |
 | readonly `v3.1.21`| 输入框只读 | boolean | false |
@@ -224,4 +227,4 @@ app.use(SearchBar).use(Icon);
 | leftin      | 输入框内 左icon  |
 | leftin      | 输入框内 左icon  |
 | leftout     | 输入框外 左icon |
 | leftout     | 输入框外 左icon |
 | rightin     | 输入框内 右icon |
 | rightin     | 输入框内 右icon |
-| rightout    | 输入框外 右icon |
+| rightout    | 输入框外 右icon |

+ 8 - 1
src/packages/__VUE/searchbar/index.taro.vue

@@ -16,6 +16,7 @@
             :maxlength="maxLength"
             :maxlength="maxLength"
             :placeholder="placeholder || translate('placeholder')"
             :placeholder="placeholder || translate('placeholder')"
             :value="modelValue"
             :value="modelValue"
+            :confirm-type="confirmType"
             :disabled="disabled"
             :disabled="disabled"
             :readonly="readonly"
             :readonly="readonly"
             @click="clickInput"
             @click="clickInput"
@@ -41,13 +42,15 @@
 </template>
 </template>
 
 
 <script lang="ts">
 <script lang="ts">
-import { toRefs, reactive, computed, ref, onMounted } from 'vue';
+import { toRefs, reactive, computed, ref, onMounted, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { createComponent } from '@/packages/utils/create';
 const { create, translate } = createComponent('searchbar');
 const { create, translate } = createComponent('searchbar');
 interface Events {
 interface Events {
   eventName: 'change' | 'focus' | 'blur' | 'clear' | 'update:modelValue';
   eventName: 'change' | 'focus' | 'blur' | 'clear' | 'update:modelValue';
   params: (string | number | Event)[];
   params: (string | number | Event)[];
 }
 }
+export type confirmTextType = 'send' | 'search' | 'next' | 'go' | 'done'
+
 export default create({
 export default create({
   props: {
   props: {
     modelValue: {
     modelValue: {
@@ -78,6 +81,10 @@ export default create({
       type: String,
       type: String,
       default: ''
       default: ''
     },
     },
+    confirmType: {
+      type: String as PropType<confirmTextType>,
+      default: 'done'
+    },
     autofocus: {
     autofocus: {
       type: Boolean,
       type: Boolean,
       default: false
       default: false

+ 3 - 2
src/sites/mobile-taro/vue/src/dentry/pages/searchbar/index.vue

@@ -14,7 +14,7 @@
     </nut-searchbar>
     </nut-searchbar>
 
 
     <h2>右侧添加搜索文字</h2>
     <h2>右侧添加搜索文字</h2>
-    <nut-searchbar v-model="searchValue3">
+    <nut-searchbar v-model="searchValue3" :confirm-type="confirmType">
       <template v-slot:rightout> 搜索 </template>
       <template v-slot:rightout> 搜索 </template>
     </nut-searchbar>
     </nut-searchbar>
 
 
@@ -55,7 +55,8 @@ export default {
       searchValue2: '',
       searchValue2: '',
       searchValue3: '',
       searchValue3: '',
       searchValue4: '',
       searchValue4: '',
-      searchValue5: ''
+      searchValue5: '',
+      confirmType: 'search',
     });
     });
 
 
     const search = function (e: any) {
     const search = function (e: any) {