前端文字描述太长,折叠与展开或隐藏

513 阅读1分钟

1.折叠与展开描述

expand为展示描述信息,当描述信息太长时折叠描述,同时可以点击按钮,展开描述

  <div v-if="!expanded">{{ videoDescription.substring(0, 20) }}...</div>
  <div v-else>{{ videoDescription }}</div>
  <button @click="toggleExpanded">
    {{ expanded ? '收起' : '展开' }}
  </button>
  
// 判断展示文字<script>
const expanded = ref(false)
const toggleExpanded = () => {
  expanded.value = !expanded.value
}

// 给button添加颜色
button {
  color: blue;
  cursor: pointer;
}

2.表格文字太长-隐藏部分

文字超过15个字时,隐藏起来,防止表格被撑得很大

  <el-table-column
    label="描述"
    align="center"
    prop="desc"
    :formatter="truncateDesc"
  />
        
 <script>
 /**列表文字超出 */
const truncateDescription = (row) => {
  if (row.desc !== null && row.desc.length > 15) {
    return row.desc.substring(0, 15) + '...'
  }
  return row.desc
}
 </script>