vue-multi-view-list v1.0.1

npm-list-view

Dependancy

npm install vue-multi-view-list

Dependancy

• Font-Awesome 5

UI

There are 2 view mode: row, card.

Usage

// tour-page.vue

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

<script>
import List from 'vue-multi-view-list'
</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(', ')
    }
  ]
}