123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223 |
- <template>
- <view
- class="u-text"
- :class="[]"
- v-if="show"
- :style="{
- margin: margin,
- justifyContent: align === 'left' ? 'flex-start' : align === 'center' ? 'center' : 'flex-end'
- }"
- @tap="clickHandler"
- >
- <text
- :class="['u-text__price', type && `u-text__value--${type}`]"
- v-if="mode === 'price'"
- :style="[valueStyle]"
- >¥</text
- >
- <view class="u-text__prefix-icon" v-if="prefixIcon">
- <u-icon
- :name="prefixIcon"
- :customStyle="$u.addStyle(iconStyle)"
- ></u-icon>
- </view>
- <u-link
- v-if="mode === 'link'"
- :text="value"
- :href="href"
- underLine
- ></u-link>
- <template v-else-if="openType && isMp">
- <button
- class="u-reset-button u-text__value"
- :style="[valueStyle]"
- :data-index="index"
- :openType="openType"
- @getuserinfo="onGetUserInfo"
- @contact="onContact"
- @getphonenumber="onGetPhoneNumber"
- @error="onError"
- @launchapp="onLaunchApp"
- @opensetting="onOpenSetting"
- :lang="lang"
- :session-from="sessionFrom"
- :send-message-title="sendMessageTitle"
- :send-message-path="sendMessagePath"
- :send-message-img="sendMessageImg"
- :show-message-card="showMessageCard"
- :app-parameter="appParameter"
- >
- {{ value }}
- </button>
- </template>
- <text
- v-else
- class="u-text__value"
- :style="[valueStyle]"
- :class="[
- type && `u-text__value--${type}`,
- lines && `u-line-${lines}`
- ]"
- >{{ value }}</text
- >
- <view class="u-text__suffix-icon" v-if="suffixIcon">
- <u-icon
- :name="suffixIcon"
- :customStyle="$u.addStyle(iconStyle)"
- ></u-icon>
- </view>
- </view>
- </template>
- <script>
- import value from './value.js'
- import button from '../../libs/mixin/button.js'
- import openType from '../../libs/mixin/openType.js'
- import props from './props.js'
- export default {
- name: 'u--text',
-
- mixins: [uni.$u.mpMixin, uni.$u.mixin, value, button, openType, props],
-
-
- mixins: [uni.$u.mpMixin, uni.$u.mixin, value, props],
-
- computed: {
- valueStyle() {
- const style = {
- textDecoration: this.decoration,
- fontWeight: this.bold ? 'bold' : 'normal',
- wordWrap: this.wordWrap,
- fontSize: uni.$u.addUnit(this.size)
- }
- !this.type && (style.color = this.color)
- this.isNvue && this.lines && (style.lines = this.lines)
- this.lineHeight &&
- (style.lineHeight = uni.$u.addUnit(this.lineHeight))
- !this.isNvue && this.block && (style.display = 'block')
- return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
- },
- isNvue() {
- let nvue = false
-
- nvue = true
-
- return nvue
- },
- isMp() {
- let mp = false
-
- mp = true
-
- return mp
- }
- },
- data() {
- return {}
- },
- methods: {
- clickHandler() {
-
- if (this.call && this.mode === 'phone') {
- uni.makePhoneCall({
- phoneNumber: this.text
- })
- }
- this.$emit('click')
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- @import '../../libs/css/components.scss';
- .u-text {
- @include flex(row);
- align-items: center;
- flex-wrap: nowrap;
- flex: 1;
- /* #ifndef APP-NVUE */
- width: 100%;
- /* #endif */
- &__price {
- font-size: 14px;
- color: $u-content-color;
- }
- &__value {
- font-size: 14px;
- @include flex;
- color: $u-content-color;
- flex-wrap: wrap;
- // flex: 1;
- text-overflow: ellipsis;
- align-items: center;
- &--primary {
- color: $u-primary;
- }
- &--warning {
- color: $u-warning;
- }
- &--success {
- color: $u-success;
- }
- &--info {
- color: $u-info;
- }
- &--error {
- color: $u-error;
- }
- &--main {
- color: $u-main-color;
- }
- &--content {
- color: $u-content-color;
- }
- &--tips {
- color: $u-tips-color;
- }
- &--light {
- color: $u-light-color;
- }
- }
- }
- </style>
|