Need private packages and team management tools?Check out npm Teams »

cutout-view

0.0.2 • Public • Published

cutout-view

this is a vue component, its help us to cut out content.

Installation

use npm

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

<cutout :show-height="800" :on="on" @on-cancel="cancel">
    <div slot="layer">
      <img src="./img/down.png" class="down-btn" @click="open">
    </div>
    
    <div slot="extra" class="extra">
      <div class="button" @click="open">
        关注作者查看全文
      </div>
    </div>
    //...content
</cutout>
  var app = new Vue({
    el: '#app',
    data: {
      on: true
    },
    methods: {
      open() {
        this.on = false;
      },
      cancel() {
        console.info('cancel cutout');
      }
    }
  })

Keywords

none

Install

npm i cutout-view

DownloadsWeekly Downloads

1

Version

0.0.2

License

none

Unpacked Size

73 kB

Total Files

15

Last publish

Collaborators

  • avatar