关于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.js开发实现全局调用的MessageBox组件实例代码
最近学习了Vue.js，感觉组件这个地方知识点挺多的，而且很重要，所以决定记录下，下面这篇文章主要给大家介绍了关于利用vue.js开发实现全局调用的MessageBox组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。2017-11-11
这篇文章主要介绍了关于vant的日历组件,在iPhonex上可选日期空白，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
基于前端VUE+ElementUI实现table行上移或下移功能(支持跨页移动)
有时候需要前端实现上移和下移功能,下面这篇文章主要给大家介绍了关于如何基于前端VUE+ElementUI实现table行上移或下移(支持跨页移动)的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-07-07
vue项目报错:Missing script:"serve"的解决办法
这篇文章主要给大家介绍了关于vue项目报错:Missing script:"serve"的解决办法,"missing script: serve"是一个错误信息,意味着在执行启动脚本时,找不到名为"serve"的脚本,需要的朋友可以参考下2023-11-11
这篇文章主要为大家介绍了Vue3 如何通过虚拟DOM更新页面详解,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了vue通过笛卡儿积实现sku库存配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
Vue实现登录保存token并校验实现保存登录状态的操作代码
这篇文章主要介绍了Vue实现登录保存token并校验实现保存登录状态,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-02-02
这篇文章主要介绍了vue跳转方式（打开新页面）及传参操作,结合实例形式分析了vue.js跳转实现方式与参数接受相关操作技巧,需要的朋友可以参考下2020-01-01
今天小编就为大家分享一篇Vue-不允许嵌套式的渲染方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue3中的模板语法和vue指令,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
最新评论