Vue2 强大的标签选择器组件 – v-selectpage

Vue2 强大的标签选择器组件 – v-selectpage

插件名称:v-selectpage

发布时间:2020年7月18日

插件作者:TerryZ

中文官网 演示 GitHub下载

Vue2的强大标签选择器,支持多重选择,列表或表视图,i18n和服务器端渲染。

安装和下载:

# NPM
$ npm install v-selectpage --save

在项目入口main.js中引入插件

// 使用v-selectpage作为插件
import Vue from 'vue'
import vSelectPage from 'v-selectpage'
Vue.use(vSelectPage, {
  // server side data loader
  dataLoad: function(vue, data, params){
    return new Promise((resolve, reject)=>{
      axios.post(url, params).then(resp => resolve(resp), resp => reject(resp))
    })
  }
})

// 使用v-selectpage作为组件
import Vue from 'vue'
import { SelectPage } from 'v-selectpage'
// 组件
export default {
  components: {
    'v-selectpage': SelectPage
  }
}

可在插件注册时进行全局配置的参数

  • title
  • language
  • placeholder
  • pageSize
  • dataLoad
  • rtl

在页面 / 模块中使用

<template>
  <v-selectpage :data="list" key-field="id" show-field="name" >
  </v-selectpage>
</template>

<script>
export default {
  data () {
    return {
      list: [
        { id:1, name: 'Chicago Bulls', desc: '芝加哥公牛' },
        { id:2, name: 'Cleveland Cavaliers', desc: '克里夫兰骑士' },
        { ... }
      ]
    }
  }
}
</script>
相关插件