feat: 组件text新增金额类型，前后插槽，下划线等功能 (#452)

PdxLook · web-flow · commit 95735be75e27 · 2024-07-31T23:08:15.000+08:00
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/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-text/types.ts b/src/uni_modules/wot-design-uni/components/wd-text/types.ts
@@ -26,11 +26,19 @@ export const textProps = {
   size: makeStringProp(''),
   /**
    * 文本处理的匹配模式
-   * 可选值：'text-普通文本' / 'date - 日期' / 'phone - 手机号' / 'name - 姓名'
+   * 可选值：'text-普通文本' / 'date - 日期' / 'phone - 手机号' / 'name - 姓名' / 'price - 金额'
    * 类型：string
    * 默认值：'text'
    */
   mode: makeStringProp('text'),
+  /**
+   * 文字装饰，下划线，中划线等
+   * 可选值：'underline/line-through/overline'
+   * 类型：string
+   * 默认值：'none'
+   */
+  decoration: makeStringProp('none'),
+
   /**
    * mode=phone时，点击文本是否拨打电话
    * 类型：boolean
@@ -55,6 +63,18 @@ export const textProps = {
    * 默认值：''
    */
   color: makeStringProp(''),
+  /**
+   * 前置插槽
+   * 类型：string
+   * 默认值：''
+   */
+  prefix: makeStringProp(''),
+  /**
+   * 后置插槽
+   * 类型：string
+   * 默认值：''
+   */
+  suffix: makeStringProp(''),
   /**
    * 文本显示的行数，如果设置，超出此行数，将会显示省略号。最大值为5。
    */
diff --git a/src/uni_modules/wot-design-uni/components/wd-text/wd-text.vue b/src/uni_modules/wot-design-uni/components/wd-text/wd-text.vue
@@ -1,9 +1,9 @@
 <template>
-  <view>
-    <text @click="handleClick" :class="rootClass" :style="rootStyle">
-      {{ formattedText }}
-    </text>
-  </view>
+  <text @click="handleClick" :class="rootClass" :style="rootStyle">
+    <slot name="prefix">{{ props.prefix }}</slot>
+    <text>{{ formattedText }}</text>
+    <slot name="suffix">{{ props.suffix }}</slot>
+  </text>
 </template>
 
 <script lang="ts">
@@ -23,25 +23,26 @@ import { isDef, objToStyle } from '../common/util'
 import { textProps } from './types'
 import { dayjs } from '../common/dayjs'
 
+// 获取组件的 props 和 emit 函数
 const props = defineProps(textProps)
 const emit = defineEmits(['click'])
 
+// 存储文本类名的响应式变量
 const textClass = ref<string>('')
 
-// 合并 watch 逻辑
+// 监听 props 变化，合并 watch 逻辑
 watch(
   () => ({
     type: props.type,
     text: props.text,
     mode: props.mode,
-    call: props.call,
     color: props.color,
     bold: props.bold,
     lines: props.lines,
     format: props.format
   }),
   ({ type }) => {
-    // type 验证
+    // 验证 type 属性
     if (type && !['primary', 'error', 'warning', 'success', 'default'].includes(type)) {
       console.error(`type must be one of ${type.toString()}`)
     }
@@ -50,10 +51,12 @@ watch(
   { deep: true, immediate: true }
 )
 
+// 计算根元素的类名
 const rootClass = computed(() => {
   return `wd-text ${props.customClass} ${textClass.value}`
 })
 
+// 计算根元素的样式
 const rootStyle = computed(() => {
   const rootStyle: Record<string, any> = {}
   if (props.color) {
@@ -65,12 +68,16 @@ const rootStyle = computed(() => {
   if (props.lineHeight) {
     rootStyle['line-height'] = `${props.lineHeight}`
   }
+  if (props.decoration) {
+    rootStyle['text-decoration'] = `${props.decoration}`
+  }
   return `${objToStyle(rootStyle)};${props.customStyle}`
 })
 
+// 计算文本类名的函数
 function computeTextClass() {
   const { type, color, bold, lines } = props
-  let textClassList: string[] = []
+  const textClassList: string[] = []
   if (!color) {
     textClassList.push(`is-${type}`)
   }
@@ -81,7 +88,7 @@ function computeTextClass() {
   textClass.value = textClassList.join(' ')
 }
 
-// 格式化文本函数
+// 格式化文本的函数
 function formatText(text: string, format: boolean, mode: string): string {
   if (format) {
     if (mode === 'phone') {
@@ -95,14 +102,33 @@ function formatText(text: string, format: boolean, mode: string): string {
   return text
 }
 
+// 格式化数字的函数
+function formatNumber(num: number | string): string {
+  num = Number(num).toFixed(2)
+  const x = num.split('.')
+  let x1 = x[0]
+  const x2 = x.length > 1 ? '.' + x[1] : ''
+  const rgx = /(\d+)(\d{3})/
+  while (rgx.test(x1)) {
+    x1 = x1.replace(rgx, '$1,$2')
+  }
+  return x1 + x2
+}
+
+// 计算格式化后的文本
 const formattedText = computed(() => {
-  if (props.mode === 'date') {
-    return dayjs(Number(props.text)).format('YYYY-MM-DD')
+  const { text, mode, format } = props
+  if (mode === 'date') {
+    return dayjs(Number(text)).format('YYYY-MM-DD')
+  }
+  if (mode === 'price') {
+    return formatNumber(text)
   }
-  return formatText(props.text, props.format, props.mode)
+  return formatText(text, format, mode)
 })
 
-function handleClick(event: any) {
+// 处理点击事件
+function handleClick(event: Event) {
   emit('click', event)
 }
 </script>
