VUE组件中的 Drawer 抽屉实现代码


Posted in Javascript onAugust 06, 2019

因为项目中用的是 element-ui 框架,而这个框架并没有抽屉组件,所以自己实现一个,具体代码如下:

drawer.vue

<template>
 <div class="drawer">
  <div :class="maskClass" @click="closeByMask"></div>
  <div :class="mainClass" :style="mainStyle" class="main">
   <div class="drawer-head">
    <span>{{ title }}</span>
    <span class="close-btn" v-show="closable" @click="closeByButton">X</span>
   </div>
   <div class="drawer-body">
    <slot/>
   </div>
  </div>
 </div>
</template>
<script>
export default {
 props: {
  // 是否打开
  display: {
   type: Boolean
  },
  // 标题
  title: {
   type: String,
   default: '标题'
  },
  // 是否显示关闭按钮
  closable: {
   type: Boolean,
   default: true
  },
  // 是否显示遮罩
  mask: {
   type: Boolean,
   default: true
  },
  // 是否点击遮罩关闭
  maskClosable: {
   type: Boolean,
   default: true
  },
  // 宽度
  width: {
   type: String,
   default: '400px'
  },
  // 是否在父级元素中打开
  inner: {
   type: Boolean,
   default: false
  }
 },
 computed: {
  maskClass: function () {
   return {
    'mask-show': (this.mask && this.display),
    'mask-hide': !(this.mask && this.display),
    'inner': this.inner
   }
  },
  mainClass: function () {
   return {
    'main-show': this.display,
    'main-hide': !this.display,
    'inner': this.inner
   }
  },
  mainStyle: function () {
   return {
    width: this.width,
    right: this.display ? '0' : `-${this.width}`,
    borderLeft: this.mask ? 'none' : '1px solid #eee'
   }
  }
 },
 mounted () {
  if (this.inner) {
   let box = this.$el.parentNode
   box.style.position = 'relative'
  }
 },
 methods: {
  closeByMask () {
   this.maskClosable && this.$emit('update:display', false)
  },
  closeByButton () {
   this.$emit('update:display', false)
  }
 }
}
</script>
<style lang="scss" scoped>
.drawer {
 /* 遮罩 */
 .mask-show {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgba(0,0,0,.5);
  opacity: 1;
  transition: opacity .5s;
 }
 .mask-hide {
  opacity: 0;
  transition: opacity .5s;
 }
 /* 滑块 */
 .main {
  position: fixed;
  z-index: 10;
  top: 0;
  height: 100%;
  background: #fff;
  transition: all 0.5s;
 }
 .main-show {
  opacity: 1;
 }
 .main-hide {
  opacity: 0;
 }
 /* 某个元素内部显示 */
 .inner {
  position: absolute;
 }
 /* 其他样式 */
 .drawer-head {
  display: flex;
  justify-content: space-between;
  height: 45px;
  line-height: 45px;
  padding: 0 15px;
  font-size: 14px;
  font-weight: bold;
  border-bottom: 1px solid #eee;
  .close-btn {
   display: inline-block;
   cursor: pointer;
   height: 100%;
   padding-left: 20px;
  }
 }
 .drawer-body {
  font-size: 14px;
  padding: 15px;
 }
}
</style>

组件具体使用如下:

<template>
  <div class="box">
    <el-button type="primary" @click="display = true">打开抽屉</el-button>
    <drawer title="我是一个抽屉组件" :display.sync="display" :inner="true" :width="drawerWidth" :mask="false">
      1. Hello, world!
      2. Do you like it?
    </drawer>
  </div>
</template>
<script>
import drawer from '@/components/drawer/drawer'
export default {
  components: { drawer },
  data () {
    return {
      display: false,
      drawerWidth: '500px'
    }    
  }
}
</script>

总结

以上所述是小编给大家介绍的VUE组件中的 Drawer 抽屉实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript计时器详解
Feb 28 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
Aug 24 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 Javascript
详解VUE中v-bind的基本用法
Jul 13 Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 Javascript
fetch 如何实现请求数据
Dec 20 Javascript
vue实现鼠标移入移出事件代码实例
Mar 27 Javascript
Vue指令实现OutClick的示例
Nov 16 Javascript
JS实现页面炫酷的时钟特效示例
Aug 14 Javascript
浅入深出Vue之自动化路由
Aug 06 #Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 #Javascript
微信小程序3种位置API的使用方法详解
Aug 05 #Javascript
微信小程序 高德地图路线规划实现过程详解
Aug 05 #Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 #Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 #Javascript
使用apifm-wxapi快速开发小程序过程详解
Aug 05 #Javascript
You might like
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
PHP中串行化用法示例
2016/11/16 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
Bootstrap每天必学之按钮
2015/11/26 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
百度小程序自定义通用toast组件
2019/07/17 Javascript
python自动化测试之连接几组测试包实例
2014/09/28 Python
Python通过poll实现异步IO的方法
2015/06/04 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
详解Python如何生成词云的方法
2018/06/01 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
python装饰器的特性原理详解
2019/12/25 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
详解HTML5 Canvas绘制时指定颜色与透明度的方法
2016/03/25 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
员工考核管理制度
2014/02/02 职场文书
狼和鹿教学反思
2014/02/05 职场文书
班班通校本培训方案
2014/03/12 职场文书
《故乡》教学反思
2014/04/10 职场文书
大学生英语演讲稿
2014/04/24 职场文书
民警个人对照检查剖析材料
2014/09/17 职场文书
婚前协议书范本
2014/10/27 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书
关于保护环境的建议书
2019/06/24 职场文书
java设计模式--三种工厂模式详解
2021/07/21 Java/Android
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL
MySQL学习之基础操作总结
2022/03/19 MySQL
MySQL详细讲解变量variables的用法
2022/06/21 MySQL