关于element Drawer抽屉的使用
更新时间：2024年07月24日 10:49:10 作者：大橙子额
这篇文章主要介绍了关于element Drawer抽屉的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
element Drawer 抽屉的使用
之前没有这个组件的时候是直接把dialog的样式改了，改成了侧弹窗的形式，element升级后就改成了Drawer 抽屉组件。
场景
Drawer 的关闭动画没有了。
代码如下：
<el-drawer title="我是标题" 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会暂停 Drawer 的关闭
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {});
}
}
};
</script>原因：使用了v-if控制Drawer 的显示
解决：去掉v-if，但是去掉v-if之后，drawer就和app同级了，样式包裹在页面的class里就没用
visible.sync和v-if、v-show
visible.sync：双向绑定值。
- 初始情况下通过该值控制 dialog显示。dialog关闭的时候，element自动设置该值为false。
- 当子组件执行 close 事件的时候，不仅改变了自己内部的 isShow 的值，而且还将 父组件的 visible的状态发生了改变.
v-if 指令用于条件性地渲染一块内容。
- 这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
- v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
- v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
v-show 就简单得多
- 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
- 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
visible.sync和v-if、v-show的使用场景
- 如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。但是父子组件，在子组件 close 方法中,虽然已经将 isShow 改变为 false，但是并没有通知到 父组件，而在父组件中，控制弹出框的现实和隐藏是通过 show 。点击子组件的关闭按钮时，父组件的 show 没有发生改变，这时候需要用visible.sync。
- Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。因此，想要重新渲染可以添加一个具有唯一值的 key 属性
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
今天我们将利用vue的条件指令来完成一个简易的动态变色功能按钮,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2019-05-05
在Vue.js项目中,ref是一个非常有用的功能,它可以用来获取DOM元素或子组件的实例引用,通过ref,我们可以在父组件中直接操作子组件的方法和属性,或者对DOM元素进行直接操作,本文将详细介绍如何在Vue中动态添加ref,并通过多个具体的代码示例来帮助读者理解其实现过程2024-10-10
本文介绍了基于MessageChannel实现Vue AI流式对话的方案,通过SSE流式解析、时间切片、任务队列等技术,实现了非阻塞UI渲染和完美处理分包粘包问题,同时提供了一套可复用的Hook,并进行了详细的对比分析,需要的朋友可以参考下2026-04-04
在公司年会期间我做了个抽奖小项目，非常棒，今天把他分享到脚本之家平台，供大家学习参考，对vue3实现抽奖小项目感兴趣的朋友一起看看吧2023-01-01
这篇文章主要为大家详细介绍了Vue3实现简易音乐播放器组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要介绍了vue3+vite使用jsx和tsx详情，文章通过安装@vitejs/plugin-vue-jsx展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-05-05
这篇文章主要介绍了前端Vue.js实现json数据导出到doc，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
vue自定义指令(2.x丨3.x)可以帮助我们实现需要操作，比如防抖、节流、懒加载、输入框自动聚焦等等，使用起来非常方便，比如vue自带的v-text、v-html、v-show、v-if等等,这篇文章主要介绍了vue2.x与vue3.x中自定义指令详解,需要的朋友可以参考下2022-12-12
基于Vue和CSS实现渐变栅格进度条,通过划分栅格单元、颜色渐变、标签与刻度的绝对定位来实现高度灵活和交互性,进度条划分为多个栅格,每个单元格颜色渐变并且连续,可以根据不同的场景配置个性化属性,具有极高的灵活度和交互性,感兴趣的朋友一起看看吧2025-03-03
这篇文章主要介绍了vue如何监听浏览器主动刷新，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论