From bd99a5211f3a5fcaa051e5da868d87bb870148f5 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Fri, 01 Mar 2024 09:58:45 +0800 Subject: [PATCH] fix:手持设备 --- uni_modules/uview-ui/components/u-cell/u-cell.vue | 229 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 229 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-cell/u-cell.vue b/uni_modules/uview-ui/components/u-cell/u-cell.vue new file mode 100644 index 0000000..b099c90 --- /dev/null +++ b/uni_modules/uview-ui/components/u-cell/u-cell.vue @@ -0,0 +1,229 @@ +<template> + <view class="u-cell" :class="[customClass]" :style="[$u.addStyle(customStyle)]" + :hover-class="(!disabled && (clickable || isLink)) ? 'u-cell--clickable' : ''" :hover-stay-time="250" + @tap="clickHandler"> + <view class="u-cell__body" :class="[ center && 'u-cell--center', size === 'large' && 'u-cell__body--large']"> + <view class="u-cell__body__content"> + <view class="u-cell__left-icon-wrap" v-if="$slots.icon || icon"> + <slot name="icon" v-if="$slots.icon"> + </slot> + <u-icon v-else :name="icon" :custom-style="iconStyle" :size="size === 'large' ? 22 : 18"></u-icon> + </view> + <view class="u-cell__title"> + <slot name="title"> + <text v-if="title" class="u-cell__title-text" :style="[titleTextStyle]" + :class="[disabled && 'u-cell--disabled', size === 'large' && 'u-cell__title-text--large']">{{ title }}</text> + </slot> + <slot name="label"> + <text class="u-cell__label" v-if="label" + :class="[disabled && 'u-cell--disabled', size === 'large' && 'u-cell__label--large']">{{ label }}</text> + </slot> + </view> + </view> + <slot name="value"> + <text class="u-cell__value" + :class="[disabled && 'u-cell--disabled', size === 'large' && 'u-cell__value--large']" + v-if="!$u.test.empty(value)">{{ value }}</text> + </slot> + <view class="u-cell__right-icon-wrap" v-if="$slots['right-icon'] || isLink" + :class="[`u-cell__right-icon-wrap--${arrowDirection}`]"> + <slot name="right-icon" v-if="$slots['right-icon']"> + </slot> + <u-icon v-else :name="rightIcon" :custom-style="rightIconStyle" :color="disabled ? '#c8c9cc' : 'info'" + :size="size === 'large' ? 18 : 16"></u-icon> + </view> + </view> + <u-line v-if="border"></u-line> + </view> +</template> + +<script> + import props from './props.js'; + /** + * cell ��������� + * @description cell������������������������������������������������������������������������������������ + * @tutorial https://uviewui.com/components/cell.html + * @property {String | Number} title ������ + * @property {String | Number} label ��������������������������� + * @property {String | Number} value ��������������� + * @property {String} icon ���������������������������������������(������������������������������������) + * @property {Boolean} disabled ������������cell + * @property {Boolean} border ��������������������� (������ true ) + * @property {Boolean} center ������������������������(������������������������value������) (������ false ) + * @property {String} url ������������������URL������ + * @property {String} linkType ������������������������������������������uView���������route������������������������������������ (������ 'navigateTo' ) + * @property {Boolean} clickable ������������������������(������������������������������������) ��������� false ��� + * @property {Boolean} isLink ��������������������������������������������� ��������� false ��� + * @property {Boolean} required ������������������������������������������(���������������������������input������) ��������� false ��� + * @property {String} rightIcon ��������������������� ��������� 'arrow-right'��� + * @property {String} arrowDirection ���������������������������������������left���up���down + * @property {Object | String} rightIconStyle ��������������������������� + * @property {Object | String} titleStyle ��������������� + * @property {Object | String} iconStyle ������������������ + * @property {String} size ��������������������������������� large���normal���mini + * @property {Boolean} stop ������cell������������������������ (������ true ) + * @property {Object} customStyle ��������������������������������� + * + * @event {Function} click ������cell��������������� + * @example ���������������������cell-group������������������������������������ + */ + export default { + name: 'u-cell', + data() { + return { + + } + }, + mixins: [uni.$u.mpMixin, uni.$u.mixin, props], + computed: { + titleTextStyle() { + return uni.$u.addStyle(this.titleStyle) + } + }, + methods: { + // ������cell + clickHandler(e) { + if (this.disabled) return + this.$emit('click', { + name: this.name + }) + // ���������������url(���props������������mixin������)��������������������� + this.openPage() + // ������������������������ + this.stop && this.preventEvent(e) + }, + } + } +</script> + +<style lang="scss" scoped> + @import "../../libs/css/components.scss"; + + $u-cell-padding: 10px 15px !default; + $u-cell-font-size: 15px !default; + $u-cell-line-height: 24px !default; + $u-cell-color: $u-main-color !default; + $u-cell-icon-size: 16px !default; + $u-cell-title-font-size: 15px !default; + $u-cell-title-line-height: 22px !default; + $u-cell-title-color: $u-main-color !default; + $u-cell-label-font-size: 12px !default; + $u-cell-label-color: $u-tips-color !default; + $u-cell-label-line-height: 18px !default; + $u-cell-value-font-size: 14px !default; + $u-cell-value-color: $u-content-color !default; + $u-cell-clickable-color: $u-bg-color !default; + $u-cell-disabled-color: #c8c9cc !default; + $u-cell-padding-top-large: 13px !default; + $u-cell-padding-bottom-large: 13px !default; + $u-cell-value-font-size-large: 15px !default; + $u-cell-label-font-size-large: 14px !default; + $u-cell-title-font-size-large: 16px !default; + $u-cell-left-icon-wrap-margin-right: 4px !default; + $u-cell-right-icon-wrap-margin-left: 4px !default; + $u-cell-title-flex:1 !default; + $u-cell-label-margin-top:5px !default; + + + .u-cell { + &__body { + @include flex(); + /* #ifndef APP-NVUE */ + box-sizing: border-box; + /* #endif */ + padding: $u-cell-padding; + font-size: $u-cell-font-size; + color: $u-cell-color; + // line-height: $u-cell-line-height; + align-items: center; + + &__content { + @include flex(row); + align-items: center; + flex: 1; + } + + &--large { + padding-top: $u-cell-padding-top-large; + padding-bottom: $u-cell-padding-bottom-large; + } + } + + &__left-icon-wrap, + &__right-icon-wrap { + @include flex(); + align-items: center; + // height: $u-cell-line-height; + font-size: $u-cell-icon-size; + } + + &__left-icon-wrap { + margin-right: $u-cell-left-icon-wrap-margin-right; + } + + &__right-icon-wrap { + margin-left: $u-cell-right-icon-wrap-margin-left; + transition: transform 0.3s; + + &--up { + transform: rotate(-90deg); + } + + &--down { + transform: rotate(90deg); + } + } + + &__title { + flex: $u-cell-title-flex; + + &-text { + font-size: $u-cell-title-font-size; + line-height: $u-cell-title-line-height; + color: $u-cell-title-color; + + &--large { + font-size: $u-cell-title-font-size-large; + } + } + + } + + &__label { + margin-top: $u-cell-label-margin-top; + font-size: $u-cell-label-font-size; + color: $u-cell-label-color; + line-height: $u-cell-label-line-height; + + &--large { + font-size: $u-cell-label-font-size-large; + } + } + + &__value { + text-align: right; + font-size: $u-cell-value-font-size; + line-height: $u-cell-line-height; + color: $u-cell-value-color; + + &--large { + font-size: $u-cell-value-font-size-large; + } + } + + &--clickable { + background-color: $u-cell-clickable-color; + } + + &--disabled { + color: $u-cell-disabled-color; + /* #ifndef APP-NVUE */ + cursor: not-allowed; + /* #endif */ + } + + &--center { + align-items: center; + } + } +</style> -- Gitblit v1.8.0