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 相关文章推荐
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
javascript拖拽上传类库DropzoneJS使用方法
Dec 05 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
11种ASP连接数据库的方法
Sep 18 Javascript
angular和BootStrap3实现购物车功能
Jan 25 Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
微信小程序实现图片上传功能
May 28 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
JavaScript实现拖拽盒子效果
Feb 06 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 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
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
react redux入门示例
2018/04/19 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
python提示No module named images的解决方法
2014/09/29 Python
介绍Python中的fabs()方法的使用
2015/05/14 Python
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
python使用列表的最佳方案
2020/08/12 Python
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
SQL Server数据库笔试题和答案
2016/02/04 面试题
大四本科生的自我评价
2013/12/30 职场文书
旺仔牛奶广告词
2014/03/20 职场文书
汽车维修专业自荐书
2014/05/26 职场文书
五五普法心得体会
2014/09/04 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
雷锋之歌观后感
2015/06/10 职场文书
回门宴新娘答谢词
2015/09/29 职场文书