mv-list v1.2.1

@Multi-view-list/vue

Demo Page

Dependency

• Font-Awesome 5

UI

There are 2 view mode: row, card.

Install

npm install mv-list

Usage

// main.js

import 'mv-list/dist/multi-view-list.css'
import mvlist from 'mv-list'

Vue.use(mvlist)

// your-page.vue

<template>
  <mvList
    :config="listConfig"
    :data="listData"
    default-view="card"
    switch-view="true"
    @on-click="handleClick"
    @on-edit="handleEdit"
    @on-delete="handleDelete" />
</template>

<script>
export default {
  data () {
    return {
      listConfig: {
        // config
      },
      listData: [
        // source
      ]
    }
  }
}
</script>

List Props

List Item Events

Event will return item's source data and it's index from source data array.

Config

config: {  
    title: {  
        key: 'keyname', // refer to item data's key  
        align: 'left' // text-align: `left`, `center`,  `right`. default: left  
    },   
    image: 'keyname', // refer to item data's key  
    content: {  
        // if you set render function, ignore other attribute.  
        render: (params) => { // `params` is item data
          // do something   
          return `your result ${params.custom.attribute}` // need to be string or es6 template string   
        }  
    },  
    footer: [ // only footer use array. Name is the title for each value.   
        { name: 'Area', key: 'area' },  
        { name: 'Category',  
          render: (params) => params.category.join(', ')  
        }  
    ]  
}