<template>
<div class="select-box">
<div class="select-box-top">
<label>项目名称</label>
<span v-if="isShowNameType" @click="handleIsShowNameType">展开</span>
<span v-if="!isShowNameType" @click="handleIsShowNameType">收起</span>
</div>
<ul class="select-list" :style="isShowNameType ? activeNameStyle : showNameStyle" style="width:400px;list-style:none;border: 1px solid red;height: 400px;">
<li @click="selectNameType(index, item)" v-for="(item, index) in proNameList"
:class="activeNameIndex == index ? 'active' : ''" :key="index" style="height:0px 30px 30px 30px;width:100px;background:pink;display: block;float: left;margin:5px;">
{{ item.project_name }}
</li>
</ul>
<h2>
标题标题
</h2>
</div>
</template>
<script>
// import { defineComponent } from '@vue/composition-api'
export default {
data() {
return {
activeNameStyle: 'height: 1.44rem; overflow: hidden;',
showNameStyle: 'min-height: 1.44rem;',
isShowNameType: true,
activeNameIndex: null,
proNameList: [{
project_id: 1,
project_name: "初始项目"
},
{
project_id: 1,
project_name: "初始项目"
},
{
project_id: 1,
project_name: "初始项目"
},
{
project_id: 1,
project_name: "初始项目"
},
{
project_id: 1,
project_name: "初始项目"
},
{
project_id: 1,
project_name: "初始项目"
},
{
project_id: 1,
project_name: "初始项目"
},
{
project_id: 1,
project_name: "初始项目"
},
{
project_id: 1,
project_name: "初始项目"
},
{
project_id: 1,
project_name: "初始项目"
}
]
}
},
methods: {
handleIsShowNameType() {
this.isShowNameType = !this.isShowNameType;
},
selectNameType(index, item) {
this.activeNameIndex = index;
},
}
}
</script>
vue实现展开收起
最新推荐文章于 2023-02-21 13:46:41 发布