yuicom 说明文档

快速上手

yarn add yuicom -S
npm install yuicom -S

在 main.js 导入 yuicom

impot Vue from 'vue'
impot store from './store' //自定义store
import yuicom from 'yuicom'
//注入store
Vue.use(yuicom,{store})

组件

layout-container布局组件

<layout-container></layout-container>

Example

<layout-container>
    <template slot="menuHead">
      <div style="height: 50px">左侧导航头部内容</div>
    </template>
    <template slot="header">
        <!--头部导航-->
    </template>
</layout-container>

LayoutContainer slot

| 名称 | 说明 | | -------- | ---------------- | | menuHead | 左侧导航头部内容 | | header | 右侧头部导航内容 |

ListContainer数据列表容器组件

<list-container></list-container>

ListContainer slot

| 名称 | 说明 | | ----- | -------- | | form | 表单查询 | | tools | 工具栏 | | table | 表格 | | pages | 页码 |

ListContainer event

| 事件 | 说明 | | ----------- | -------- | | @on-refresh | 刷新事件 |

ShowContainer 显示组件

<show-container></show-container>

| 事件 | 说明 | | ------- | -------------------- | | bank | 返回事件 | | refresh | 触发列表页面刷新事件 |

Example

<template>
  <show-container title="测试" ref="showContainer">
    <Card :bordered="false" :style="{ margin: '20px' }">
      <h4 slot="title">测试</h4>
      <Form :label-width="90">
        <FormItem>
          <Button @click="handleSave">SAVE</Button>
        </FormItem>
      </Form>
    </Card>
  </show-container>
</template>
<script>
export default {
  methods: {
    handleSave() {
      this.$refs.showContainer.refresh();
    }
  }
};
</script>