framework / eagle-web-toolkit

Download as
Browse Code »

Commit 5f3c7155eb65dc5ac1b847f781a764b3aca47e49

Authored by Aaron
1 parent caa7ba03
Exists in master and in 1 other branch legacy

增加开发指南

Showing 22 changed files with 821 additions and 726 deletions   Show diff stats
examples/App.vue
  Diff comments   View file @5f3c715
@@ -9,19 +9,3 @@ export default { @@ -9,19 +9,3 @@ export default {
9 name: 'App' 9 name: 'App'
10 } 10 }
11 </script> 11 </script>
12 -  
13 -<style lang="scss">  
14 -@import "./styles/markdown.scss";  
15 -  
16 -html,  
17 -body {  
18 - padding: 0;  
19 - margin: 0;  
20 -}  
21 -#app {  
22 - font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,  
23 - Microsoft YaHei, SimSun, sans-serif;  
24 - -webkit-font-smoothing: antialiased;  
25 - -moz-osx-font-smoothing: grayscale;  
26 -}  
27 -</style>  
examples/assets/vue.svg 0 → 100644
  Diff comments   View file @5f3c715
@@ -0,0 +1,14 @@ @@ -0,0 +1,14 @@
  1 +<?xml version="1.0" encoding="UTF-8"?>
  2 +<svg width="400px" height="350px" viewBox="0 0 400 350" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  3 + <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
  4 + <title>Vue</title>
  5 + <desc>Created with Sketch.</desc>
  6 + <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
  7 + <g id="画板" transform="translate(-266.000000, -523.000000)">
  8 + <g id="Vue" transform="translate(266.000000, 523.000000)">
  9 + <polygon id="路径" fill="#44BC84" points="80 0 200 210 320 0 400 0 200 350 0 0"></polygon>
  10 + <polygon id="路径" fill="#344C5C" points="155.33049 0 200.426439 80 245.522388 0 320.682303 0 200.426439 210 80.1705757 0"></polygon>
  11 + </g>
  12 + </g>
  13 + </g>
  14 +</svg>
0 \ No newline at end of file 15 \ No newline at end of file
examples/main.js
  Diff comments   View file @5f3c715
@@ -9,8 +9,7 @@ import EagleWebToolkit from &#39;../packages&#39;; @@ -9,8 +9,7 @@ import EagleWebToolkit from &#39;../packages&#39;;
9 import NProgress from 'nprogress'; 9 import NProgress from 'nprogress';
10 import EagleCodeSnippet from "@/components/code-snippet"; 10 import EagleCodeSnippet from "@/components/code-snippet";
11 11
12 -import '@/styles/element.scss';  
13 -import '@/styles/nprogress.scss'; 12 +import '@/styles/index.scss';
14 import "highlight.js/styles/github.css"; 13 import "highlight.js/styles/github.css";
15 14
16 const request = axios.create({ 15 const request = axios.create({
examples/router/routes.js
  Diff comments   View file @5f3c715
1 import DefaultLayout from '@/views/layout/default'; 1 import DefaultLayout from '@/views/layout/default';
2 import ComponentLayout from '@/views/layout/component'; 2 import ComponentLayout from '@/views/layout/component';
3 3
  4 +// 开发指南的文档
  5 +
  6 +const _guides = [
  7 + {
  8 + path: 'introduce',
  9 + name: 'introduce',
  10 + meta: { title: '简介' },
  11 + component: () => import('@/views/docs/guide/introduce.md'),
  12 + },
  13 + {
  14 + path: 'installation',
  15 + name: 'installation',
  16 + meta: { title: '安装' },
  17 + component: () => import('@/views/docs/guide/installation.md'),
  18 + },
  19 +];
  20 +
4 // 组件页面的文档 21 // 组件页面的文档
5 22
6 const _components = [ 23 const _components = [
@@ -11,7 +28,7 @@ const _components = [ @@ -11,7 +28,7 @@ const _components = [
11 path: 'select', 28 path: 'select',
12 name: 'select', 29 name: 'select',
13 meta: { title: 'Select 选择器' }, 30 meta: { title: 'Select 选择器' },
14 - component: () => import('@/views/docs/select.md'), 31 + component: () => import('@/views/docs/component/select.md'),
15 }, 32 },
16 ] 33 ]
17 }, 34 },
@@ -22,25 +39,25 @@ const _components = [ @@ -22,25 +39,25 @@ const _components = [
22 path: 'detail', 39 path: 'detail',
23 name: 'detail', 40 name: 'detail',
24 meta: { title: 'Detail 详情' }, 41 meta: { title: 'Detail 详情' },
25 - component: () => import('@/views/docs/detail.md'), 42 + component: () => import('@/views/docs/component/detail.md'),
26 }, 43 },
27 { 44 {
28 path: 'form', 45 path: 'form',
29 name: 'form', 46 name: 'form',
30 meta: { title: 'Form 表单' }, 47 meta: { title: 'Form 表单' },
31 - component: () => import('@/views/docs/form.md'), 48 + component: () => import('@/views/docs/component/form.md'),
32 }, 49 },
33 { 50 {
34 path: 'search', 51 path: 'search',
35 name: 'search', 52 name: 'search',
36 meta: { title: 'Search 搜索' }, 53 meta: { title: 'Search 搜索' },
37 - component: () => import('@/views/docs/search.md'), 54 + component: () => import('@/views/docs/component/search.md'),
38 }, 55 },
39 { 56 {
40 path: 'table', 57 path: 'table',
41 name: 'table', 58 name: 'table',
42 meta: { title: 'Table 表格' }, 59 meta: { title: 'Table 表格' },
43 - component: () => import('@/views/docs/table.md'), 60 + component: () => import('@/views/docs/component/table.md'),
44 }, 61 },
45 ] 62 ]
46 }, 63 },
@@ -51,7 +68,7 @@ const _components = [ @@ -51,7 +68,7 @@ const _components = [
51 path: 'scheme', 68 path: 'scheme',
52 name: 'scheme', 69 name: 'scheme',
53 meta: { title: 'Scheme 方案' }, 70 meta: { title: 'Scheme 方案' },
54 - component: () => import('@/views/docs/scheme.md'), 71 + component: () => import('@/views/docs/component/scheme.md'),
55 }, 72 },
56 ] 73 ]
57 }, 74 },
@@ -91,12 +108,13 @@ const _pages = [ @@ -91,12 +108,13 @@ const _pages = [
91 name: 'component', 108 name: 'component',
92 meta: { title: '组件', path: '/component' }, 109 meta: { title: '组件', path: '/component' },
93 component: ComponentLayout, 110 component: ComponentLayout,
94 - redirect: `/component/${_components[0].children[0].path || 'detail'}`,  
95 - children: _components_children 111 + redirect: `/component/${_guides[0].path || 'detail'}`,
  112 + children: [..._components_children, ..._guides]
96 } 113 }
97 ] 114 ]
98 115
99 export const pages = _pages; 116 export const pages = _pages;
  117 +export const guides = _guides;
