Skip to content

dengwb1991/dwb-vue-drawer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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]

About

🤔Is a Strong Vue-drawer

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published