Merge branch 'Moonofweisheng:master' into master

Moonofweisheng · Aug 1, 2024 · 668b61d · 668b61d
2 parents dea8cde + 84826f8
commit 668b61d
Show file tree

Hide file tree

Showing 12 changed files with 273 additions and 116 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -36,7 +36,7 @@
       // #vue组件中html代码格式化样式
     }
   },
-  "typescript.tsdk": "node_modules\\typescript\\lib",
+  "typescript.tsdk": "node_modules/typescript/lib",
   "i18n-ally.localesPaths": [
     "src/uni_modules/wot-design-uni/locale",
     "src/uni_modules/wot-design-uni/locale/lang"

diff --git a/docs/component/input.md b/docs/component/input.md
@@ -44,6 +44,21 @@ function handleChange(event) {
 <wd-input v-model="value" clearable @change="handleChange"/>
 ```
 
+## 有值且聚焦时展示清空按钮
+设置 `clear-trigger` 属性，可以控制是否聚焦时才展示清空按钮。
+
+```html
+<wd-input v-model="value" clear-trigger="focus" clearable @change="handleChange"/>
+```
+
+## 点击清除按钮时不自动聚焦
+
+设置`focus-when-clear` 属性，可以控制点击清除按钮时是否自动聚焦。
+
+```html
+<wd-input type="text" :focus-when-clear="false" v-model="value" clearable />
+```
+
 ## 密码输入框
 
 设置 `show-password` 属性。
@@ -150,6 +165,9 @@ function handleChange(event) {
 | no-border | 非 cell 类型下是否隐藏下划线 | boolean | - | false | - | - |
 | prop | 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的 | string | - | - | - |
 | rules | 表单验证规则，结合`wd-form`组件使用	 | `FormItemRule []`	 | - | `[]` | - |
+| clearTrigger | 显示清除图标的时机，always 表示输入框不为空时展示，focus 表示输入框聚焦且不为空时展示	 | `InputClearTrigger`	 | `focus` / `always` | `always` | $LOWEST_VERSION$ |
+| focusWhenClear | 是否在点击清除按钮时聚焦输入框 | boolean | -      | true  | $LOWEST_VERSION$   |
+
 
 
 ### FormItemRule 数据结构

diff --git a/docs/component/search.md b/docs/component/search.md
@@ -141,18 +141,6 @@ function changeSearchType({ item, index }) {
 <wd-search placeholder="请输入订单号/订单名称" cancel-txt="搜索" />
 ```
 
-<!-- 通过设置 `use-action-slot` 来自定义输入框左边内容，设置`use-action-slot` 使用自定义内容替换取消按钮。
-
-```html
-<wd-search use-label-slot use-action-slot>
-  <template #label>
-    <view style="line-height: 14px;margin-right: 10px;">左侧</view>
-  </template>
-  <template #action>
-    <view style="padding: 5px 10px;color: #ff0000;">右侧</view>
-  </template>
-</wd-search>
-``` -->
 
 ## Attributes
 

diff --git a/docs/component/text.md b/docs/component/text.md
@@ -69,6 +69,66 @@
 <wd-text text="18888888888" mode="phone" :format="true"></wd-text>
 ```
 
+## lines
+
+设置 `lines` 属性,文本显示的行数，如果设置，超出此行数，将会显示省略号。最大值为5。
+
+```html
+<wd-text :text="text" :lines="2" size="16px"></wd-text>
+```
+
+## lineHeight
+
+设置 `lineHeight` 文本行高。
+
+```html
+<wd-text :text="text" lineHeight="20px"></wd-text>
+```
+
+## 前后插槽
+
+设置 `prefix` `suffix` 插槽。
+
+```html
+<wd-text
+  text="12345678901"
+  mode="phone"
+  format
+  type="primary"
+  prefix="Prefix"
+  suffix="Suffix"
+/>
+
+<wd-text text="12345678901" mode="phone" format type="primary">
+  <template #prefix>
+    <text>Prefix</text>
+  </template>
+  <template #suffix>Suffix</template>
+</wd-text>
+```
+
+## 金额
+
+设置 `mode="price"` 。
+
+```html
+<wd-text
+  text="16354.156"
+  mode="price"
+  type="success"
+  decoration="line-through"
+  prefix="￥"
+/>
+```
+
+## 文字装饰
+
+设置 `decoration` 文字装饰，下划线，中划线等。
+
+```html
+<wd-text :text="text" type="warning" decoration="underline"/>
+```
+
 ## 事件
 
 ```html
@@ -91,12 +151,15 @@ function clickTest() {
 | type       | 主题类型                                                           | string  | 'primary' / 'error' / 'warning' / 'success'                        | default | 1.3.4 |
 | text       | 文字                                                               | string  | -                                                                  |         | 1.3.4 |
 | size       | 字体大小                                                           | string  | -                                                                  | -       | 1.3.4 |
-| mode       | 文本处理的匹配模式                                                 | string  | 'text-普通文本' / 'date - 日期' / 'phone - 手机号' / 'name - 姓名' | text    | 1.3.4 |
+| mode       | 文本处理的匹配模式                                                 | string  | 'text-普通文本' / 'date - 日期' / 'phone - 手机号' / 'name - 姓名' / 'price - 金额' | text    | 1.3.4+ |
 | bold       | 是否粗体，默认 normal                                              | boolean | -                                                                  | false   | 1.3.4 |
 | format     | 是否脱敏                                                           | boolean | 当 mode 为 phone 和 name 时生效                                    | false   | 1.3.4 |
 | color      | 文字颜色                                                           | string  | -                                                                  | -       | 1.3.4 |
 | lines      | 文本显示的行数，如果设置，超出此行数，将会显示省略号。最大值为 5。 | Number  | -                                                                  | -       | 1.3.4 |
 | lineHeight | 文本行高                                                           | string  | -                                                                  |         | 1.3.4 |
+| decoration | 文字装饰，下划线，中划线等                                                           | string  | underline/line-through/overline                                                                  |         | 1.3.4+ |
+| prefix | 前置插槽                                                           | string  | -                                                                  |         | 1.3.4+ |
+| suffix | 后置插槽                                                           | string  | -                                                                  |         | 1.3.4+ |
 
 ## Events
 

diff --git a/src/pages/input/Index.vue b/src/pages/input/Index.vue
@@ -15,6 +15,12 @@
     <demo-block title="清空按钮">
       <wd-input type="text" @input="handleInput" v-model="value4" clearable @change="handleChange1" />
     </demo-block>
+    <demo-block title="有值且聚焦时展示清空按钮">
+      <wd-input type="text" clear-trigger="focus" @input="handleInput" v-model="value20" clearable @change="handleChange1" />
+    </demo-block>
+    <demo-block title="点击清除按钮时不自动聚焦">
+      <wd-input type="text" :focus-when-clear="false" @input="handleInput" v-model="value21" clearable @change="handleChange1" />
+    </demo-block>
     <demo-block title="密码框">
       <wd-input type="text" @input="handleInput" v-model="value5" clearable show-password @change="handleChange2" />
     </demo-block>
@@ -45,7 +51,7 @@
         <wd-input type="text" label="错误状态" v-model="value15" @input="handleInput" placeholder="请输入用户名" error />
         <wd-input type="text" label="必填" v-model="value16" @input="handleInput" placeholder="请输入用户名" required />
         <wd-input type="text" label="图标" v-model="value17" @input="handleInput" placeholder="请输入..." prefix-icon="dong" suffix-icon="list" />
-        <wd-input type="text" label="自定义插槽" center v-model="value18" @input="handleInput" placeholder="请输入..." use-suffix-slot clearable>
+        <wd-input type="text" label="自定义插槽" center v-model="value18" @input="handleInput" placeholder="请输入..." clearable>
           <template #suffix>
             <wd-button size="small" custom-class="button">获取验证码</wd-button>
           </template>
@@ -76,6 +82,8 @@ const value16 = ref<string>('')
 const value17 = ref<string>('')
 const value18 = ref<string>('')
 const value19 = ref<string>('')
+const value20 = ref<string>('')
+const value21 = ref<string>('')
 
 function handleChange(event: any) {
   console.log(event)

diff --git a/src/pages/text/Index.vue b/src/pages/text/Index.vue
@@ -28,7 +28,6 @@
 
     <demo-block title="脱敏">
       <view style="display: flex; align-items: center">
-        <wd-text text="李四" mode="name" :format="true"></wd-text>
         <wd-text text="张长三" mode="name" :format="true"></wd-text>
         <wd-text text="18888888888" mode="phone" :format="true"></wd-text>
       </view>
@@ -51,6 +50,31 @@
         <view><wd-text text="1719976636911" mode="date"></wd-text></view>
       </view>
     </demo-block>
+
+    <demo-block title="前后插槽">
+      <view>
+        <wd-text text="12345678901" mode="phone" format type="primary" prefix="Prefix" suffix="Suffix" />
+        <br />
+        <wd-text text="12345678901" mode="phone" format type="primary">
+          <template #prefix>
+            <text>Prefix</text>
+          </template>
+          <template #suffix>Suffix</template>
+        </wd-text>
+      </view>
+    </demo-block>
+
+    <demo-block title="金额">
+      <view>
+        <wd-text text="16354.156" mode="price" type="success" decoration="line-through" prefix="￥" />
+      </view>
+    </demo-block>
+
+    <demo-block title="文字装饰">
+      <view>
+        <wd-text :text="text" type="warning" decoration="underline" />
+      </view>
+    </demo-block>
   </page-wraper>
 </template>
 <script lang="ts" setup>

diff --git a/src/uni_modules/wot-design-uni/components/wd-input/types.ts b/src/uni_modules/wot-design-uni/components/wd-input/types.ts
@@ -1,6 +1,8 @@
 import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
 import type { FormItemRule } from '../wd-form/types'
 
+export type InputClearTrigger = 'focus' | 'always'
+
 export const inputProps = {
   ...baseProps,
   customInputClass: makeStringProp(''),
@@ -155,5 +157,16 @@ export const inputProps = {
   /**
    * 表单验证规则，结合wd-form组件使用
    */
-  rules: makeArrayProp<FormItemRule>()
+  rules: makeArrayProp<FormItemRule>(),
+  /**
+   * 显示清除图标的时机，always 表示输入框不为空时展示，focus 表示输入框聚焦且不为空时展示
+   */
+  clearTrigger: makeStringProp<InputClearTrigger>('always'),
+  /**
+   * 是否在点击清除按钮时聚焦输入框
+   * 类型: boolean
+   * 默认值: true
+   * 最低版本: $LOWEST_VERSION$
+   */
+  focusWhenClear: makeBooleanProp(true)
 }