100 export const components = _components; 118 export const components = _components;
101 119
102 export default [ 120 export default [
examples/styles/index.scss 0 → 100644
  Diff comments   View file @5f3c715
@@ -0,0 +1,28 @@ @@ -0,0 +1,28 @@
  1 +@import './variables.scss';
  2 +@import './markdown.scss';
  3 +@import './nprogress.scss';
  4 +@import './element.scss';
  5 +
  6 +html,
  7 +body {
  8 + padding: 0;
  9 + margin: 0;
  10 +}
  11 +#app {
  12 + font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
  13 + Microsoft YaHei, SimSun, sans-serif;
  14 + -webkit-font-smoothing: antialiased;
  15 + -moz-osx-font-smoothing: grayscale;
  16 +}
  17 +
  18 +.side-menu__group {
  19 + display: flex;
  20 + align-items: flex-end;
  21 + justify-content: space-between;
  22 + padding: 0 20px;
  23 + .subtitle {
  24 + font-weight: normal;
  25 + color: $text;
  26 + font-size: 14px;
  27 + }
  28 +}
0 \ No newline at end of file 29 \ No newline at end of file
examples/views/docs/component/detail.md 0 → 100644
  Diff comments   View file @5f3c715
@@ -0,0 +1,73 @@ @@ -0,0 +1,73 @@
  1 +# Detail 详情
  2 +
  3 +> 将Form组件的值展示位详情
  4 +
  5 +## 基础用法
  6 +
  7 +配置项list将无视配置的type，统一渲染为label
  8 +
  9 +:::snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，每一项都已设置为**el-form-item**的子组件
  10 +
  11 +```html
  12 +<template>
  13 + <eagle-detail v-model="detailModel" :list="detailList" style="width: 800px;"></eagle-detail>
  14 +</template>
  15 +
  16 +<script>
  17 +export default {
  18 + data() {
  19 + return {
  20 + detailList: [
  21 + { type: 'el-input', key: 'name', label: '名称' },
  22 + { type: 'eagle-select', key: 'address', label: '住址', group: '地址信息' },
  23 + { type: 'el-input', key: 'postcode', label: '邮编', group: '地址信息' },
  24 + { type: 'el-input', key: 'number', label: '楼栋号', group: '地址信息' },
  25 + ],
  26 + detailModel: {
  27 + name: '老A',
  28 + address: 'Any where',
  29 + postcode: 123456,
  30 + number: 'N栋N-N'
  31 + }
  32 + }
  33 + },
  34 +}
  35 +</script>
  36 +```
  37 +
  38 +:::
  39 +
  40 +
  41 +使用`list`属性设置数据源
  42 +
  43 +```js
  44 +export default {
  45 + data() {
  46 + const d = '!&(*&(*';
  47 + console.log('123');
  48 + return {
  49 + a: 123,
  50 + b: '456',
  51 + c: d,
  52 + }
  53 + }
  54 +}
  55 +```
  56 +
  57 +---
  58 +
  59 +## API
  60 +
  61 +## Attribute 属性
  62 +
  63 +参数|说明|类型|可选值|默认值
  64 +-|-|-|-|-
  65 +value / v-model | 绑定值 | Object | - | -
  66 +list | 表单项配置列表 | Array | - | []
  67 +
  68 +## List 表单项配置列表
  69 +
  70 +参数|说明|类型|可选值|默认值
  71 +-|-|-|-|-
  72 +key | 参数名 | String | - | -
  73 +label | 参数标签 | String | - | -
0 \ No newline at end of file 74 \ No newline at end of file
examples/views/docs/component/form.md 0 → 100644
  Diff comments   View file @5f3c715
@@ -0,0 +1,147 @@ @@ -0,0 +1,147 @@
  1 +# Form 表单
  2 +
  3 +不同于常规Form组件，本组件采用配置列表的方式实现表单快速配置
  4 +
  5 +## 基础用法
  6 +
  7 +配置项list中通过type可以配置任意组件，不受框架限制
  8 +
  9 +:::snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，每一项都已设置为**el-form-item**的子组件，通过`rules`配置校验规则
  10 +
  11 +```html
  12 +<template>
  13 + <eagle-form ref="form" :list="formList" @submit="handleSubmit" @cancel="handleCancel" style="width: 500px;" :showButtonGroup="false"></eagle-form>
  14 +</template>
  15 +
  16 +<script>
  17 +export default {
  18 + data() {
  19 + return {
  20 + formList: [
  21 + { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
  22 + { type: 'eagle-select', key: 'address', label: '住址', props: { dataSource: [{ label: '大街上', value: 'S' }, { label: '小区里', value: 'H' }] } },
  23 + { type: 'el-input', key: 'postcode', label: '邮编', span: 12, tip: { content: '邮政编码', placement: "left" } },
  24 + { type: 'el-input', key: 'number', label: '楼栋号', span: 12, visible: (model) => model.address === 'H' },
  25 + ]
  26 + }
  27 + },
  28 + methods: {
  29 + handleSubmit(value) {
  30 + console.log(value)
  31 + },
  32 + handleCancel() {
  33 + this.$refs.form.reset()
  34 + console.log('cancel!')
  35 + }
  36 + }
  37 +}
  38 +</script>
  39 +```
  40 +
  41 +:::
  42 +
  43 +## 分组
  44 +
  45 +对配置项进行分组
  46 +
  47 +:::snippet 在配置项属性中设置`group`参数，没有设置分组的配置项默认归为`基本信息`分组
  48 +
  49 +```html
  50 +<template>
  51 + <eagle-form :list="formList" style="width: 500px;">
  52 + <template #label-gender="{ label }">
  53 + <span>自定义 - {{ label }}</span>
  54 + </template>
  55 + </eagle-form>
  56 +</template>
  57 +
  58 +<script>
  59 +export default {
  60 + data() {
  61 + return {
  62 + formList: [
  63 + { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
  64 + { type: 'el-input', key: 'gender', label: '性别', group: { label: '身体状况', icon: 'edit' } },
  65 + { type: 'eagle-select', key: 'address', label: '住址', props: { dataSource: [{ label: '大街上', value: 'S' }, { label: '小区里', value: 'H' }] }, group: '详细地址' },
  66 + { type: 'el-input', key: 'postcode', label: '邮编', tip: { content: '邮政编码', placement: "left" }, group: '详细地址' },
  67 + { type: 'el-input', key: 'number', label: '楼栋号', group: '详细地址' },
  68 + ]
  69 + }
  70 + }
  71 +}
  72 +</script>
  73 +```
  74 +
  75 +:::
  76 +
  77 +## 自定义分组
  78 +
  79 +有些时候默认的分组样式并不能满足项目需求，因此这里支持自定义
  80 +
  81 +:::snippet 使用`Object`对象的方式配置分组信息，并在组件中使用具名插槽`slot`配置分组标题
  82 +
  83 +```html
  84 +<template>
  85 + <eagle-form :list="formList" style="width: 500px;">
  86 + <template #group-not-bad="{ label }">
  87 + <div style="padding: 10px 0px;border-bottom: 1px dashed #aaa;display: flex;justify-content: space-between;">
  88 + <span>哎哟 - {{ label }} - 不错哦</span>
  89 + <el-button size="mini" type="primary">这是一个按钮</el-button>
  90 + </div>
  91 + </template>
  92 + </eagle-form>
  93 +</template>
  94 +
  95 +<script>
  96 +export default {
  97 + data() {
  98 + return {
  99 + formList: [
  100 + { type: 'el-input', key: 'name', label: '名称', group: { label: '不错哦', key: 'not-bad' }, tip: '周某人说的' },
  101 + { type: 'eagle-select', key: 'address', label: '住址', props: { dataSource: [{ label: '大街上', value: 'S' }, { label: '小区里', value: 'H' }] }, group: '详细地址' },
  102 + ]
  103 + }
  104 + }
  105 +}
  106 +</script>
  107 +```
  108 +
  109 +:::
  110 +
  111 +## API
  112 +
  113 +## Attribute 属性
  114 +
  115 +参数|说明|类型|可选值|默认值
  116 +-|-|-|-|-
  117 +value / v-model | 绑定值 | Object | - | -
  118 +list | 表单项配置列表 | Array | - | []
  119 +
  120 +## Methods 方法
  121 +
  122 +方法名|说明|参数
  123 +-|-|-
  124 +reset | 重置表单 | -
  125 +
  126 +## Events 事件
  127 +
  128 +事件名称|说明|回调参数
  129 +-|-|-
  130 +change | 表单model发生变化时触发 | model对象
  131 +submit | 点击表单提交按钮时触发 | model对象
  132 +cancel | 点击表单取消按钮时触发 | -
  133 +
  134 +## List 表单项配置列表
  135 +
  136 +参数|说明|类型|可选值|默认值
  137 +-|-|-|-|-
  138 +type | 组件类型 | String | - | el-input
  139 +key | 参数名 | String | - | -
  140 +label | 参数标签 | String | - | -
  141 +props | 组件参数 | Object,Function(model: object)) | - | {}
  142 +style | 组件样式 | Object | - | { width: "100%" }
  143 +on | 组件事件 | Object,Function(model: object) | - | {}
  144 +visible | 组件v-if状态 | Boolean,Function(model: object) | - | true
  145 +show | 组件v-show状态 | Boolean,Function(model: object) | - | true
  146 +rules | 组件校验规则 | Object,Array | - | -
  147 +tip | 组件提示框 | Object,String | - | {}
0 \ No newline at end of file 148 \ No newline at end of file
examples/views/docs/component/scheme.md 0 → 100644
  Diff comments   View file @5f3c715
