https://github.com/anthinkingcoder/cutout-view
cutout content
https://github.com/anthinkingcoder/cutout-view
Last synced: 4 months ago
JSON representation
cutout content
- Host: GitHub
- URL: https://github.com/anthinkingcoder/cutout-view
- Owner: anthinkingcoder
- Created: 2018-07-22T14:47:58.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-07-23T06:06:43.000Z (over 7 years ago)
- Last Synced: 2025-03-31T14:45:24.399Z (8 months ago)
- Language: Vue
- Homepage:
- Size: 154 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# cutout-view
> this is a vue component, its help us to cut out content.
## Installation
use npm
```bash
npm i cutout-view --save
import cutout from 'cutout-view'
Vue.use(cutout)
```
## cutout Component
### props
| param | description | type | default |
| :-: | :-: | :-: | :-: |
| show-height | show content height,require, show-height not greater than content height and not less than layer-height。if the show-height valid error, will emitter @on-cancel | Number,String | 0 |
| on | if false, the cutout will be canceled,emitter @on-cancel | Boolean | true |
| layer-height | the bottom layer height | Number,String | 80px |
### events
| name | description | return value |
| :-: | :-: | :-: |
| on-cancel | Emitted when cutout is canceled| return false |
### slot
| name | description|
| :-: | :-: |
| layer | the layer area content |
| extra | extra content, at the bottom of the layer area|
## example
> see [live demo](https://jsfiddle.net/anthinkingcoder/c4guaq1n)
```html
//...content
```
```javascript
var app = new Vue({
el: '#app',
data: {
on: true
},
methods: {
open() {
this.on = false;
},
cancel() {
console.info('cancel cutout');
}
}
})
```