vue同個按鈕控制展開和折疊同個事件操作
更新時間：2020年07月29日 08:41:45 作者：指標(biāo)滿載
這篇文章主要介紹了vue同個按鈕控制展開和折疊同個事件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
我就廢話不多說了，大家還是直接看代碼吧~
<el-button :icon="!moreshow?'el-icon-arrow-down':'el-icon-arrow-up'" @click="getmoreshow">{{!moreshow?更多:隱藏}}</el-button>
data() {
return {
moreshow:false,
count:1,
}
}
mounted() {
this.getmoreshow()//避免點擊兩次才生效
},
methods: {
getmoreshow(){
if(this.count%2==0){
this.moreshow=true
}else{
this.moreshow=false
}
this.count++
},
}
補充知識：vue 可折疊面板的工作區(qū)組件
這個組件中使用了elementui的兩個圖標(biāo)
組件Js：
Vue.component('work-container', {
props: ['height'],
data: function () {
return {
isCollapse: false
}
},
computed: {
topbarcssobj: function () {
var obj = { padding: '3px' };
if (this.isCollapse) {
obj.display = 'none';
}
else {
obj.display = 'block';
if (this.height) {
obj.height = this.height + 'px';
} else {
obj.height = '40px';
}
}
return obj;
},
btniconcssobj: function () {
return this.isCollapse ? 'el-icon-caret-bottom' : 'el-icon-caret-top';
},
strview: function () {
return this.isCollapse ? '顯示' : '隱藏';
}
},
methods: {
togglebar: function () {
this.isCollapse = !this.isCollapse;
}
},
template: '<el-container>\
<el-header v-bind:style="topbarcssobj">\
<slot name="tbar"></slot>\
</el-header>\
<el-main>\
<div style="margin:3px;">\
<div style="float:left;margin-right:10px;cursor:pointer;color: #d3dce6;display:none;" v-on:click="togglebar">\
<i v-bind:class="btniconcssobj">{{strview}}查詢條件</i>\
</div>\
<div>\
<slot name="btn"></slot>\
</div>\
</div>\
<div>\
<slot name="work"></slot>\
</div>\
</el-main>\
</el-container>'
});
調(diào)用：
<script src="~/Scripts/vue/workcontainer.js"></script>
<work-container v-bind:height="80">
<template v-slot:tbar>
<spec-combo v-on:selectspec="setSpec"></spec-combo>
<ban-input v-on:selectban="setBan"></ban-input>
<grade-input v-on:selectban="setGrade"></grade-input>
</template>
<template v-slot:work>
{{spec}}
{{ban}}
{{grade}}
</template>
</work-container>
以上這篇vue同個按鈕控制展開和折疊同個事件操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用Vue3實現(xiàn)交互式雷達圖的代碼實現(xiàn)
雷達圖是一種可視化數(shù)據(jù)的方式,用于比較多個類別中不同指標(biāo)的相對值,它適用于需要展示多個指標(biāo)之間的關(guān)系和差異的場景,本文給大家介紹了如何用Vue3輕松創(chuàng)建交互式雷達圖,需要的朋友可以參考下2024-06-06
Vue 項目中使用布局組件來創(chuàng)建頁面布局的方式是完全可行的，而且在很多項目中都被廣泛采用，包括像 ruoyi 這樣的框架，這篇文章主要介紹了vue?layout模板頁的使用,需要的朋友可以參考下2023-08-08
使用VUE實現(xiàn)一鍵復(fù)制內(nèi)容功能
這篇文章主要介紹了使用VUE實現(xiàn)一鍵復(fù)制內(nèi)容功能,功能就是當(dāng)我們點擊復(fù)制按鈕時，會提示“復(fù)制成功”，這樣復(fù)制的內(nèi)容就可以在其他地方使用了，感興趣的朋友可以學(xué)習(xí)一下2023-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)圖片滑動驗證功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要介紹了vue resource post請求時遇到的坑,需要的朋友可以參考下2017-10-10
這篇文章主要給大家介紹了關(guān)于如何一步步基于element-ui封裝查詢組件的相關(guān)資料,本文通過示例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用vue.js具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2021-10-10
下面小編就為大家分享一篇vue.js使用代理和使用Nginx來解決跨域的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue中過濾器的作用可被用于一些常見的文本格式化,也就是修飾文本,但是文本內(nèi)容不會改變,下面這篇文章主要給大家介紹了關(guān)于VUE中filters過濾器的兩種用法,需要的朋友可以參考下2022-04-04
vue3 element plus中el-radio選中之后再次點擊取消選中問題
這篇文章主要介紹了vue3 element plus中el-radio選中之后再次點擊取消選中問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue項目webpack打包部署到Tomcat刷新報404錯誤問題的解決方案
今天很郁悶，遇到這樣一個奇葩問題，使用webpack打包vue后，將打包好的文件，發(fā)布到Tomcat上，訪問成功，但是刷新后頁面報404錯誤，折騰半天才解決好，下面小編把Vue項目webpack打包部署到Tomcat刷新報404錯誤問題的解決方案分享給大家，需要的朋友一起看看吧2018-05-05