v-tag-picker

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

Usage no npm install needed!

<script type="module">
  import vTagPicker from 'https://cdn.skypack.dev/v-tag-picker';
</script>

README

v-tag-picker

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

npm npm npm

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