@@ -0,0 +1,94 @@ @@ -0,0 +1,94 @@
  1 +# Scheme 方案
  2 +
  3 +Scheme是一个数据驱动的解决方案，通过既定的业务配置参数，生成可模块化编辑的`CURD`业务视图
  4 +
  5 +## 基础用法
  6 +
  7 +配置项list中通过type可以配置任意组件，不受框架限制
  8 +
  9 +:::snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，每一项都已设置为**el-form-item**的子组件，通过`rules`配置校验规则
  10 +
  11 +```html
  12 +<template>
  13 + <eagle-scheme :list="schemeList" :option="{ auto: false }">
  14 + <!-- <div slot="action-bar" slot-scope="{ handleNew }">
  15 + <el-button type="warn" @click="handleNew">新增</el-button>
  16 + </div> -->
  17 + <el-button slot="action-button" type="success" plain size="small">启用</el-button>
  18 + <el-button slot="action-button" type="danger" plain size="small">禁用</el-button>
  19 + <el-table-column type="selection" width="50" align="center"></el-table-column>
  20 + <template #table-status="{ setDialog }">
  21 + <el-table-column prop="status" label="激活状态" min-width="120">
  22 + <el-tag @click="setDialog({ title: 'Status模式', type: 'dialog-status' })" slot-scope="{ row: { status } }" :type="status === 'active' ? 'success' : 'danger'">{{ status === 'active' ? '激活' : '禁用' }}</el-tag>
  23 + </el-table-column>
  24 + </template>
  25 + <template #search-status="{ model }">
  26 + <eagle-select v-model="model.status" :dataSource="dataSource"></eagle-select>
  27 + </template>
  28 + <template #form-group-setting >
  29 + <div style="padding: 10px 0px;margin-bottom: 30px;border-bottom: 1px dashed #aaa;display: flex;justify-content: space-between;">
  30 + <span>哎哟 - 设置 - 不错哦</span>
  31 + <el-button size="mini" type="primary">这是一个按钮</el-button>
  32 + </div>
  33 + </template>
  34 + <template #form-item-status="{ model }">
  35 + <el-input-number v-model="model.status"></el-input-number>
  36 + </template>
  37 + <template #view-item-code="{ model }">
  38 + <el-input disabled :value="model.code"></el-input>
  39 + </template>
  40 + <!-- <template #dialog-view="{ row }">
  41 + <div>这是一个自定义弹出框内容</div>
  42 + <div>{{ row }}</div>
  43 + </template> -->
  44 + <template #dialog-status>
  45 + <div>这是Status的内容</div>
  46 + </template>
  47 + <!-- 自定义按钮组 -->
  48 + <!-- <el-table-column slot="table-operation" prop="$operation" label="操作" min-width="140">
  49 + <el-tag>自定义按钮组</el-tag>
  50 + </el-table-column> -->
  51 + <!-- 在操作按钮组前加上新的按钮 -->
  52 + <!-- <template slot="table-operation-btn">
  53 + <el-button class="eagle-scheme__table-btn" type="text" title="启用">启用</el-button>
  54 + <el-button class="eagle-scheme__table-btn" type="text" title="禁用">禁用</el-button>
  55 + </template> -->
  56 + <!-- 在操作按钮组后追加新的按钮 -->
  57 + <!-- <template slot="table-operation-btn-append">
  58 + <el-button class="eagle-scheme__table-btn" type="text" title="启用">启用</el-button>
  59 + <el-button class="eagle-scheme__table-btn" type="text" title="禁用">禁用</el-button>
  60 + </template> -->
  61 + </eagle-scheme>
  62 +</template>
  63 +
  64 +<script>
  65 +export default {
  66 + data() {
  67 + return {
  68 + schemeList: [
  69 + { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
  70 + { type: 'el-input', key: 'code', label: '编码', rules: [{ required: true, message: '请输入编码' }],
  71 + exclude: 'search', group: { label: '设置', key: 'setting', tip: { content: '哇哦', placement: 'left' } }, tip: '编码为数字' },
  72 + { type: 'el-input', key: 'type', label: '类型', group: { label: '设置', key: 'setting', icon: 'edit' }, formScheme: { tip: '类型随便填' } },
  73 + { type: 'el-input-number', key: 'sort', label: '排序', include: ['form', 'table'], sortable: true },
  74 + { type: 'el-input', key: 'status', label: '状态', group: { label: '信息', key: 'info', icon: 'info' }, formScheme: { label: '状态码' } },
  75 + ],
  76 + dataSource: [
  77 + { label: '选项A', value: 'A' },
  78 + { label: '选项B', value: 'B' },
  79 + ],
  80 + }
  81 + },
  82 +}
  83 +</script>
  84 +```
  85 +
  86 +:::
  87 +
  88 +## API
  89 +
  90 +## Attribute 属性
  91 +
  92 +参数|说明|类型|可选值|默认值
  93 +-|-|-|-|-
  94 +list | 表单项配置列表 | Array | - | []
0 \ No newline at end of file 95 \ No newline at end of file
examples/views/docs/component/search.md 0 → 100644
  Diff comments   View file @5f3c715
@@ -0,0 +1,132 @@ @@ -0,0 +1,132 @@
  1 +# Search 搜索
  2 +
  3 +Search 搜索组件是一个使用`list`来配置生成的搜索表单
  4 +
  5 +## 基础用法
  6 +
  7 +配置项list中通过type可以配置任意组件，不受框架限制
  8 +
  9 +:::snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，支持通过`rules`配置校验规则
  10 +
  11 +```html
  12 +<template>
  13 + <eagle-search :list="searchList" @search="handleSearch" @reset="handleReset" :span="8" :searching="searching"></eagle-search>
  14 +</template>
  15 +
  16 +<script>
  17 +export default {
  18 + data() {
  19 + return {
  20 + searching: false,
  21 + searchList: [
  22 + { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
  23 + { type: 'eagle-select', key: 'type', label: '类型', props: { dataSource: [{ label: '呆萌', value: '1' }, { label: '二货', value: '2' }] } },
  24 + { type: 'el-input', key: 'postcode', label: '邮编', tip: { content: '邮政编码', placement: "left" } },
  25 + { type: 'el-input', key: 'number', label: '楼栋号' },
  26 + { type: 'el-input', key: 'not', label: '我不是', visible: (model) => model.type === '2' },
  27 + { type: 'el-input', key: 'no', label: '我没有', visible: (model) => model.type === '2' },
  28 + { type: 'el-input', key: 'never', label: '别瞎说啊', visible: (model) => model.type === '2' },
  29 + ]
  30 + }
  31 + },
  32 + mounted() {
  33 + this.searching = true;
  34 + setTimeout(() => {
  35 + this.searching = false;
  36 + }, 3000);
  37 + },
  38 + methods: {
  39 + handleSearch(value) {
  40 + console.log(value);
  41 + },
  42 + handleReset() {
  43 + console.log('reset');
  44 + }
  45 + }
  46 +}
  47 +</script>
  48 +```
  49 +
  50 +:::
  51 +
  52 +## 自定义组件
  53 +
  54 +在使用`list`的同时，也支持通过`slot`传入组件，以满足不同的业务需求
  55 +
  56 +:::snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，支持通过`rules`配置校验规则
  57 +
  58 +```html
  59 +<template>
  60 + <eagle-search :list="searchList">
  61 + <template #type="{ model }">
  62 + <eagle-select v-model="model.type" :dataSource="dataSource"></eagle-select>
  63 + </template>
  64 + <template #button-group="{ model, collapse, doSearch, doReset, doCollapse }">
  65 + <el-button size="mini" type="primary" round @click="handleQuery(model, doSearch)">搜索</el-button>
  66 + <el-button size="mini" type="success" round @click="doReset">恢复</el-button>
  67 + <el-button size="mini" type="info" round @click="doCollapse">{{ collapse ? '打开' : '关闭' }}</el-button>
  68 + </template>
  69 + </eagle-search>
  70 +</template>
  71 +
  72 +<script>
  73 +export default {
  74 + data() {
  75 + return {
  76 + searchList: [
  77 + { type: 'el-input', key: 'name', label: '名称' },
  78 + { key: 'type', label: '类型' },
  79 + { type: 'el-input', key: 'yes', label: '是的' },
  80 + { type: 'el-input', key: 'yeah', label: '没错' },
  81 + { type: 'el-input', key: 'absolutely', label: '就这样' },
  82 + ],
  83 + dataSource: [
  84 + { label: '选项A', value: 'A' },
  85 + { label: '选项B', value: 'B' },
  86 + ]
  87 + }
  88 + },
  89 + methods: {
  90 + handleQuery(model, action) {
  91 + if (action) {
  92 + action();
  93 + console.log(model);
  94 + }
  95 + },
  96 + }
  97 +}
  98 +</script>
  99 +```
  100 +
  101 +:::
  102 +
  103 +## API
  104 +
  105 +## Attribute 属性
  106 +
  107 +参数|说明|类型|可选值|默认值
  108 +-|-|-|-|-
  109 +value / v-model | 绑定值 | Object | - | -
  110 +list | 表单项配置列表 | Array | - | []
  111 +
  112 +## Events 事件
  113 +
  114 +事件名称|说明|回调参数
  115 +-|-|-
  116 +change | 表单model发生变化时触发 | model对象
  117 +search | 点击查询按钮时触发 | model对象
  118 +reset | 点击重置按钮时触发 | -
  119 +
  120 +## List 表单项配置列表
  121 +
  122 +参数|说明|类型|可选值|默认值
  123 +-|-|-|-|-
  124 +type | 组件类型 | String | - | el-input
  125 +key | 参数名 | String | - | -
  126 +label | 参数标签 | String | - | -
  127 +props | 组件参数 | Object,Function(model: object)) | - | {}
  128 +style | 组件样式 | Object | - | { width: "100%" }
  129 +on | 组件事件 | Object,Function(model: object) | - | {}
  130 +visible | 组件v-if状态 | Boolean,Function(model: object) | - | true
  131 +rules | 组件校验规则 | Object,Array | - | -
  132 +tip | 组件提示框 | Object,String | - | {}
