hfex-ellipsis v1.1.0

HfexEllipsis

多行文本展开与收起

安装使用

npm安装

npm i hfex-ellipsis

vue组件引入(Vue3)

<HfexEllipsis
    :text="text"
    :max-lines="5"
>
    <template v-slot:default="{clickToggle, expanded}">
        <span
            class="expand-text"
            @click="clickToggle"
        >{{ expanded ? '收起' : '阅读全文' }}
        </span>
    </template>
</HfexEllipsis>

<script setup lang="ts">
import HfexEllipsis from 'hfex-ellipsis'

const text = 'HfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsis';

<script/>

vue组件引入(Vue2)

<HfexEllipsis
    :text="text"
    :max-lines="5"
>
    <template v-slot:default="{clickToggle, expanded}">
        <span
            class="expand-text"
            @click="clickToggle"
        >{{ expanded ? '收起' : '阅读全文' }}
        </span>
    </template>
</HfexEllipsis>
```js
import HfexEllipsis from 'hfex-ellipsis/dist/vue2/esm'
export default {
    data(){
        return{
            text:'HfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsisHfexEllipsis'
        }
    },
    components:{
        HfexEllipsis
    }
}

props

截图示例