<template>
    <view class="overflow-hidden overflow-text" :style="{ width, '-webkit-line-clamp': clamp}">
        <text class="content" :style="{ color, lineHeight: `${lineHeight}rpx`, fontSize: `${size}rpx`}">{{ content }}</text>
        <view v-if="more" :class="['btn-text', { 'btn-visible': expandStaus}]" @click.stop="onToggle">
            {{ expandStaus ? '收起' : '展開(kāi)' }}
        </view>
    </view>
</template>

<script>
    export default {
        name: "c-read-more",
        props: {
            content: {
                type: String,
                default: ''
            },
            width: {
                type: String,
                default: '100%'
            },
            lineClamp: {
                type: [String, Number],
                default: 2
            },
            lineHeight: {
                type: [String, Number],
                default: 1
            },
            size: {
                // 單位 rpx
                type: [String, Number],
                default: 26
            },
            color: {
                type: String,
                default: '#989797'
            },

        },
        data() {
            return {
                expandStaus: false,
                clamp: this.lineClamp,
                more: false
            };
        },
        mounted() {
            this.$nextTick(async () => {
                const {
                    height: cHeight
                } = await this.$uGetRect('.content')
                const {
                    height: fHeight
                } = await this.$uGetRect('.overflow-hidden')
                this.more = cHeight > fHeight
            })
        },
        methods: {
            onToggle() {
                this.expandStaus = !this.expandStaus
                if (this.expandStaus) {
                    this.clamp = 1000
                } else {
                    this.clamp = this.lineClamp
                }
                this.$emit('toggle', this.expandStaus)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .overflow-hidden {
        display: -webkit-box;
        word-break: break-all;
        white-space: normal;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .overflow-text {
        position: relative;
        box-sizing: border-box;
    }

    .btn-text {
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 2;
        background-color: #fff;
        color: #FFAD2B;
        padding-left: 0.25rem;
        font-size: 26rpx;

        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: -1.5rem;
            height: 100%;
            width: 1.5rem;
            background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.5) 10%, #fff);
            pointer-events: none;
        }

        &.btn-visible {
            display: inline-block;
            position: static;
            padding-left: 0;
        }
    }
</style>

效果圖