Desc

This is a wrapper component for iview. to make it easy to use.

Install

npm i ldj-vue-dynamic-component

Dependency:

• vue
• iview

Func

• bfButton
• bfTabs
• bfForm
• bfPage
• bfTable
• bfModal
• bfPage

Usage

//import
import bfutils from 'ldj-vue-dynamic-component'

// vue
    <component v-for="item in cmplist" :is="item.cmp" :dataI="item.dataI" :emitI="item.emitI" :styleI="item.styleI"></component>
// javascript
    data () {
        return {
            cmplist: [
              {
                cmp: bfutils.bfButton,
                dataI: {
                  text: 'dsii',
                  itemType: 'info'
                },
                emitI: {
                  click () {
                  }
                }
              },
              {
                cmp: bfutils.bfModal,
                dataI: {
                  title: 'title',
                  model: {
                    fullscreen: false,
                    show: true,
                    draggable: false
                  },
                  itemList: [
                    {
                      cmp: bfutils.bfTabs,
                      dataI: {
                        itemList: [
                          {
                            label: 'tab1',
                            itemList: [
                              {
                                cmp: bfutils.bfTable,
                                styleI: {
                                  tableBody: {
                                    marginBottom: '10px'
                                  }
                                },
                                dataI: {
                                  tableHeader: [
                                    {
                                      cmp: bfutils.bfButton,
                                      dataI: {
                                        text: 'dsii'
                                      },
                                      emitI: {
                                        click () {
                                          alert('sfiji')
                                        }
                                      }
                                    }
                                  ],
                                  tableFooter: [
                                    {
                                      cmp: bfutils.bfPage,
                                      dataI: {
                                        total: 100,
                                        'prev-text': 'prev',
                                        'next-text': 'next'
                                      }
                                    }
                                  ],
                                  tableColumn: [
                                    {
                                      title: 'sjfids',
                                      key: 'name'
                                    },
                                    {
                                      title: 'agsfe',
                                      key: 'age'
                                    }
                                  ],
                                  tableData: [
                                    {
                                      name: 'fjsijfi',
                                      age: 'sfjisfjiji'
                                    }
                                  ]
                                }
                              }
                            ]
                          },
                          {
                            label: 'tab2',
                            itemList: [
                              {
                                cmp: bfutils.bfButton,
                                dataI: {
                                  text: 'sifji'
                                }
                              }
                            ]
                          }
                        ]
                      }
                    }
                  ]
                }
              }
            ]
        }
    }