VUE组件之 Drawer 抽屉

一、源码地址

https://github.com/imxiaoer/DrawerForVue

二、效果图

三、具体代码

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.parentNodebox.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 抽屉相关推荐

vue抽屉_VUE组件之 Drawer 抽屉
{{ title }} X props: {//是否打开 display: { type: Boolean },//标题 title: { type: String,default: '标题'},// ...
vue抽屉_VUE组件中的 Drawer 抽屉实现代码
因为项目中用的是 element-ui 框架,而这个框架并没有抽屉组件,所以自己实现一个,具体代码如下: drawer.vue {{ title }} x export default { props ...
引用element-ui的Drawer抽屉组件报错问题
引用element-ui的Drawer抽屉组件报错问题 **前提:**vue项目采取按需引入的方式引入element,并且使用其他组件都正常,没有发生异常问题表现: 在vue项目中引用了Drawer ...
Flutter学习笔记（18）--Drawer抽屉组件
如需转载,请注明出处:Flutter学习笔记(18)--Drawer抽屉组件 Drawer(抽屉组件)可以实现类似抽屉拉出和推入的效果,可以从侧边栏拉出导航面板.通常Drawer是和ListView组 ...
Element-UI中Drawer抽屉去除标题自带蓝色框
当点击事件drawer==true时,抽匣回打开这时抽匣的标题会出现一个难看的蓝色边框,一会就会消失,但是好丑,所以要去掉它解决方法 /deep/ :focus {outline: 0;} vue ...
webAPP如何实现移动端拍照上传（Vue组件示例）？
摘要:使用HTML5编写移动Web应用,主要是为了尝试一下"一套代码多处运行",一个webapp几乎可以不加修改的运行在PC/Android/iOS等上面运行.但是写到现在觉得虽然 ...
vue组件引入scss变量_SCSS特色的Vue.js ui组件设计系统
vue组件引入scss变量 Kotti设计系统 (Kotti Design System) This design system helps to unify our design language ...
Vue组件绑定自定义事件
Vue组件使用v-on绑定自定义事件: 可以分为3步理解: 1.在组件模板中按照正常事件机制绑定事件: template: '<button v-on:click="increment ...
vue组件定义、组件的切换、组件的通信、渲染组件的几种方式（标签、路由、render）...
vue中全局的概念是什么?---就是全局定义的功能,所有实例化的vm都可以使用, 全局定义的是挂在构造函数Vue上面的,所以实例化出的对象都可以使用这个功能 1.什么是组件?---从UI的角度把页面 ...

VUE组件之 Drawer 抽屉

VUE组件之 Drawer 抽屉相关推荐

最新文章

热门文章

VUE组件 之 Drawer 抽屉

VUE组件 之 Drawer 抽屉相关推荐

最新文章

热门文章

VUE组件之 Drawer 抽屉

VUE组件之 Drawer 抽屉相关推荐