v-tag-picker

v-tag-picker

A cool mobile component of tag picker width vue.js 中文文档

Introduction

DEMO

Screenshot

Install

npm i v-tag-picker -S

Usage

// global
import vTagPicker from 'v-tag-picker'

Vue.use(vTagPicker)

// component
import { vTagPicker } from 'v-tag-picker'

components: {
  vTagPicker
}

<v-tag-picker
  :totalData="tagData"
  :selectedData="selectedData"
  @change="change"
>
  <div class="img-wrap" slot="top">
    <img class="" src="~@/examples/assets/tagbg.png" alt="">
    <div class="img-wrap__title">最感兴趣的栏目</div>
    <div class="img-wrap__subtitle">定制专属于我的课程栏目</div>
  </div>

  <div class="footer" slot="footer">
    <a href="/">进入首页</a>
  </div>
</v-tag-picker>

Props

Name	Type	Default	Description
zIndex	Number		tag-picker z-index
totalData	Array	[]	picker list data,Must has name key. [{ name: 'tag' }]
selectedData	Array	[]	Selected list
animationDuration	Number	500	Animation time(ms).
onlyKey	String	name	Unique identifier for each item of data
appendToBody	Boolean	name	append to body element

Events

Name	Description	return
change	Selected data change	Selected data

slot

Name	Description
top	In front of the list
footer	bottom page

License

MIT © JakeLaoyu