江西小程序管理端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

223 lines
7.1 KiB

1 year ago
  1. <template>
  2. <view
  3. class="u-text"
  4. :class="[]"
  5. v-if="show"
  6. :style="{
  7. margin: margin,
  8. justifyContent: align === 'left' ? 'flex-start' : align === 'center' ? 'center' : 'flex-end'
  9. }"
  10. @tap="clickHandler"
  11. >
  12. <text
  13. :class="['u-text__price', type && `u-text__value--${type}`]"
  14. v-if="mode === 'price'"
  15. :style="[valueStyle]"
  16. ></text
  17. >
  18. <view class="u-text__prefix-icon" v-if="prefixIcon">
  19. <u-icon
  20. :name="prefixIcon"
  21. :customStyle="$u.addStyle(iconStyle)"
  22. ></u-icon>
  23. </view>
  24. <u-link
  25. v-if="mode === 'link'"
  26. :text="value"
  27. :href="href"
  28. underLine
  29. ></u-link>
  30. <template v-else-if="openType && isMp">
  31. <button
  32. class="u-reset-button u-text__value"
  33. :style="[valueStyle]"
  34. :data-index="index"
  35. :openType="openType"
  36. @getuserinfo="onGetUserInfo"
  37. @contact="onContact"
  38. @getphonenumber="onGetPhoneNumber"
  39. @error="onError"
  40. @launchapp="onLaunchApp"
  41. @opensetting="onOpenSetting"
  42. :lang="lang"
  43. :session-from="sessionFrom"
  44. :send-message-title="sendMessageTitle"
  45. :send-message-path="sendMessagePath"
  46. :send-message-img="sendMessageImg"
  47. :show-message-card="showMessageCard"
  48. :app-parameter="appParameter"
  49. >
  50. {{ value }}
  51. </button>
  52. </template>
  53. <text
  54. v-else
  55. class="u-text__value"
  56. :style="[valueStyle]"
  57. :class="[
  58. type && `u-text__value--${type}`,
  59. lines && `u-line-${lines}`
  60. ]"
  61. >{{ value }}</text
  62. >
  63. <view class="u-text__suffix-icon" v-if="suffixIcon">
  64. <u-icon
  65. :name="suffixIcon"
  66. :customStyle="$u.addStyle(iconStyle)"
  67. ></u-icon>
  68. </view>
  69. </view>
  70. </template>
  71. <script>
  72. import value from './value.js'
  73. import button from '../../libs/mixin/button.js'
  74. import openType from '../../libs/mixin/openType.js'
  75. import props from './props.js'
  76. /**
  77. * Text 文本
  78. * @description 此组件集成了文本类在项目中的常用功能包括状态拨打电话格式化日期*替换超链接...等功能 您大可不必在使用特殊文本时自己定义text组件几乎涵盖您能使用的大部分场景
  79. * @tutorial https://www.uviewui.com/components/loading.html
  80. * @property {String} type 主题颜色
  81. * @property {Boolean} show 是否显示默认 true
  82. * @property {String | Number} text 显示的值
  83. * @property {String} prefixIcon 前置图标
  84. * @property {String} suffixIcon 后置图标
  85. * @property {String} mode 文本处理的匹配模式 text-普通文本price-价格phone-手机号name-姓名date-日期link-超链接
  86. * @property {String} href mode=link下配置的链接
  87. * @property {String | Function} format 格式化规则
  88. * @property {Boolean} call mode=phone时点击文本是否拨打电话默认 false
  89. * @property {String} openType 小程序的打开方式
  90. * @property {Boolean} bold 是否粗体默认normal默认 false
  91. * @property {Boolean} block 是否块状默认 false
  92. * @property {String | Number} lines 文本显示的行数如果设置超出此行数将会显示省略号
  93. * @property {String} color 文本颜色默认 '#303133'
  94. * @property {String | Number} size 字体大小默认 15
  95. * @property {Object | String} iconStyle 图标的样式 默认 {fontSize: '15px'}
  96. * @property {String} decoration 文字装饰下划线中划线等可选值 none|underline|line-through默认 'none'
  97. * @property {Object | String | Number} margin 外边距对象字符串数值形式均可默认 0
  98. * @property {String | Number} lineHeight 文本行高
  99. * @property {String} align 文本对齐方式可选值left|center|right默认 'left'
  100. * @property {String} wordWrap 文字换行可选值break-word|normal|anywhere默认 'normal'
  101. * @event {Function} click 点击触发事件
  102. * @example <u--text text="我用十年青春,赴你最后之约"></u--text>
  103. */
  104. export default {
  105. name: 'u--text',
  106. // #ifdef MP
  107. mixins: [uni.$u.mpMixin, uni.$u.mixin, value, button, openType, props],
  108. // #endif
  109. // #ifndef MP
  110. mixins: [uni.$u.mpMixin, uni.$u.mixin, value, props],
  111. // #endif
  112. computed: {
  113. valueStyle() {
  114. const style = {
  115. textDecoration: this.decoration,
  116. fontWeight: this.bold ? 'bold' : 'normal',
  117. wordWrap: this.wordWrap,
  118. fontSize: uni.$u.addUnit(this.size)
  119. }
  120. !this.type && (style.color = this.color)
  121. this.isNvue && this.lines && (style.lines = this.lines)
  122. this.lineHeight &&
  123. (style.lineHeight = uni.$u.addUnit(this.lineHeight))
  124. !this.isNvue && this.block && (style.display = 'block')
  125. return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
  126. },
  127. isNvue() {
  128. let nvue = false
  129. // #ifdef APP-NVUE
  130. nvue = true
  131. // #endif
  132. return nvue
  133. },
  134. isMp() {
  135. let mp = false
  136. // #ifdef MP
  137. mp = true
  138. // #endif
  139. return mp
  140. }
  141. },
  142. data() {
  143. return {}
  144. },
  145. methods: {
  146. clickHandler() {
  147. // 如果为手机号模式,拨打电话
  148. if (this.call && this.mode === 'phone') {
  149. uni.makePhoneCall({
  150. phoneNumber: this.text
  151. })
  152. }
  153. this.$emit('click')
  154. }
  155. }
  156. }
  157. </script>
  158. <style lang="scss" scoped>
  159. @import '../../libs/css/components.scss';
  160. .u-text {
  161. @include flex(row);
  162. align-items: center;
  163. flex-wrap: nowrap;
  164. flex: 1;
  165. /* #ifndef APP-NVUE */
  166. width: 100%;
  167. /* #endif */
  168. &__price {
  169. font-size: 14px;
  170. color: $u-content-color;
  171. }
  172. &__value {
  173. font-size: 14px;
  174. @include flex;
  175. color: $u-content-color;
  176. flex-wrap: wrap;
  177. // flex: 1;
  178. text-overflow: ellipsis;
  179. align-items: center;
  180. &--primary {
  181. color: $u-primary;
  182. }
  183. &--warning {
  184. color: $u-warning;
  185. }
  186. &--success {
  187. color: $u-success;
  188. }
  189. &--info {
  190. color: $u-info;
  191. }
  192. &--error {
  193. color: $u-error;
  194. }
  195. &--main {
  196. color: $u-main-color;
  197. }
  198. &--content {
  199. color: $u-content-color;
  200. }
  201. &--tips {
  202. color: $u-tips-color;
  203. }
  204. &--light {
  205. color: $u-light-color;
  206. }
  207. }
  208. }
  209. </style>