el-drawer组件封装及调用(包含动画效果)
开发项目中用到elementUI的抽屉组件,但是都没有去封装成组件并且加入动画效果,这篇文章参考其他人的文章写的,在这里只是做个记录;
界面效果参考elementui官网【网址:https://element.eleme.io/#/zh-CN/component/drawer】动画效果即可;这里就不展示了;
-
为尊重他人成果,这里是在下参考借鉴的网址:
网址 -
废话不多说,上代码并进行注释
-
以下是封装好的组件
<template>
<div class="com">
<el-drawer title="我是标题" :visible.sync="drawer_" :direction="direction" @close="handleClose">
<span>我来啦!</span>
</el-drawer>
</div>
</template>
<script>
export default {
//传值
props: {
//父组件向子组件传 drawer;这里默认会关闭状态
drawer: {
type: Boolean,
default: false,
},
//Drawer 打开的方向
direction: {
type: String,
default: 'rtl',
},
},
data() {
return {}
},
//计算属性
computed: {
drawer_: {
get() {
return this.drawer
},
//值一改变就会调用set【可以用set方法去改变父组件的值】
set(v) {
// console.log(v, 'v')
// this.$emit('changeDrawer', v)
},
},
},
methods: {
//子组件向父组件传方法,传布尔值;请求父组件关闭抽屉
handleClose() {
this.$emit('changeDrawer', false)
},
},
}
</script>
- 接下来是父组件去调用这个封装好的组件
<template>
<div>
<el-button type="primary" plain @click="handle">我是按钮</el-button>
<Task @changeDrawer="changeDrawer" :drawer="drawer" :direction="direction"></Task>
</div>
</template>
<script>
import Task from '@/components/Drawer/index.vue'
export default {
components: {
Task,
},
data() {
return {
drawer: false,
direction: 'rtl',
}
},
methods: {
changeDrawer(v) {
console.log(v, 'vvv')
this.drawer = v
},
handle() {
this.drawer = true
},
},
}
</script>
- 以上就是借鉴他人代码,并将其注释解析;主要用来做笔记
- 其实,本人是因为在调用elementUI时,一直用不了动画效果,所以才上百度搜封装好的组件,在他人的基础上,明白了自己原先写的代码存在的问题;下面将展示本人自己写的代码;有点重复,读者可不看
- 以下是我的代码:
- 父组件代码
<template>
<div>
<el-button type="primary" plain @click="handle">我是按钮</el-button>
<!-- 组件调用 -->
<Child :childVisible="childVisible" @changeDrawer="changeDrawer" />
</div>
</template>
<script>
import Child from './child.vue'
export default {
components: {
Child, //组件引入
},
data() {
return {
childVisible: false, //是否展示抽屉
}
},
methods: {
//子组件传来方法,并传了 v:false 用于关闭抽屉
changeDrawer(v) {
this.childVisible = v
},
//打开抽屉
handle() {
this.childVisible = true
},
},
}
</script>
- 子组件代码
<template>
<el-drawer title="我是Drawer" :visible="childVisible_" size="50%" @close="handleClose">
<p>_(:зゝ∠)_</p>
</el-drawer>
</template>
<script>
export default {
//传值
props: {
//父组件传 childVisible值;
childVisible: {
type: Boolean,
default: false, //这里默认为false
},
},
data() {
return {}
},
//计算属性
computed: {
childVisible_: {
get() {
console.log(this.childVisible, 'childVisible')
return this.childVisible
},
//值变化的时候会被调用
set(v) {
console.log(v, 'v')
this.$emit('changeDrawer', v)
},
},
},
methods: {
//关闭当前抽屉;触发set方法(childVisible_值改变就会调用set)
handleClose() {
this.childVisible_ = false
},
},
}
</script>
以上就是全部