[JavaScript知识库]2021-08-05

el-drawer组件封装及调用（包含动画效果）

开发项目中用到elementUI的抽屉组件，但是都没有去封装成组件并且加入动画效果，这篇文章参考其他人的文章写的，在这里只是做个记录；
界面效果参考elementui官网【网址：https://element.eleme.io/#/zh-CN/component/drawer】动画效果即可；这里就不展示了；

1. 为尊重他人成果，这里是在下参考借鉴的网址：
   网址

2. 废话不多说，上代码并进行注释

3. 以下是封装好的组件

<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>

3. 接下来是父组件去调用这个封装好的组件

<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>

4. 以上就是借鉴他人代码，并将其注释解析；主要用来做笔记
5. 其实，本人是因为在调用elementUI时，一直用不了动画效果，所以才上百度搜封装好的组件，在他人的基础上，明白了自己原先写的代码存在的问题；下面将展示本人自己写的代码；有点重复，读者可不看
6. 以下是我的代码：
7. 父组件代码

<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>

8. 子组件代码

<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>

以上就是全部