123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157 |
- <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>
-
- const dom = uni.requireNativePlugin('dom')
-
- import props from './props.js';
-
- export default {
- name: 'u-read-more',
- mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
- data() {
- return {
- isLongContent: false,
- status: 'close',
- elId: uni.$u.guid(),
- 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 => {
-
- this.$uGetRect('.' + this.elId).then(res => {
- resolve(res.height)
- })
-
-
- const ref = this.$refs['u-read-more__content__inner']
- dom.getComponentRect(ref, (res) => {
- resolve(res.size.height)
- })
-
- })
- },
-
- toggleReadMore() {
- this.status = this.status === 'close' ? 'open' : 'close'
-
- 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>
|