(vue)el-tag标签展开收起效果实现

---

效果：

收起:

展开：

---

实现方法

父组件

<el-form-item class="historay-form-item" label="历史文件"><UploadList ref="uploadListRef" />
</el-form-item><script>
import UploadList from './UploadList.vue'
export default {name: '...',components: {UploadList,},...}
</script>

子组件UploadList.vue

<template><div v-loading="loading" class="wrapper" :class="{'is-expand': isExpand}"><el-buttonclass="action-btn"plain:icon="!isExpand ? 'el-icon-arrow-down':'el-icon-arrow-up'"@click="isExpand=!isExpand">{{ isExpand ? '收起':'展开' }}</el-button><el-tag v-for="(file, index) in fileList" :key="index">{{ file.fileName }}</el-tag></div>
</template><script> 
export default { data() {return {isExpand: false,fileList: [],loading: false}}, mounted() { this.getUploadFileList()},methods: {getUploadFileList() {this.loading = truegetUploadFileList().then((res) => {this.fileList = (res.data || []).slice(0, 20)}).finally(() => {this.loading = false})}}
}
</script><style lang='scss' scoped>
.wrapper{display: flex;flex-wrap: wrap;// width: calc(100% - 200px);padding-right: 80px;margin-top: -6px;height: 32px;overflow: hidden;position: relative;.el-tag {height: 26px;line-height: 24px;margin-right: 6px;margin-top: 6px;}&.is-expand {height: fit-content;}.action-btn {position: absolute;top: 4px;right: 4px;}
}
</style>