yuicom

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>