vue同個(gè)按鈕控制展開和折疊同個(gè)事件操作
更新時(shí)間：2020年07月29日 08:41:45 作者：指標(biāo)滿載
這篇文章主要介紹了vue同個(gè)按鈕控制展開和折疊同個(gè)事件操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
我就廢話不多說了，大家還是直接看代碼吧~
<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()//避免點(diǎn)擊兩次才生效
},
methods: {
getmoreshow(){
if(this.count%2==0){
this.moreshow=true
}else{
this.moreshow=false
}
this.count++
},
}
補(bǔ)充知識：vue 可折疊面板的工作區(qū)組件
這個(gè)組件中使用了elementui的兩個(gè)圖標(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同個(gè)按鈕控制展開和折疊同個(gè)事件操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用Vue3實(shí)現(xiàn)交互式雷達(dá)圖的代碼實(shí)現(xiàn)
雷達(dá)圖是一種可視化數(shù)據(jù)的方式,用于比較多個(gè)類別中不同指標(biāo)的相對值,它適用于需要展示多個(gè)指標(biāo)之間的關(guān)系和差異的場景,本文給大家介紹了如何用Vue3輕松創(chuàng)建交互式雷達(dá)圖,需要的朋友可以參考下2024-06-06
Vue 項(xiàng)目中使用布局組件來創(chuàng)建頁面布局的方式是完全可行的，而且在很多項(xiàng)目中都被廣泛采用，包括像 ruoyi 這樣的框架，這篇文章主要介紹了vue?layout模板頁的使用,需要的朋友可以參考下2023-08-08
使用VUE實(shí)現(xiàn)一鍵復(fù)制內(nèi)容功能
這篇文章主要介紹了使用VUE實(shí)現(xiàn)一鍵復(fù)制內(nèi)容功能,功能就是當(dāng)我們點(diǎn)擊復(fù)制按鈕時(shí)，會提示“復(fù)制成功”，這樣復(fù)制的內(nèi)容就可以在其他地方使用了，感興趣的朋友可以學(xué)習(xí)一下2023-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片滑動驗(yàn)證功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要介紹了vue resource post請求時(shí)遇到的坑,需要的朋友可以參考下2017-10-10
這篇文章主要給大家介紹了關(guān)于如何一步步基于element-ui封裝查詢組件的相關(guān)資料,本文通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue.js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-10-10
下面小編就為大家分享一篇vue.js使用代理和使用Nginx來解決跨域的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue中過濾器的作用可被用于一些常見的文本格式化,也就是修飾文本,但是文本內(nèi)容不會改變,下面這篇文章主要給大家介紹了關(guān)于VUE中filters過濾器的兩種用法,需要的朋友可以參考下2022-04-04
vue3 element plus中el-radio選中之后再次點(diǎn)擊取消選中問題
這篇文章主要介紹了vue3 element plus中el-radio選中之后再次點(diǎn)擊取消選中問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue項(xiàng)目webpack打包部署到Tomcat刷新報(bào)404錯(cuò)誤問題的解決方案
今天很郁悶，遇到這樣一個(gè)奇葩問題，使用webpack打包vue后，將打包好的文件，發(fā)布到Tomcat上，訪問成功，但是刷新后頁面報(bào)404錯(cuò)誤，折騰半天才解決好，下面小編把Vue項(xiàng)目webpack打包部署到Tomcat刷新報(bào)404錯(cuò)誤問題的解決方案分享給大家，需要的朋友一起看看吧2018-05-05