Have ideas to improve npm?Join in the discussion! »

    @lawrence_ch/vue-listview
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    Vue Listview

    Build Status codecov npm

    Vue Listview 是一个基于 Vue.jsElement-UI ,可用于生成列表类的页面布局组件。

    界面预览:

    预览

    默认为表格类列表页,也可通过 Slot 实现自定义列表布局。

    文档 & Demo

    安装

    yarn add @lawrence_ch/vue-listview element-ui
     
    # OR 
     
    npm i -S @lawrence_ch/vue-listview element-ui

    Element-UI 作为 peerDependencies 需要同步安装。

    使用

    全局注册

    可以传入配置对象,用于全局配置 listview 。一般可用于项目接口与默认结构不同的场景,通过全局配置可不用在每个页面内重复写诸如 validateResponse 等“项目内通用”的配置。

    支持全局配置:

    • validateResponse
    • resolveResponseErrorMessage
    • transformRequestData
    • transformResponseData
    • contentDataMap
    // main.js
    import Vue from 'vue'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    import Listview from '@lawrence_ch/vue-listview'
     
    Vue.use(ElementUI)
    Vue.use(Listview)
    /*
    Vue.use(Listview, {
      validateResponse: response => response.different_success_status,
      resolveResponseErrorMessage: () => 'global config error',
      transformRequestData: requestData => {
        requestData.addon = 'requestAddon'
        return requestData
      },
      transformResponseData: response => {
        response.addon = 'responseAddon'
        return response
      },
      contentDataMap: {
        addon: 'addon',
        items: 'result.items',
        total: 'result.total_count'
      }
    })
    */

    局部注册

    <template>
      <listview />
    </template>
     
    <script>
    // import Vue from 'vue'
    import Listview from '@lawrence_ch/vue-listview'
     
    /*
    Vue.prototype.$LISTVIEW = {
      contentDataMap: {
        addon: 'addon',
        items: 'result.items',
        total: 'result.total_count'
      },
      // ...
    }
    */
     
    export default {
      components: {
        Listview
      }
    }
    </script>

    UMD

    演示: jsfiddle

    <div id="app">
      <listview />
    </div>
     
    <script src="//unpkg.com/vue/dist/vue.js"></script>
    <script src="//unpkg.com/@laomao800/vue-listview/dist/listview.umd.min.js"></script>
    <script>
    new Vue().$mount('#app')
    </script> 

    Install

    npm i @lawrence_ch/vue-listview

    DownloadsWeekly Downloads

    2

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    4.14 MB

    Total Files

    41

    Last publish

    Collaborators

    • avatar