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

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>
  1. 接下来是父组件去调用这个封装好的组件
<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>
  1. 以上就是借鉴他人代码,并将其注释解析;主要用来做笔记
  2. 其实,本人是因为在调用elementUI时,一直用不了动画效果,所以才上百度搜封装好的组件,在他人的基础上,明白了自己原先写的代码存在的问题;下面将展示本人自己写的代码;有点重复,读者可不看
  3. 以下是我的代码:
  4. 父组件代码
<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>
  1. 子组件代码
<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>

以上就是全部

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值