0 \ No newline at end of file 133 \ No newline at end of file
examples/views/docs/component/select.md 0 → 100755
  Diff comments   View file @5f3c715
@@ -0,0 +1,80 @@ @@ -0,0 +1,80 @@
  1 +# Select 选择器
  2 +
  3 +在Element的el-select基础上的封装，直接通过数据列表配置选项
  4 +
  5 +## 基础用法
  6 +
  7 +:::snippet 通过`dataSource`属性设置数据源
  8 +
  9 +```html
  10 +<template>
  11 + <eagle-select v-model="selectValue" :dataSource="dataSource"></eagle-select>
  12 +</template>
  13 +
  14 +<script>
  15 +export default {
  16 + data() {
  17 + return {
  18 + selectValue: 'A',
  19 + dataSource: [
  20 + { label: '选项A', value: 'A' },
  21 + { label: '选项B', value: 'B' }
  22 + ]
  23 + }
  24 + },
  25 +}
  26 +</script>
  27 +```
  28 +
  29 +:::
  30 +
  31 +
  32 +## 数据源
  33 +
  34 +:::snippet 通过`dataSource`属性设置数据源，支持函数和`Promise`
  35 +
  36 +```html
  37 +<template>
  38 + <eagle-select v-model="selectValue1" :dataSource="getDataSource"></eagle-select>
  39 +</template>
  40 +
  41 +<script>
  42 +export default {
  43 + data() {
  44 + return {
  45 + selectValue1: undefined
  46 + }
  47 + },
  48 + methods: {
  49 + getDataSource() {
  50 + return new Promise((resolve, reject) => {
  51 + setTimeout(() => {
  52 + resolve([
  53 + { label: '选项A', value: 'A' },
  54 + { label: '选项B', value: 'B' }
  55 + ]);
  56 + }, 3000);
  57 + });
  58 + }
  59 + }
  60 +}
  61 +</script>
  62 +```
  63 +
  64 +:::
  65 +
  66 +## API
  67 +
  68 +## Attribute 属性
  69 +
  70 +参数|说明|类型|可选值|默认值
  71 +-|-|-|-|-
  72 +value / v-model | 绑定值 | String,Array | - | -
  73 +dataSource | 数据源或获取数据源的方法 | Array,Function,Promise | - | []
  74 +
  75 +## DataSource 数据源配置列表
  76 +
  77 +参数|说明|类型|可选值|默认值
  78 +-|-|-|-|-
  79 +label | 选项标签 | String | - | -
  80 +value | 选项值 | String,Number,Object | - | -
0 \ No newline at end of file 81 \ No newline at end of file
examples/views/docs/component/table.md 0 → 100644
  Diff comments   View file @5f3c715
@@ -0,0 +1,142 @@ @@ -0,0 +1,142 @@
  1 +# Table 表格
  2 +
  3 +不同于常规Table组件，本组件采用配置列表的方式实现表格快速配置
  4 +
  5 +## 基础用法
  6 +
  7 +表格列可以通过`list`动态配置
  8 +
  9 +:::snippet 使用`list`属性设置数据源，每一项都已设置为**el-table-column**，数据源格式与`Form`相同
  10 +
  11 +```html
  12 +<template>
  13 + <eagle-table ref="table" :value="tableData" :list="tableList"></eagle-table>
  14 +</template>
  15 +
  16 +<script>
  17 +export default {
  18 + data() {
  19 + return {
  20 + tableData: [
  21 + { name: '项伯', address: '大楚小区', postcode: 555, postName: '哟哟哟', number: '北城1号院' },
  22 + { name: '项仲', address: '大楚小区', postcode: 555, postName: '哟哟哟', number: '北城2号院' },
  23 + { name: '项叔', address: '大楚小区', postcode: 555, postName: '哟哟哟', number: '北城3号院' },
  24 + { name: '项季', address: '大楚小区', postcode: 555, postName: '哟哟哟', number: '北城4号院' },
  25 + ],
  26 + tableList: [
  27 + { key: 'name', label: '名称',
  28 + formatter(row, column) {
  29 + return `${row.name} - ${row.postcode}`;
  30 + }
  31 + },
  32 + { key: 'address', label: '住址' },
  33 + { key: 'postcode', agentKey: 'postName', label: '邮编' },
  34 + { key: 'number', label: '楼栋号', minWidth: '180' },
  35 + ]
  36 + }
  37 + },
  38 + mounted() {
  39 + console.log(this.$refs.table.instance);
  40 + },
  41 + methods: {
  42 + handleSubmit(value) {
  43 + console.log(value)
  44 + },
  45 + handleCancel() {
  46 + this.$refs.form.reset()
  47 + console.log('cancel!')
  48 + }
  49 + }
  50 +}
  51 +</script>
  52 +```
  53 +
  54 +:::
  55 +
  56 +## 自定义列
  57 +
  58 +表格列可以通过`slot`动态配置，名称对应各列的列名
  59 +
  60 +:::snippet 可以使用`slot`加`slot-scope`的方式，新版vue可以使用`#slotname`的形式
  61 +
  62 +```html
  63 +<template>
  64 + <eagle-table ref="table" :value="tableData" :list="tableList" :tableProps="tableProps">
  65 + <el-table-column type="selection" width="55"></el-table-column>
  66 + <el-table-column type="index" width="50"></el-table-column>
  67 + <template #postcode="{ label, key }">
  68 + <el-table-column prop="postcode" label="家属院" min-width="200">
  69 + <template slot-scope="{ row: { postcode, number }, $index }"> <!-- 由于渲染问题，这里没有显示出来 -->
  70 + <span style="color: orange">{{ $index }}</span>
  71 + <span style="color: blue">{{ label }}</span>
  72 + <span style="color: red">{{ key }}</span>
  73 + <span>{{ number }}</span>
  74 + <span>{{ postcode }}</span>
  75 + </template>
  76 + </el-table-column>
  77 + </template>
  78 + </eagle-table>
  79 +</template>
  80 +
  81 +<script>
  82 +export default {
  83 + data() {
  84 + return {
  85 + tableData: [
  86 + { name: '项伯', address: '大楚小区', postcode: 555, number: '北城1号院' },
  87 + { name: '项仲', address: '大楚小区', postcode: 555, number: '北城2号院' },
  88 + { name: '项叔', address: '大楚小区', postcode: 555, number: '北城3号院' },
  89 + { name: '项季', address: '大楚小区', postcode: 555, number: '北城4号院' },
  90 + ],
  91 + tableProps: {
  92 + border: true
  93 + },
  94 + tableList: [
  95 + { key: 'name', label: '名称',
  96 + formatter(row, column) {
  97 + return `${row.name} - ${row.postcode}`;
  98 + }
  99 + },
  100 + { key: 'address', label: '住址' },
  101 + { key: 'postcode', label: '邮编' },
  102 + { key: 'number', label: '楼栋号', minWidth: '180' },
  103 + ]
  104 + }
  105 + },
  106 + mounted() {
  107 + console.log(this.$refs.table.instance);
  108 + },
  109 + methods: {
  110 + handleSubmit(value) {
  111 + console.log(value)
  112 + },
  113 + handleCancel() {
  114 + this.$refs.form.reset()
  115 + console.log('cancel!')
  116 + }
  117 + }
  118 +}
  119 +</script>
  120 +```
  121 +
  122 +:::
  123 +
  124 +## API
  125 +
  126 +## Attribute 属性
  127 +
  128 +参数|说明|类型|可选值|默认值
  129 +-|-|-|-|-
  130 +list | 表单项配置列表 | Array | - | []
  131 +tableProps | ElementUI表格属性 | Object | - | { size: 'small' }
  132 +tableEvents | ElementUI表格事件 | Object | - | {}
  133 +
  134 +## List 表单项配置列表
  135 +
  136 +配置方法与Form组件基本相同，有部分属性删减
  137 +
  138 +参数|说明|类型|可选值|默认值
  139 +-|-|-|-|-
  140 +key | 参数名 | String | - | -
  141 +label | 参数标签 | String | - | -
  142 +其它参数 | ElementUI表格项的属性 | Any | - | -
