| commit | author | age | ||
| e3ba12 | 1 | <template> |
| Z | 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 | ||
| 72 | <script> | |
| 73 | import value from './value.js' | |
| 74 | import button from '../../libs/mixin/button.js' | |
| 75 | import openType from '../../libs/mixin/openType.js' | |
| 76 | import props from './props.js' | |
| 77 | /** | |
| 78 | * Text 文本 | |
| 79 | * @description 此组件集成了文本类在项目中的常用功能，包括状态，拨打电话，格式化日期，*替换，超链接...等功能。 您大可不必在使用特殊文本时自己定义，text组件几乎涵盖您能使用的大部分场景。 | |
| 80 | * @tutorial https://www.uviewui.com/components/loading.html | |
| 81 | * @property {String} type 主题颜色 | |
| 82 | * @property {Boolean} show 是否显示（默认 true ） | |
| 83 | * @property {String | Number} text 显示的值 | |
| 84 | * @property {String} prefixIcon 前置图标 | |
| 85 | * @property {String} suffixIcon 后置图标 | |
| 86 | * @property {String} mode 文本处理的匹配模式 text-普通文本，price-价格，phone-手机号，name-姓名，date-日期，link-超链接 | |
| 87 | * @property {String} href mode=link下，配置的链接 | |
| 88 | * @property {String | Function} format 格式化规则 | |
| 89 | * @property {Boolean} call mode=phone时，点击文本是否拨打电话（默认 false ） | |
| 90 | * @property {String} openType 小程序的打开方式 | |
| 91 | * @property {Boolean} bold 是否粗体，默认normal（默认 false ） | |
| 92 | * @property {Boolean} block 是否块状（默认 false ） | |
| 93 | * @property {String | Number} lines 文本显示的行数，如果设置，超出此行数，将会显示省略号 | |
| 94 | * @property {String} color 文本颜色（默认 '#303133' ） | |
| 95 | * @property {String | Number} size 字体大小（默认 15 ） | |
| 96 | * @property {Object | String} iconStyle 图标的样式 （默认 {fontSize: '15px'} ） | |
| 97 | * @property {String} decoration 文字装饰，下划线，中划线等，可选值 none|underline|line-through（默认 'none' ） | |
| 98 | * @property {Object | String | Number} margin 外边距，对象、字符串，数值形式均可（默认 0 ） | |
| 99 | * @property {String | Number} lineHeight 文本行高 | |
| 100 | * @property {String} align 文本对齐方式，可选值left|center|right（默认 'left' ） | |
| 101 | * @property {String} wordWrap 文字换行，可选值break-word|normal|anywhere（默认 'normal' ） | |
| 102 | * @event {Function} click 点击触发事件 | |
| 103 | * @example <u--text text="我用十年青春,赴你最后之约"></u--text> | |
| 104 | */ | |
| 105 | export default { | |
| 106 | name: 'u--text', | |
| 107 | // #ifdef MP | |
| 108 | mixins: [uni.$u.mpMixin, uni.$u.mixin, value, button, openType, props], | |
| 109 | // #endif | |
| 110 | // #ifndef MP | |
| 111 | mixins: [uni.$u.mpMixin, uni.$u.mixin, value, props], | |
| 112 | // #endif | |
| 113 | computed: { | |
| 114 | valueStyle() { | |
| 115 | const style = { | |
| 116 | textDecoration: this.decoration, | |
| 117 | fontWeight: this.bold ? 'bold' : 'normal', | |
| 118 | wordWrap: this.wordWrap, | |
| 119 | fontSize: uni.$u.addUnit(this.size) | |
| 120 | } | |
| 121 | !this.type && (style.color = this.color) | |
| 122 | this.isNvue && this.lines && (style.lines = this.lines) | |
| 123 | this.lineHeight && | |
| 124 | (style.lineHeight = uni.$u.addUnit(this.lineHeight)) | |
| 125 | !this.isNvue && this.block && (style.display = 'block') | |
| 126 | return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle)) | |
| 127 | }, | |
| 128 | isNvue() { | |
| 129 | let nvue = false | |
| 130 | // #ifdef APP-NVUE | |
| 131 | nvue = true | |
| 132 | // #endif | |
| 133 | return nvue | |
| 134 | }, | |
| 135 | isMp() { | |
| 136 | let mp = false | |
| 137 | // #ifdef MP | |
| 138 | mp = true | |
| 139 | // #endif | |
| 140 | return mp | |
| 141 | } | |
| 142 | }, | |
| 143 | data() { | |
| 144 | return {} | |
| 145 | }, | |
| 146 | methods: { | |
| 147 | clickHandler() { | |
| 148 | // 如果为手机号模式，拨打电话 | |
| 149 | if (this.call && this.mode === 'phone') { | |
| 150 | uni.makePhoneCall({ | |
| 151 | phoneNumber: this.text | |
| 152 | }) | |
| 153 | } | |
| 154 | this.$emit('click') | |
| 155 | } | |
| 156 | } | |
| 157 | } | |
| 158 | </script> | |
| 159 | ||
| 160 | <style lang="scss" scoped> | |
| 161 | @import '../../libs/css/components.scss'; | |
| 162 | ||
| 163 | .u-text { | |
| 164 | @include flex(row); | |
| 165 | align-items: center; | |
| 166 | flex-wrap: nowrap; | |
| 167 | flex: 1; | |
| 168 | /* #ifndef APP-NVUE */ | |
| 169 | width: 100%; | |
| 170 | /* #endif */ | |
| 171 | ||
| 172 | &__price { | |
| 173 | font-size: 14px; | |
| 174 | color: $u-content-color; | |
| 175 | } | |
| 176 | ||
| 177 | &__value { | |
| 178 | font-size: 14px; | |
| 179 | @include flex; | |
| 180 | color: $u-content-color; | |
| 181 | flex-wrap: wrap; | |
| 182 | // flex: 1; | |
| 183 | text-overflow: ellipsis; | |
| 184 | align-items: center; | |
| 185 | ||
| 186 | &--primary { | |
| 187 | color: $u-primary; | |
| 188 | } | |
| 189 | ||
| 190 | &--warning { | |
| 191 | color: $u-warning; | |
| 192 | } | |
| 193 | ||
| 194 | &--success { | |
| 195 | color: $u-success; | |
| 196 | } | |
| 197 | ||
| 198 | &--info { | |
| 199 | color: $u-info; | |
| 200 | } | |
| 201 | ||
| 202 | &--error { | |
| 203 | color: $u-error; | |
| 204 | } | |
| 205 | ||
| 206 | &--main { | |
| 207 | color: $u-main-color; | |
| 208 | } | |
| 209 | ||
| 210 | &--content { | |
| 211 | color: $u-content-color; | |
| 212 | } | |
| 213 | ||
| 214 | &--tips { | |
| 215 | color: $u-tips-color; | |
| 216 | } | |
| 217 | ||
| 218 | &--light { | |
| 219 | color: $u-light-color; | |
| 220 | } | |
| 221 | } | |
| 222 | } | |
| 223 | </style> | |
