bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/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>