0 \ No newline at end of file 143 \ No newline at end of file
examples/views/docs/detail.md
View file @caa7ba0
@@ -1,73 +0,0 @@ @@ -1,73 +0,0 @@
1 -# Detail 详情  
2 -  
3 -> 将Form组件的值展示位详情  
4 -  
5 -## 基础用法  
6 -  
7 -配置项list将无视配置的type，统一渲染为label  
8 -  
9 -:::snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，每一项都已设置为**el-form-item**的子组件  
10 -  
11 -```html  
12 -<template>  
13 - <eagle-detail v-model="detailModel" :list="detailList" style="width: 800px;"></eagle-detail>  
14 -</template>  
15 -  
16 -<script>  
17 -export default {  
18 - data() {  
19 - return {  
20 - detailList: [  
21 - { type: 'el-input', key: 'name', label: '名称' },  
22 - { type: 'eagle-select', key: 'address', label: '住址', group: '地址信息' },  
23 - { type: 'el-input', key: 'postcode', label: '邮编', group: '地址信息' },  
24 - { type: 'el-input', key: 'number', label: '楼栋号', group: '地址信息' },  
25 - ],  
26 - detailModel: {  
27 - name: '老A',  
28 - address: 'Any where',  
29 - postcode: 123456,  
30 - number: 'N栋N-N'  
31 - }  
32 - }  
33 - },  
34 -}  
35 -</script>  
36 -```  
37 -  
38 -:::  
39 -  
40 -  
41 -使用`list`属性设置数据源  
42 -  
43 -```js  
44 -export default {  
45 - data() {  
46 - const d = '!&(*&(*';  
47 - console.log('123');  
48 - return {  
49 - a: 123,  
50 - b: '456',  
51 - c: d,  
52 - }  
53 - }  
54 -}  
55 -```  
56 -  
57 ----  
58 -  
59 -## API  
60 -  
61 -## Attribute 属性  
62 -  
63 -参数|说明|类型|可选值|默认值  
64 --|-|-|-|-  
65 -value / v-model | 绑定值 | Object | - | -  
66 -list | 表单项配置列表 | Array | - | []  
67 -  
68 -## List 表单项配置列表  
69 -  
70 -参数|说明|类型|可选值|默认值  
71 --|-|-|-|-  
72 -key | 参数名 | String | - | -  
73 -label | 参数标签 | String | - | -  
74 \ No newline at end of file 0 \ No newline at end of file
examples/views/docs/form.md
View file @caa7ba0
@@ -1,147 +0,0 @@ @@ -1,147 +0,0 @@
1 -# Form 表单  
2 -  
3 -不同于常规Form组件，本组件采用配置列表的方式实现表单快速配置  
4 -  
5 -## 基础用法  
6 -  
7 -配置项list中通过type可以配置任意组件，不受框架限制  
8 -  
9 -:::snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，每一项都已设置为**el-form-item**的子组件，通过`rules`配置校验规则  
10 -  
11 -```html  
12 -<template>  
13 - <eagle-form ref="form" :list="formList" @submit="handleSubmit" @cancel="handleCancel" style="width: 500px;" :showButtonGroup="false"></eagle-form>  
14 -</template>  
15 -  
16 -<script>  
17 -export default {  
18 - data() {  
19 - return {  
20 - formList: [  
21 - { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },  
22 - { type: 'eagle-select', key: 'address', label: '住址', props: { dataSource: [{ label: '大街上', value: 'S' }, { label: '小区里', value: 'H' }] } },  
23 - { type: 'el-input', key: 'postcode', label: '邮编', span: 12, tip: { content: '邮政编码', placement: "left" } },  
24 - { type: 'el-input', key: 'number', label: '楼栋号', span: 12, visible: (model) => model.address === 'H' },  
25 - ]  
26 - }  
27 - },  
28 - methods: {  
29 - handleSubmit(value) {  
30 - console.log(value)  
31 - },  
32 - handleCancel() {  
33 - this.$refs.form.reset()  
34 - console.log('cancel!')  
35 - }  
36 - }  
37 -}  
38 -</script>  
39 -```  
40 -  
41 -:::  
42 -  
43 -## 分组  
44 -  
45 -对配置项进行分组  
46 -  
47 -:::snippet 在配置项属性中设置`group`参数，没有设置分组的配置项默认归为`基本信息`分组  
48 -  
49 -```html  
50 -<template>  
51 - <eagle-form :list="formList" style="width: 500px;">  
52 - <template #label-gender="{ label }">  
53 - <span>自定义 - {{ label }}</span>  
54 - </template>  
55 - </eagle-form>  
56 -</template>  
57 -  
58 -<script>  
59 -export default {  
60 - data() {  
61 - return {  
62 - formList: [  
63 - { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },  
64 - { type: 'el-input', key: 'gender', label: '性别', group: { label: '身体状况', icon: 'edit' } },  
65 - { type: 'eagle-select', key: 'address', label: '住址', props: { dataSource: [{ label: '大街上', value: 'S' }, { label: '小区里', value: 'H' }] }, group: '详细地址' },  
66 - { type: 'el-input', key: 'postcode', label: '邮编', tip: { content: '邮政编码', placement: "left" }, group: '详细地址' },  
67 - { type: 'el-input', key: 'number', label: '楼栋号', group: '详细地址' },  
68 - ]  
69 - }  
70 - }  
71 -}  
72 -</script>  
73 -```  
74 -  
75 -:::  
76 -  
77 -## 自定义分组  
78 -  
79 -有些时候默认的分组样式并不能满足项目需求，因此这里支持自定义  
80 -  
81 -:::snippet 使用`Object`对象的方式配置分组信息，并在组件中使用具名插槽`slot`配置分组标题  
82 -  
83 -```html  
84 -<template>  
85 - <eagle-form :list="formList" style="width: 500px;">  
86 - <template #group-not-bad="{ label }">  
87 - <div style="padding: 10px 0px;border-bottom: 1px dashed #aaa;display: flex;justify-content: space-between;">  
88 - <span>哎哟 - {{ label }} - 不错哦</span>  
89 - <el-button size="mini" type="primary">这是一个按钮</el-button>  
90 - </div>  
91 - </template>  
92 - </eagle-form>  
93 -</template>  
94 -  
95 -<script>  
96 -export default {  
97 - data() {  
98 - return {  
99 - formList: [  
100 - { type: 'el-input', key: 'name', label: '名称', group: { label: '不错哦', key: 'not-bad' }, tip: '周某人说的' },  
101 - { type: 'eagle-select', key: 'address', label: '住址', props: { dataSource: [{ label: '大街上', value: 'S' }, { label: '小区里', value: 'H' }] }, group: '详细地址' },  
102 - ]  
103 - }  
104 - }  
105 -}  
106 -</script>  
107 -```  
108 -  
109 -:::  
110 -  
111 -## API  
112 -  
113 -## Attribute 属性  
114 -  
115 -参数|说明|类型|可选值|默认值  
116 --|-|-|-|-  
117 -value / v-model | 绑定值 | Object | - | -  
118 -list | 表单项配置列表 | Array | - | []  
119 -  
120 -## Methods 方法  
121 -  
122 -方法名|说明|参数  
123 --|-|-  
124 -reset | 重置表单 | -  
125 -  
126 -## Events 事件  
127 -  
128 -事件名称|说明|回调参数  
129 --|-|-  
130 -change | 表单model发生变化时触发 | model对象  
131 -submit | 点击表单提交按钮时触发 | model对象  
132 -cancel | 点击表单取消按钮时触发 | -  
133 -  
134 -## List 表单项配置列表  
135 -  
136 -参数|说明|类型|可选值|默认值  
137 --|-|-|-|-  
138 -type | 组件类型 | String | - | el-input  
139 -key | 参数名 | String | - | -  
140 -label | 参数标签 | String | - | -  
141 -props | 组件参数 | Object,Function(model: object)) | - | {}  
142 -style | 组件样式 | Object | - | { width: "100%" }  
143 -on | 组件事件 | Object,Function(model: object) | - | {}  
144 -visible | 组件v-if状态 | Boolean,Function(model: object) | - | true  
145 -show | 组件v-show状态 | Boolean,Function(model: object) | - | true  
146 -rules | 组件校验规则 | Object,Array | - | -  
147 -tip | 组件提示框 | Object,String | - | {}  
148 \ No newline at end of file 0 \ No newline at end of file
examples/views/docs/guide/installation.md 0 → 100644
  Diff comments   View file @5f3c715
@@ -0,0 +1,3 @@ @@ -0,0 +1,3 @@
  1 +# 安装
  2 +
  3 +## npm安装
0 \ No newline at end of file 4 \ No newline at end of file
examples/views/docs/guide/introduce.md 0 → 100644
  Diff comments   View file @5f3c715
