dwb-vue-drawer

Install

npm i dwb-vue-drawer --save

Mount

mount with global

import Vue from 'vue'
import Drawer from 'dwb-vue-drawer'

Vue.use(Drawer)

mount with component

import { DwbVueDrawer } from 'dwb-vue-drawer'

export default {
  components: {
    DwbVueDrawer
  }
}

Props

Attribute | Type | Default | Description --- | --- | --- | --- visible | boolean | false | visibility of Drawer, supports the .sync modifier position | string | bottom | pop-up direction lockScroll | boolean | true | whether scroll of body is disabled while Drawer is displayed maskClosable | boolean | true | whether hide the component when clicked the mask layer zIndex | number | 100 | the value of the style z-index maskStyle | object | - | custom style of mask containerStyle | object | - | container style of container

Events

Attribute | Value | Description ---- | --- | --- open | - | drawer open callback close | - | drawer close callback

Methods

Attribute | Value | Description ---- | --- | --- open | - | open method close | - | close method

Demo

<template>
    <DwbVueDrawer :visible.sync="visible"
            :position="position"
            :lockScroll="lockScroll"
            :maskClosable="maskClosable"
            :zIndex="zIndex"
            :maskStyle="maskStyle"
            :containerStyle="containerStyle"
            @open="open"
            @close="close">
      <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
      </ul>
    </DwbVueDrawer>
</template>
<script>
export default {
  data () {
    return {
      visible: false,
      position: 'bottom',
      lockScroll: true,
      maskClosable: true,
      zIndex: 200,
      maskStyle: {
        backgroundColor: 'rgba(0, 0, 0, 0.7)'
      },
      containerStyle: {
        background: '#F5F5F5'
      }
    }
  },
  methods: {
    show (position) {
      this.position = position
      this.visible = true
    },
    open () {
      console.log('open callback')
    },
    close () {
      console.log('close callback')
    }
  }
}
</script>

Example

npm install

npm run dev

[Dwb Vue Drawer]

Author

[Dengwb]