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');
      }
    }
  })