@@ -0,0 +1,11 @@ @@ -0,0 +1,11 @@
  1 +# EAGLE-WEB-TOOKIT
  2 +
  3 +`EAGLE-WEB-TOOKIT` 是在基于**Vue 2.0**的 [**Element**](https://element.eleme.cn) 组件库基础上的扩展组件库，主要用于快速生成企业后台管理项目。
  4 +
  5 +## 特性
  6 +
  7 +额
  8 +
  9 +::: html 啊啊啊
  10 +<span>123123</span>
  11 +:::
0 \ No newline at end of file 12 \ No newline at end of file
examples/views/docs/scheme.md
View file @caa7ba0
@@ -1,94 +0,0 @@ @@ -1,94 +0,0 @@
1 -# Scheme 方案  
2 -  
3 -Scheme是一个数据驱动的解决方案，通过既定的业务配置参数，生成可模块化编辑的`CURD`业务视图  
4 -  
5 -## 基础用法  
6 -  
7 -配置项list中通过type可以配置任意组件，不受框架限制  
8 -  
9 -:::snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，每一项都已设置为**el-form-item**的子组件，通过`rules`配置校验规则  
10 -  
11 -```html  
12 -<template>  
13 - <eagle-scheme :list="schemeList" :option="{ auto: false }">  
14 - <!-- <div slot="action-bar" slot-scope="{ handleNew }">  
15 - <el-button type="warn" @click="handleNew">新增</el-button>  
16 - </div> -->  
17 - <el-button slot="action-button" type="success" plain size="small">启用</el-button>  
18 - <el-button slot="action-button" type="danger" plain size="small">禁用</el-button>  
19 - <el-table-column type="selection" width="50" align="center"></el-table-column>  
20 - <template #table-status="{ setDialog }">  
21 - <el-table-column prop="status" label="激活状态" min-width="120">  
22 - <el-tag @click="setDialog({ title: 'Status模式', type: 'dialog-status' })" slot-scope="{ row: { status } }" :type="status === 'active' ? 'success' : 'danger'">{{ status === 'active' ? '激活' : '禁用' }}</el-tag>  
23 - </el-table-column>  
24 - </template>  
25 - <template #search-status="{ model }">  
26 - <eagle-select v-model="model.status" :dataSource="dataSource"></eagle-select>  
27 - </template>  
28 - <template #form-group-setting >  
29 - <div style="padding: 10px 0px;margin-bottom: 30px;border-bottom: 1px dashed #aaa;display: flex;justify-content: space-between;">  
30 - <span>哎哟 - 设置 - 不错哦</span>  
31 - <el-button size="mini" type="primary">这是一个按钮</el-button>  
32 - </div>  
33 - </template>  
34 - <template #form-item-status="{ model }">  
35 - <el-input-number v-model="model.status"></el-input-number>  
36 - </template>  
37 - <template #view-item-code="{ model }">  
38 - <el-input disabled :value="model.code"></el-input>  
39 - </template>  
40 - <!-- <template #dialog-view="{ row }">  
41 - <div>这是一个自定义弹出框内容</div>  
42 - <div>{{ row }}</div>  
43 - </template> -->  
44 - <template #dialog-status>  
45 - <div>这是Status的内容</div>  
46 - </template>  
47 - <!-- 自定义按钮组 -->  
48 - <!-- <el-table-column slot="table-operation" prop="$operation" label="操作" min-width="140">  
49 - <el-tag>自定义按钮组</el-tag>  
50 - </el-table-column> -->  
51 - <!-- 在操作按钮组前加上新的按钮 -->  
52 - <!-- <template slot="table-operation-btn">  
53 - <el-button class="eagle-scheme__table-btn" type="text" title="启用">启用</el-button>  
54 - <el-button class="eagle-scheme__table-btn" type="text" title="禁用">禁用</el-button>  
55 - </template> -->  
56 - <!-- 在操作按钮组后追加新的按钮 -->  
57 - <!-- <template slot="table-operation-btn-append">  
58 - <el-button class="eagle-scheme__table-btn" type="text" title="启用">启用</el-button>  
59 - <el-button class="eagle-scheme__table-btn" type="text" title="禁用">禁用</el-button>  
60 - </template> -->  
61 - </eagle-scheme>  
62 -</template>  
63 -  
64 -<script>  
65 -export default {  
66 - data() {  
67 - return {  
68 - schemeList: [  
69 - { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },  
70 - { type: 'el-input', key: 'code', label: '编码', rules: [{ required: true, message: '请输入编码' }],  
71 - exclude: 'search', group: { label: '设置', key: 'setting', tip: { content: '哇哦', placement: 'left' } }, tip: '编码为数字' },  
72 - { type: 'el-input', key: 'type', label: '类型', group: { label: '设置', key: 'setting', icon: 'edit' }, formScheme: { tip: '类型随便填' } },  
73 - { type: 'el-input-number', key: 'sort', label: '排序', include: ['form', 'table'], sortable: true },  
74 - { type: 'el-input', key: 'status', label: '状态', group: { label: '信息', key: 'info', icon: 'info' }, formScheme: { label: '状态码' } },  
75 - ],  
76 - dataSource: [  
77 - { label: '选项A', value: 'A' },  
78 - { label: '选项B', value: 'B' },  
79 - ],  
80 - }  
81 - },  
82 -}  
83 -</script>  
84 -```  
85 -  
86 -:::  
87 -  
88 -## API  
89 -  
90 -## Attribute 属性  
91 -  
92 -参数|说明|类型|可选值|默认值  
93 --|-|-|-|-  
94 -list | 表单项配置列表 | Array | - | []  
95 \ No newline at end of file 0 \ No newline at end of file
examples/views/docs/search.md
View file @caa7ba0
@@ -1,132 +0,0 @@ @@ -1,132 +0,0 @@
1 -# Search 搜索  
2 -  
3 -Search 搜索组件是一个使用`list`来配置生成的搜索表单  
4 -  
5 -## 基础用法  
6 -  
7 -配置项list中通过type可以配置任意组件，不受框架限制  
8 -  
9 -:::snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，支持通过`rules`配置校验规则  
10 -  
11 -```html  
12 -<template>  
13 - <eagle-search :list="searchList" @search="handleSearch" @reset="handleReset" :span="8" :searching="searching"></eagle-search>  
14 -</template>  
15 -  
16 -<script>  
17 -export default {  
18 - data() {  
19 - return {  
20 - searching: false,  
21 - searchList: [  
22 - { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },  
23 - { type: 'eagle-select', key: 'type', label: '类型', props: { dataSource: [{ label: '呆萌', value: '1' }, { label: '二货', value: '2' }] } },  
24 - { type: 'el-input', key: 'postcode', label: '邮编', tip: { content: '邮政编码', placement: "left" } },  
25 - { type: 'el-input', key: 'number', label: '楼栋号' },  
26 - { type: 'el-input', key: 'not', label: '我不是', visible: (model) => model.type === '2' },  
27 - { type: 'el-input', key: 'no', label: '我没有', visible: (model) => model.type === '2' },  
28 - { type: 'el-input', key: 'never', label: '别瞎说啊', visible: (model) => model.type === '2' },  
29 - ]  
30 - }  
31 - },  
32 - mounted() {  
33 - this.searching = true;  
34 - setTimeout(() => {  
35 - this.searching = false;  
36 - }, 3000);  
37 - },  
38 - methods: {  
39 - handleSearch(value) {  
40 - console.log(value);  
41 - },  
42 - handleReset() {  
43 - console.log('reset');  
44 - }  
45 - }  
46 -}  
47 -</script>  
48 -```  
49 -  
50 -:::  
51 -  
52 -## 自定义组件  
53 -  
54 -在使用`list`的同时，也支持通过`slot`传入组件，以满足不同的业务需求  
55 -  
56 -:::snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，支持通过`rules`配置校验规则  
57 -  
58 -```html  
59 -<template>  
60 - <eagle-search :list="searchList">  
61 - <template #type="{ model }">  
62 - <eagle-select v-model="model.type" :dataSource="dataSource"></eagle-select>  
63 - </template>  
64 - <template #button-group="{ model, collapse, doSearch, doReset, doCollapse }">  
65 - <el-button size="mini" type="primary" round @click="handleQuery(model, doSearch)">搜索</el-button>  
66 - <el-button size="mini" type="success" round @click="doReset">恢复</el-button>  
67 - <el-button size="mini" type="info" round @click="doCollapse">{{ collapse ? '打开' : '关闭' }}</el-button>  
68 - </template>  
69 - </eagle-search>  
70 -</template>  
71 -  
72 -<script>  
73 -export default {  
74 - data() {  
75 - return {  
76 - searchList: [  
77 - { type: 'el-input', key: 'name', label: '名称' },  
78 - { key: 'type', label: '类型' },  
79 - { type: 'el-input', key: 'yes', label: '是的' },  
80 - { type: 'el-input', key: 'yeah', label: '没错' },  
81 - { type: 'el-input', key: 'absolutely', label: '就这样' },  
82 - ],  
83 - dataSource: [  
84 - { label: '选项A', value: 'A' },  
85 - { label: '选项B', value: 'B' },  
86 - ]  
87 - }  
88 - },  
89 - methods: {  
90 - handleQuery(model, action) {  
91 - if (action) {  
92 - action();  
93 - console.log(model);  
94 - }  
95 - },  
96 - }  
97 -}  
98 -</script>  
99 -```  
100 -  
101 -:::  
102 -  
103 -## API  
104 -  
105 -## Attribute 属性  
106 -  
107 -参数|说明|类型|可选值|默认值  
108 --|-|-|-|-  
109 -value / v-model | 绑定值 | Object | - | -  
110 -list | 表单项配置列表 | Array | - | []  
111 -  
112 -## Events 事件  
113 -  
114 -事件名称|说明|回调参数  
115 --|-|-  
116 -change | 表单model发生变化时触发 | model对象  
117 -search | 点击查询按钮时触发 | model对象  
118 -reset | 点击重置按钮时触发 | -  
119 -  
120 -## List 表单项配置列表  
121 -  
122 -参数|说明|类型|可选值|默认值  
123 --|-|-|-|-  
124 -type | 组件类型 | String | - | el-input  
125 -key | 参数名 | String | - | -  
126 -label | 参数标签 | String | - | -  
127 -props | 组件参数 | Object,Function(model: object)) | - | {}  
128 -style | 组件样式 | Object | - | { width: "100%" }  
129 -on | 组件事件 | Object,Function(model: object) | - | {}  
130 -visible | 组件v-if状态 | Boolean,Function(model: object) | - | true  
131 -rules | 组件校验规则 | Object,Array | - | -  
132 -tip | 组件提示框 | Object,String | - | {}  
133 \ No newline at end of file 0 \ No newline at end of file
examples/views/docs/select.md
View file @caa7ba0
@@ -1,80 +0,0 @@ @@ -1,80 +0,0 @@
1 -# Select 选择器  
2 -  
3 -在Element的el-select基础上的封装，直接通过数据列表配置选项  
4 -  
5 -## 基础用法  
6 -  
7 -:::snippet 通过`dataSource`属性设置数据源  
8 -  
9 -```html  
10 -<template>  
11 - <eagle-select v-model="selectValue" :dataSource="dataSource"></eagle-select>  
12 -</template>  
13 -  
14 -<script>  
15 -export default {  
16 - data() {  
17 - return {  
18 - selectValue: 'A',  
19 - dataSource: [  
20 - { label: '选项A', value: 'A' },  
21 - { label: '选项B', value: 'B' }  
22 - ]  
23 - }  
24 - },  
25 -}  
26 -</script>  
27 -```  
28 -  
29 -:::  
30 -  
31 -  
32 -## 数据源  
33 -  
34 -:::snippet 通过`dataSource`属性设置数据源，支持函数和`Promise`  
35 -  
36 -```html  
37 -<template>  
38 - <eagle-select v-model="selectValue1" :dataSource="getDataSource"></eagle-select>  
39 -</template>  
40 -  
41 -<script>  
42 -export default {  
43 - data() {  
44 - return {  
45 - selectValue1: undefined  
46 - }  
47 - },  
48 - methods: {  
49 - getDataSource() {  
50 - return new Promise((resolve, reject) => {  
51 - setTimeout(() => {  
52 - resolve([  
53 - { label: '选项A', value: 'A' },  
54 - { label: '选项B', value: 'B' }  
55 - ]);  
56 - }, 3000);  
57 - });  
58 - }  
59 - }  
60 -}  
61 -</script>  
62 -```  
63 -  
64 -:::  
65 -  
66 -## API  
67 -  
68 -## Attribute 属性  
69 -  
70 -参数|说明|类型|可选值|默认值  
71 --|-|-|-|-  
72 -value / v-model | 绑定值 | String,Array | - | -  
73 -dataSource | 数据源或获取数据源的方法 | Array,Function,Promise | - | []  
74 -  
75 -## DataSource 数据源配置列表  
76 -  
77 -参数|说明|类型|可选值|默认值  
78 --|-|-|-|-  
79 -label | 选项标签 | String | - | -  
80 -value | 选项值 | String,Number,Object | - | -  
81 \ No newline at end of file 0 \ No newline at end of file
examples/views/docs/table.md
View file @caa7ba0
@@ -1,142 +0,0 @@ @@ -1,142 +0,0 @@
1 -# Table 表格  
2 -  
3 -不同于常规Table组件，本组件采用配置列表的方式实现表格快速配置  
4 -  
5 -## 基础用法  
6 -  
7 -表格列可以通过`list`动态配置  
8 -  
9 -:::snippet 使用`list`属性设置数据源，每一项都已设置为**el-table-column**，数据源格式与`Form`相同  
10 -  
11 -```html  
12 -<template>  
13 - <eagle-table ref="table" :value="tableData" :list="tableList"></eagle-table>  
14 -</template>  
15 -  
16 -<script>  
17 -export default {  
18 - data() {  
19 - return {  
20 - tableData: [  
21 - { name: '项伯', address: '大楚小区', postcode: 555, postName: '哟哟哟', number: '北城1号院' },  
22 - { name: '项仲', address: '大楚小区', postcode: 555, postName: '哟哟哟', number: '北城2号院' },  
23 - { name: '项叔', address: '大楚小区', postcode: 555, postName: '哟哟哟', number: '北城3号院' },  
24 - { name: '项季', address: '大楚小区', postcode: 555, postName: '哟哟哟', number: '北城4号院' },  
25 - ],  
26 - tableList: [  
27 - { key: 'name', label: '名称',  
28 - formatter(row, column) {  
29 - return `${row.name} - ${row.postcode}`;  
30 - }  
31 - },  
32 - { key: 'address', label: '住址' },  
33 - { key: 'postcode', agentKey: 'postName', label: '邮编' },  
34 - { key: 'number', label: '楼栋号', minWidth: '180' },  
35 - ]  
36 - }  
37 - },  
38 - mounted() {  
39 - console.log(this.$refs.table.instance);  
40 - },  
41 - methods: {  
42 - handleSubmit(value) {  
43 - console.log(value)  
44 - },  
45 - handleCancel() {  
46 - this.$refs.form.reset()  
47 - console.log('cancel!')  
48 - }  
49 - }  
50 -}  
51 -</script>  
52 -```  
53 -  
54 -:::  
55 -  
56 -## 自定义列  
57 -  
58 -表格列可以通过`slot`动态配置，名称对应各列的列名  
59 -  
60 -:::snippet 可以使用`slot`加`slot-scope`的方式，新版vue可以使用`#slotname`的形式  
61 -  
62 -```html  
63 -<template>  
64 - <eagle-table ref="table" :value="tableData" :list="tableList" :tableProps="tableProps">  
65 - <el-table-column type="selection" width="55"></el-table-column>  
66 - <el-table-column type="index" width="50"></el-table-column>  
67 - <template #postcode="{ label, key }">  
68 - <el-table-column prop="postcode" label="家属院" min-width="200">  
69 - <template slot-scope="{ row: { postcode, number }, $index }"> <!-- 由于渲染问题，这里没有显示出来 -->  
70 - <span style="color: orange">{{ $index }}</span>  
71 - <span style="color: blue">{{ label }}</span>  
72 - <span style="color: red">{{ key }}</span>  
73 - <span>{{ number }}</span>  
74 - <span>{{ postcode }}</span>  
75 - </template>  
76 - </el-table-column>  
77 - </template>  
78 - </eagle-table>  
79 -</template>  
80 -  
81 -<script>  
82 -export default {  
83 - data() {  
84 - return {  
85 - tableData: [  
86 - { name: '项伯', address: '大楚小区', postcode: 555, number: '北城1号院' },  
87 - { name: '项仲', address: '大楚小区', postcode: 555, number: '北城2号院' },  
88 - { name: '项叔', address: '大楚小区', postcode: 555, number: '北城3号院' },  
89 - { name: '项季', address: '大楚小区', postcode: 555, number: '北城4号院' },  
90 - ],  
91 - tableProps: {  
92 - border: true  
93 - },  
94 - tableList: [  
95 - { key: 'name', label: '名称',  
96 - formatter(row, column) {  
97 - return `${row.name} - ${row.postcode}`;  
98 - }  
99 - },  
100 - { key: 'address', label: '住址' },  
101 - { key: 'postcode', label: '邮编' },  
102 - { key: 'number', label: '楼栋号', minWidth: '180' },  
103 - ]  
104 - }  
105 - },  
106 - mounted() {  
107 - console.log(this.$refs.table.instance);  
108 - },  
109 - methods: {  
110 - handleSubmit(value) {  
111 - console.log(value)  
112 - },  
113 - handleCancel() {  
114 - this.$refs.form.reset()  
115 - console.log('cancel!')  
116 - }  
117 - }  
118 -}  
119 -</script>  
120 -```  
121 -  
122 -:::  
123 -  
124 -## API  
125 -  
126 -## Attribute 属性  
127 -  
128 -参数|说明|类型|可选值|默认值  
129 --|-|-|-|-  
130 -list | 表单项配置列表 | Array | - | []  
131 -tableProps | ElementUI表格属性 | Object | - | { size: 'small' }  
132 -tableEvents | ElementUI表格事件 | Object | - | {}  
133 -  
134 -## List 表单项配置列表  
135 -  
136 -配置方法与Form组件基本相同，有部分属性删减  
137 -  
138 -参数|说明|类型|可选值|默认值  
139 --|-|-|-|-  
140 -key | 参数名 | String | - | -  
141 -label | 参数标签 | String | - | -  
142 -其它参数 | ElementUI表格项的属性 | Any | - | -  
143 \ No newline at end of file 0 \ No newline at end of file
examples/views/layout/component.vue
  Diff comments   View file @5f3c715
