Hi FE !
Ai
git
前端面试题
前端小tip
  • vite
  • webpack
npm
  • vue2
  • vue3
react
GitHub
Ai
git
前端面试题
前端小tip
  • vite
  • webpack
npm
  • vue2
  • vue3
react
GitHub
  • 展开收起详情

展开收起详情

dsc

12 要达到这种效果,我用个在vue中的实现方法。

<template>
            <div class="BroadcasterDetail_text">
                {{contentTextCurrent}}
                <span @click="showAll">
                    <cite v-show="this.contentTextBtn == '展开'">...</cite>{{contentTextBtn}}
                </span>
            </div>
</template>




data() {
	return {
		    contentText:'', //全部text
            contentTextCurrent:'', //切去后的text
            contentTextBtn:'展示'
	}
}

mounted() {
	        let len = 52;
        this.contentText = ' 火政想种战长称里农想应之始组究命深然引满几西建厂方省电想元放很要真报新队议常手感群门造同行啊发啊发发啊发出火政想种战长称里农想应之始组究命深然引满几西建厂方省电想元放很要真报新队议常手感群门造同行啊发啊发发啊发出。'

        let contentText1 = this.contentText.substring(0,len);  
        this.contentTextCurrent = contentText1
        this.contentTextBtn = '展开'
}


methods: {
	  // 点击展示收起
	showAll() {
		if(this.contentTextBtn == '展开') {
			this.contentTextBtn = '收起'
			this.contentTextCurrent = this.contentText
		} else {
			// alert(1)
			let len = 52;
			let contentText1 = this.contentText.substring(0,len);  
			this.contentTextCurrent = contentText1
			this.contentTextBtn = '展开'
		}
	},
}
Edit this page
最近更新: 2025/6/27 02:24
Contributors: qdleader
qdleader
本站总访问量 129823次 | 本站访客数 12人