我用的是原生js的方式,如果有更好的方式,评论留言哦~
<template>
<div class="content">
<div class="content-show">
<div class="c-title">{{datainfo.title}}</div>
<div class="c-detail" v-html="datainfo.body" @click="toggleDetail"></div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
datainfo:{}
}
},
methods:{
toggleDetail(e){
let items = document.querySelectorAll('.collapse-item'),
itemWraps = document.querySelectorAll('.item_wrap');
var el = e.target.nextElementSibling;
if(el.classList.contains('item_wrap')){
el.style.display = el.style.display=="none"?"block":"none";
}
},
getAboutInfo(id){
this.datainfo=''
this.$api.getAboutPt(id).then((res)=>{
if(res.data &&res.data.length){
this.datainfo=res.data[0];
this.$nextTick(()=>{
if(id=='10'){
let items = document.querySelectorAll('.collapse-item'),
itemWraps = document.querySelectorAll('.item_wrap');
itemWraps.forEach((ele, index) => {
ele.style.display = 'none';
});
itemWraps[0].style.display="block";
}
})
}
})
}
}
}
</script>
<style lang="scss" scoped>
.content{
min-height: 500px;
&.right-content{
margin-left: 350px;
}
.content-show{
color: #333;
.c-title{
font-size: 20px;
padding: 30px 0;
}
}
}
</style>
代码如上
实现效果:
代码具体作用:
另附一下dom元素结构
需要注意:
新插入的dom在<style lang="scss" scoped></style>中写的样式不起作用,可以去掉scoped限制或者从main.js中引入样式表进行样式覆盖。
样式比较简陋,可按需修改
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。