@@ -4,7 +4,11 @@ @@ -4,7 +4,11 @@
4 <el-container class="layout-container__component"> 4 <el-container class="layout-container__component">
5 <el-aside class="layout-aside__component" width="200px"> 5 <el-aside class="layout-aside__component" width="200px">
6 <el-menu :default-active="activeMenu" class="layout-aside-menu__component" @select="handleSelect"> 6 <el-menu :default-active="activeMenu" class="layout-aside-menu__component" @select="handleSelect">
7 - <h4 style="padding: 0 20px;">组件</h4> 7 + <h4 class="side-menu__group">开发指南</h4>
  8 + <el-menu-item v-for="(doc, index) in guideList" :key="`doc-${index}`" :index="doc.name">{{ doc.meta.title }}</el-menu-item>
  9 + <h4 class="side-menu__group">
  10 + 组件<el-tag type="info" size="mini">{{ componentsCount }}</el-tag>
  11 + </h4>
8 <el-menu-item-group v-for="(component, idx) in componentList" :key="idx"> 12 <el-menu-item-group v-for="(component, idx) in componentList" :key="idx">
9 <template slot="title">{{ component.group }}</template> 13 <template slot="title">{{ component.group }}</template>
10 <el-menu-item v-for="(data, index) in component.children" :key="index" :index="data.name">{{ data.meta.title }}</el-menu-item> 14 <el-menu-item v-for="(data, index) in component.children" :key="index" :index="data.name">{{ data.meta.title }}</el-menu-item>
@@ -24,14 +28,15 @@ @@ -24,14 +28,15 @@
24 28
25 <script> 29 <script>
26 import LayoutHeader from './components/header'; 30 import LayoutHeader from './components/header';
27 -import { components } from '@/router/routes'; 31 +import { guides, components } from '@/router/routes';
28 32
29 export default { 33 export default {
30 name: 'componentLayout', 34 name: 'componentLayout',
31 components: { LayoutHeader }, 35 components: { LayoutHeader },
32 data() { 36 data() {
33 return { 37 return {
34 - activeMenu: 'select', 38 + activeMenu: 'introduce',
  39 + guideList: guides,
35 componentList: components, 40 componentList: components,
36 anchorList: [], 41 anchorList: [],
37 currentAnchor: '', 42 currentAnchor: '',
@@ -68,6 +73,15 @@ export default { @@ -68,6 +73,15 @@ export default {
68 } 73 }
69 } 74 }
70 }, 75 },
  76 + computed: {
  77 + componentsCount() {
  78 + let result = 0;
  79 + this.componentList.forEach(item => {
  80 + result += (item.children || []).length;
  81 + });
  82 + return result;
  83 + }
  84 + },
71 methods: { 85 methods: {
72 isBottom() { 86 isBottom() {
73 // 变量scrollTop是滚动条滚动时，距离顶部的距离 87 // 变量scrollTop是滚动条滚动时，距离顶部的距离
@@ -85,20 +99,22 @@ export default { @@ -85,20 +99,22 @@ export default {
85 let anchorList = []; 99 let anchorList = [];
86 for (let index in domList) { 100 for (let index in domList) {
87 let dom = domList[index] || {}; 101 let dom = domList[index] || {};
88 - const text = `${dom.parentNode.innerHTML}`.replace(/<\/?.*[^>]*>/g, '').trim();  
89 - if (text === 'API') {  
90 - break;  
91 - } else {  
92 - anchorList.push({  
93 - text: `${dom.parentNode.innerHTML}`.replace(/<\/?.*[^>]*>/g, '').trim(),  
94 - href: dom.href,  
95 - hash: dom.hash,  
96 - offsetTop: dom.offsetTop,  
97 - }); 102 + if (dom.parentNode) {
  103 + const text = `${dom.parentNode.innerHTML}`.replace(/<\/?.*[^>]*>/g, '').trim();
  104 + if (text === 'API') {
  105 + break;
  106 + } else {
  107 + anchorList.push({
  108 + text: `${dom.parentNode.innerHTML}`.replace(/<\/?.*[^>]*>/g, '').trim(),
  109 + href: dom.href,
  110 + hash: dom.hash,
  111 + offsetTop: dom.offsetTop,
  112 + });
  113 + }
98 } 114 }
99 } 115 }
100 this.anchorList = anchorList; 116 this.anchorList = anchorList;
101 - this.currentAnchor = anchorList[0].hash; 117 + this.currentAnchor = (anchorList[0] || {}).hash;
102 }, 118 },
103 handleSelect(key) { 119 handleSelect(key) {
104 this.$router.push({ name: key }); 120 this.$router.push({ name: key });
@@ -130,6 +146,10 @@ export default { @@ -130,6 +146,10 @@ export default {
130 .el-menu-item { 146 .el-menu-item {
131 border-right: 3px solid rgba(0, 0, 0, 0); 147 border-right: 3px solid rgba(0, 0, 0, 0);
132 } 148 }
  149 + .el-menu-item:hover {
  150 + color: $primary;
  151 + background-color: rgba(0, 0, 0, 0);
  152 + }
133 .el-menu-item.is-active { 153 .el-menu-item.is-active {
134 background-color: rgba($primary, 0.1); 154 background-color: rgba($primary, 0.1);
135 border-right: 3px solid $primary; 155 border-right: 3px solid $primary;
examples/views/page/index.vue
  Diff comments   View file @5f3c715
1 <template> 1 <template>
2 <div class="page-index"> 2 <div class="page-index">
3 <div class="logo"> 3 <div class="logo">
4 - <img alt="logo" src="@/assets/logo.svg"> 4 + <img alt="logo" src="/img/logo.svg">
5 </div> 5 </div>
6 <div class="content"> 6 <div class="content">
7 欢迎使用<span class="name">EAGLE WEB TOOLKIT</span>组件库 7 欢迎使用<span class="name">EAGLE WEB TOOLKIT</span>组件库
@@ -22,8 +22,10 @@ export default { @@ -22,8 +22,10 @@ export default {
22 width: 100%; 22 width: 100%;
23 text-align: center; 23 text-align: center;
24 .logo { 24 .logo {
  25 + display: flex;
  26 + align-items: center;
  27 + justify-content: center;
25 padding-top: 150px; 28 padding-top: 150px;
26 - margin: auto;  
27 img { 29 img {
28 width: 240px; 30 width: 240px;
29 } 31 }
webpack/markdown-loader.js
  Diff comments   View file @5f3c715
@@ -92,22 +92,38 @@ module.exports = function(source) { @@ -92,22 +92,38 @@ module.exports = function(source) {
92 </eagle-code-snippet> `; 92 </eagle-code-snippet> `;
93 } 93 }
94 }); 94 });
  95 + // 使用【markdown-it-container】插件解析【:::html :::】代码块为vue渲染
  96 + markdownIt.use(MarkdownItContainer, "html", {
  97 + // 验证代码块为【:::html :::】才进行渲染
  98 + validate(params) {
  99 + return params.trim().match(/^html\s*(.*)$/);
  100 + },
  101 + // 代码块渲染
  102 + render(tokens, idx) {
  103 + var m = tokens[idx].info.trim().match(/^html\s+(.*)$/);
  104 + if (tokens[idx].nesting === 1) {
  105 + return `<div> ${markdownIt.utils.escapeHtml(m[1])}`;
  106 + } else {
  107 + return '</div>';
  108 + }
  109 + }
  110 + });
95 // 将所有转换好的代码字符串拼接成vue单组件template、script、style格式 111 // 将所有转换好的代码字符串拼接成vue单组件template、script、style格式
96 return ` 112 return `
97 - <template>  
98 - <div class="eagle-snippet-doc">  
99 - ${markdownIt.render(source)}  
100 - </div>  
101 - </template>  
102 - <script>  
103 - export default {  
104 - name: 'eagle-component-doc',  
105 - components: {  
106 - ${componentCodeList.join(",")}  
107 - }  
108 - }  
109 - </script>  
110 - <style>  
111 - ${Array.from(styleCodeList, m => m.content).join("\n")}  
112 - </style>`; 113 + <template>
  114 + <div class="eagle-snippet-doc">
  115 + ${markdownIt.render(source)}
  116 + </div>
  117 + </template>
  118 + <script>
  119 + export default {
  120 + name: 'eagle-component-doc',
  121 + components: {
  122 + ${componentCodeList.join(",")}
  123 + }
  124 + }
  125 + </script>
  126 + <style>
  127 + ${Array.from(styleCodeList, m => m.content).join("\n")}
  128 + </style>`;
113 }; 129 };