關(guān)于element Drawer抽屜的使用
更新時(shí)間：2024年07月24日 10:49:10 作者：大橙子額
這篇文章主要介紹了關(guān)于element Drawer抽屜的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
element Drawer 抽屜的使用
之前沒有這個(gè)組件的時(shí)候是直接把dialog的樣式改了，改成了側(cè)彈窗的形式，element升級(jí)后就改成了Drawer 抽屜組件。
場景
Drawer 的關(guān)閉動(dòng)畫沒有了。
代碼如下：
<el-drawer title="我是標(biāo)題" v-if="drawer" :visible.sync="drawer" :before-close="handleClose"> <span>我來啦!</span> </el-drawer>
<script>
export default {
data() {
return {
drawer: false,
direction: 'rtl',
};
},
methods: {
handleClose(done) { //使用before-close會(huì)暫停 Drawer 的關(guān)閉
this.$confirm('確認(rèn)關(guān)閉？')
.then(_ => {
done();
})
.catch(_ => {});
}
}
};
</script>原因：使用了v-if控制Drawer 的顯示
解決：去掉v-if，但是去掉v-if之后，drawer就和app同級(jí)了，樣式包裹在頁面的class里就沒用
visible.sync和v-if、v-show
visible.sync：雙向綁定值。
- 初始情況下通過該值控制 dialog顯示。dialog關(guān)閉的時(shí)候，element自動(dòng)設(shè)置該值為false。
- 當(dāng)子組件執(zhí)行 close 事件的時(shí)候，不僅改變了自己內(nèi)部的 isShow 的值，而且還將 父組件的 visible的狀態(tài)發(fā)生了改變.
v-if 指令用于條件性地渲染一塊內(nèi)容。
- 這塊內(nèi)容只會(huì)在指令的表達(dá)式返回 truthy 值的時(shí)候被渲染。
- v-if 是“真正”的條件渲染，因?yàn)樗鼤?huì)確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建。
- v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r(shí)，才會(huì)開始渲染條件塊。
v-show 就簡單得多
- 不管初始條件是什么，元素總是會(huì)被渲染，并且只是簡單地基于 CSS 進(jìn)行切換。
- 一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。
visible.sync和v-if、v-show的使用場景
- 如果需要非常頻繁地切換，則使用 v-show 較好；如果在運(yùn)行時(shí)條件很少改變，則使用 v-if 較好。但是父子組件，在子組件 close 方法中,雖然已經(jīng)將 isShow 改變?yōu)?false，但是并沒有通知到 父組件，而在父組件中，控制彈出框的現(xiàn)實(shí)和隱藏是通過 show 。點(diǎn)擊子組件的關(guān)閉按鈕時(shí)，父組件的 show 沒有發(fā)生改變，這時(shí)候需要用visible.sync。
- Vue 會(huì)盡可能高效地渲染元素，通常會(huì)復(fù)用已有元素而不是從頭開始渲染。因此，想要重新渲染可以添加一個(gè)具有唯一值的 key 屬性
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
基于vue實(shí)現(xiàn)一個(gè)神奇的動(dòng)態(tài)按鈕效果
今天我們將利用vue的條件指令來完成一個(gè)簡易的動(dòng)態(tài)變色功能按鈕,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-05-05
在Vue.js項(xiàng)目中,ref是一個(gè)非常有用的功能,它可以用來獲取DOM元素或子組件的實(shí)例引用,通過ref,我們可以在父組件中直接操作子組件的方法和屬性,或者對(duì)DOM元素進(jìn)行直接操作,本文將詳細(xì)介紹如何在Vue中動(dòng)態(tài)添加ref,并通過多個(gè)具體的代碼示例來幫助讀者理解其實(shí)現(xiàn)過程2024-10-10
Vue3實(shí)現(xiàn)AI流式打字機(jī)的完整解決方案
本文介紹了基于MessageChannel實(shí)現(xiàn)Vue AI流式對(duì)話的方案,通過SSE流式解析、時(shí)間切片、任務(wù)隊(duì)列等技術(shù),實(shí)現(xiàn)了非阻塞UI渲染和完美處理分包粘包問題,同時(shí)提供了一套可復(fù)用的Hook,并進(jìn)行了詳細(xì)的對(duì)比分析,需要的朋友可以參考下2026-04-04
基于vue3實(shí)現(xiàn)一個(gè)抽獎(jiǎng)小項(xiàng)目
在公司年會(huì)期間我做了個(gè)抽獎(jiǎng)小項(xiàng)目，非常棒，今天把他分享到腳本之家平臺(tái)，供大家學(xué)習(xí)參考，對(duì)vue3實(shí)現(xiàn)抽獎(jiǎng)小項(xiàng)目感興趣的朋友一起看看吧2023-01-01
這篇文章主要為大家詳細(xì)介紹了Vue3實(shí)現(xiàn)簡易音樂播放器組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了vue3+vite使用jsx和tsx詳情，文章通過安裝@vitejs/plugin-vue-jsx展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-05-05
前端Vue.js實(shí)現(xiàn)json數(shù)據(jù)導(dǎo)出到doc
這篇文章主要介紹了前端Vue.js實(shí)現(xiàn)json數(shù)據(jù)導(dǎo)出到doc，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
vue自定義指令(2.x丨3.x)可以幫助我們實(shí)現(xiàn)需要操作，比如防抖、節(jié)流、懶加載、輸入框自動(dòng)聚焦等等，使用起來非常方便，比如vue自帶的v-text、v-html、v-show、v-if等等,這篇文章主要介紹了vue2.x與vue3.x中自定義指令詳解,需要的朋友可以參考下2022-12-12
Vue + CSS實(shí)現(xiàn)漸變柵格進(jìn)度條效果
基于Vue和CSS實(shí)現(xiàn)漸變柵格進(jìn)度條,通過劃分柵格單元、顏色漸變、標(biāo)簽與刻度的絕對(duì)定位來實(shí)現(xiàn)高度靈活和交互性,進(jìn)度條劃分為多個(gè)柵格,每個(gè)單元格顏色漸變并且連續(xù),可以根據(jù)不同的場景配置個(gè)性化屬性,具有極高的靈活度和交互性,感興趣的朋友一起看看吧2025-03-03
這篇文章主要介紹了vue如何監(jiān)聽瀏覽器主動(dòng)刷新，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04