bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/uni_modules/uview-ui/components/u-read-more/u-read-more.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,157 @@
<template>
   <view class="u-read-more">
      <view
          class="u-read-more__content"
          :style="{
            height: isLongContent && status === 'close' ? $u.addUnit(showHeight) : $u.addUnit(contentHeight),
            textIndent: textIndent
         }"
      >
         <view
             class="u-read-more__content__inner"
             ref="u-read-more__content__inner"
             :class="[elId]"
         >
            <slot></slot>
         </view>
      </view>
      <view
          class="u-read-more__toggle"
          :style="[innerShadowStyle]"
          v-if="isLongContent"
      >
         <slot name="toggle">
            <view
                class="u-read-more__toggle__text"
                @tap="toggleReadMore"
            >
               <u--text
                   :text="status === 'close' ? closeText : openText"
                   :color="color"
                   :size="fontSize"
                   :lineHeight="fontSize"
                   margin="0 5px 0 0"
               ></u--text>
               <view class="u-read-more__toggle__icon">
                  <u-icon
                      :color="color"
                      :size="fontSize + 2"
                      :name="status === 'close' ? 'arrow-down' : 'arrow-up'"
                  ></u-icon>
               </view>
            </view>
         </slot>
      </view>
   </view>
</template>

<script>
   // #ifdef APP-NVUE
   const dom = uni.requireNativePlugin('dom')
   // #endif
   import props from './props.js';
   /**
    * readMore é˜…读更多
    * @description è¯¥ç»„件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。
    * @tutorial https://www.uviewui.com/components/readMore.html
    * @property {String | Number}   showHeight   å†…容超出此高度才会显示展开全文按钮，单位px（默认 400 ï¼‰
    * @property {Boolean}         toggle      å±•å¼€åŽæ˜¯å¦æ˜¾ç¤ºæ”¶èµ·æŒ‰é’®ï¼ˆé»˜è®¤ false ï¼‰
    * @property {String}         closeText   å…³é—­æ—¶çš„提示文字（默认 '展开阅读全文' ï¼‰
    * @property {String}         openText   å±•å¼€æ—¶çš„提示文字（默认 '收起' ï¼‰
    * @property {String}         color      æç¤ºæ–‡å­—的颜色（默认 '#2979ff' ï¼‰
    * @property {String | Number}   fontSize   æç¤ºæ–‡å­—的大小，单位px ï¼ˆé»˜è®¤ 14 ï¼‰
    * @property {Object}         shadowStyle   æ˜¾ç¤ºé˜´å½±çš„样式
    * @property {String}         textIndent   æ®µè½é¦–行缩进的字符个数 ï¼ˆé»˜è®¤ '2em' ï¼‰
    * @property {String | Number}   name      ç”¨äºŽåœ¨ open å’Œ close äº‹ä»¶ä¸­å½“作回调参数返回
    * @event {Function} open å†…容被展开时触发
    * @event {Function} close å†…容被收起时触发
    * @example <u-read-more><rich-text :nodes="content"></rich-text></u-read-more>
    */
   export default {
      name: 'u-read-more',
      mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
      data() {
         return {
            isLongContent: false, // æ˜¯å¦éœ€è¦éšè—ä¸€éƒ¨åˆ†å†…容
            status: 'close', // å½“前隐藏与显示的状态，close-收起状态，open-展开状态
            elId: uni.$u.guid(), // ç”Ÿæˆå”¯ä¸€class
            contentHeight: 100, // å†…容高度
         }
      },
      computed: {
         // å±•å¼€åŽæ— éœ€é˜´å½±ï¼Œæ”¶èµ·æ—¶æ‰éœ€è¦é˜´å½±æ ·å¼
         innerShadowStyle() {
            if (this.status === 'open') return {}
            else return this.shadowStyle
         }
      },
      mounted() {
         this.init()
      },
      methods: {
         async init() {
            this.getContentHeight().then(height => {
               this.contentHeight = height
               // åˆ¤æ–­é«˜åº¦ï¼Œå¦‚果真实内容高度大于占位高度，则显示收起与展开的控制按钮
               if (height > uni.$u.getPx(this.showHeight)) {
                  this.isLongContent = true
                  this.status = 'close'
               }
            })
         },
         // èŽ·å–内容的高度
         async getContentHeight() {
            // å»¶æ—¶ä¸€å®šæ—¶é—´å†èŽ·å–节点
            await uni.$u.sleep(30)
            return new Promise(resolve => {
               // #ifndef APP-NVUE
               this.$uGetRect('.' + this.elId).then(res => {
                  resolve(res.height)
               })
               // #endif

               // #ifdef APP-NVUE
               const ref = this.$refs['u-read-more__content__inner']
               dom.getComponentRect(ref, (res) => {
                  resolve(res.size.height)
               })
               // #endif
            })
         },
         // å±•å¼€æˆ–者收起
         toggleReadMore() {
            this.status = this.status === 'close' ? 'open' : 'close'
            // å¦‚æžœtoggle为false，隐藏"收起"部分的内容
            if (this.toggle == false) this.isLongContent = false
            // å‘出打开或者收齐的事件
            this.$emit(this.status, this.name)
         }
      }
   }
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";

.u-read-more {

   &__content {
      overflow: hidden;
      color: $u-content-color;
      font-size: 15px;
      text-align: left;
   }

   &__toggle {
      @include flex;
      justify-content: center;

      &__text {
         @include flex;
         align-items: center;
         justify-content: center;
         margin-top: 5px;
      }
   }
}
</style>