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函数的等价原生函数代码示例
May 27 Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 Javascript
JavaScript判断是否为数组的3种方法及效率比较
Apr 01 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
Sep 02 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 Javascript
JSONP跨域请求
Mar 02 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
Oct 11 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
May 07 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
Dec 10 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
PHP5.0对象模型探索之抽象方法和抽象类
2006/09/05 PHP
用PHP实现小型站点广告管理(修正版)
2006/10/09 PHP
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
WordPres对前端页面调试时的两个PHP函数使用小技巧
2015/12/22 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
小程序绑定用户方案优化小结
2019/05/15 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
tensorflow 打印内存中的变量方法
2018/07/30 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
python 求1-100之间的奇数或者偶数之和的实例
2019/06/11 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
python主线程与子线程的结束顺序实例解析
2019/12/17 Python
Python 去除字符串中指定字符串
2020/03/05 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
C语言中break与continue的区别
2012/07/12 面试题
高中政治教学反思
2014/01/18 职场文书
日语专业个人求职信范文
2014/02/02 职场文书
篝火晚会主持词
2014/03/25 职场文书
班级学习计划书
2014/04/27 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
入党积极分子群众意见
2015/06/01 职场文书
施工安全责任协议书
2016/03/23 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python