v-tag-picker
A cool mobile component of tag picker width vue.js 中文文档
Introduction
Screenshot
Install
npm i v-tag-picker1 -S
Usage
// global
import vTagPicker from 'v-tag-picker1'
Vue.use(vTagPicker)
// component
import { vTagPicker } from 'v-tag-picker1'
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