From e86f573ce66edd83e44953adb745b5bc445d9ce4 Mon Sep 17 00:00:00 2001 From: Leopoldthecoder Date: Mon, 22 Aug 2016 17:49:20 +0800 Subject: [PATCH 1/6] update router --- examples/app.vue | 16 +-- examples/components/lightbox.vue | 55 -------- examples/components/table-filter.vue | 30 ---- examples/components/toc-item.vue | 48 ------- examples/components/toc.vue | 203 --------------------------- examples/data/cascader.json | 29 ---- examples/data/select-disabled.json | 19 --- examples/data/select-group.json | 54 ------- examples/data/select-normal.json | 32 ----- examples/docs/guideline.md | 123 ---------------- examples/nav.config.json | 40 ++---- examples/pages/changelog.vue | 3 + examples/pages/component.vue | 3 + examples/pages/design.vue | 3 + examples/pages/guide.vue | 3 + examples/pages/nav.vue | 3 + examples/pages/resource.vue | 3 + examples/route.config.js | 40 +++++- src/index.js | 6 +- 19 files changed, 70 insertions(+), 643 deletions(-) delete mode 100644 examples/components/lightbox.vue delete mode 100644 examples/components/table-filter.vue delete mode 100644 examples/components/toc-item.vue delete mode 100644 examples/components/toc.vue delete mode 100644 examples/data/cascader.json delete mode 100644 examples/data/select-disabled.json delete mode 100644 examples/data/select-group.json delete mode 100644 examples/data/select-normal.json delete mode 100644 examples/docs/guideline.md create mode 100644 examples/pages/changelog.vue create mode 100644 examples/pages/component.vue create mode 100644 examples/pages/design.vue create mode 100644 examples/pages/guide.vue create mode 100644 examples/pages/nav.vue create mode 100644 examples/pages/resource.vue diff --git a/examples/app.vue b/examples/app.vue index 7d328be04..4a568f7d4 100644 --- a/examples/app.vue +++ b/examples/app.vue @@ -268,10 +268,6 @@
- - ELEMENT - - - - \ No newline at end of file diff --git a/examples/components/table-filter.vue b/examples/components/table-filter.vue deleted file mode 100644 index a0390df30..000000000 --- a/examples/components/table-filter.vue +++ /dev/null @@ -1,30 +0,0 @@ - - - - - \ No newline at end of file diff --git a/examples/components/toc-item.vue b/examples/components/toc-item.vue deleted file mode 100644 index 971513ab2..000000000 --- a/examples/components/toc-item.vue +++ /dev/null @@ -1,48 +0,0 @@ - - - - - diff --git a/examples/components/toc.vue b/examples/components/toc.vue deleted file mode 100644 index f7ef3c675..000000000 --- a/examples/components/toc.vue +++ /dev/null @@ -1,203 +0,0 @@ - - - - - diff --git a/examples/data/cascader.json b/examples/data/cascader.json deleted file mode 100644 index fe758cdc1..000000000 --- a/examples/data/cascader.json +++ /dev/null @@ -1,29 +0,0 @@ -[ - { - "label": "普通业务", - "value": "普通业务", - "children": [ - { - "label": "业务1", - "value": "业务1", - "children": [ - { - "label": "业务5", - "value": "业务5", - "children": [] - } - ] - }, - { - "label": "业务2", - "value": "业务2", - "children": [] - } - ] - }, - { - "label": "会员业务", - "value": "会员业务", - "children": [] - } -] diff --git a/examples/data/select-disabled.json b/examples/data/select-disabled.json deleted file mode 100644 index d977035bb..000000000 --- a/examples/data/select-disabled.json +++ /dev/null @@ -1,19 +0,0 @@ -[ - { - "label": "选项1", - "value": "结果1" - }, - { - "label": "选项2", - "value": "结果2", - "disabled": true - }, - { - "label": "选项3", - "value": "结果3" - }, - { - "label": "选项4", - "value": "结果4" - } -] diff --git a/examples/data/select-group.json b/examples/data/select-group.json deleted file mode 100644 index c30ebb732..000000000 --- a/examples/data/select-group.json +++ /dev/null @@ -1,54 +0,0 @@ -{ - "gourp1": [ - { - "label": "选项1", - "value": "结果1" - }, - { - "label": "选项2", - "value": "结果2" - }, - { - "label": "选项3", - "value": "结果3" - }, - { - "label": "选项4", - "value": "结果4" - }, - { - "label": "选项5", - "value": "结果5" - }, - { - "label": "选项6", - "value": "结果6" - } - ], - "gourp2": [ - { - "label": "选项7", - "value": "结果7" - }, - { - "label": "选项8", - "value": "结果8" - }, - { - "label": "选项9", - "value": "结果9" - }, - { - "label": "选项10", - "value": "结果10" - }, - { - "label": "选项11", - "value": "结果11" - }, - { - "label": "选项12", - "value": "结果12" - } - ] -} \ No newline at end of file diff --git a/examples/data/select-normal.json b/examples/data/select-normal.json deleted file mode 100644 index 2310060da..000000000 --- a/examples/data/select-normal.json +++ /dev/null @@ -1,32 +0,0 @@ -[ - { - "label": "选项1", - "value": "结果1", - "remark": "remark1" - }, - { - "label": "选项2", - "value": "结果2", - "remark": "remark2" - }, - { - "label": "选项3", - "value": "结果3", - "remark": "remark3" - }, - { - "label": "选项4", - "value": "结果4", - "remark": "remark4" - }, - { - "label": "选项5", - "value": "结果5", - "remark": "remark5" - }, - { - "label": "选项6", - "value": "结果6", - "remark": "remark6" - } -] diff --git a/examples/docs/guideline.md b/examples/docs/guideline.md deleted file mode 100644 index f28fa723a..000000000 --- a/examples/docs/guideline.md +++ /dev/null @@ -1,123 +0,0 @@ -
-

选择合适的导航

-

选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适(方向不明确)，以下是「侧栏导航」和「顶部导航」的区别。

- -

侧栏导航：

-

可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。

- - - - - - - - - - - - - - - - -
一级类目 - - 一级类目 - - 一级类目 -

适用于结构简单的网站；只有一级页面时，不需要使用面包屑。

-
二级类目 - - 二级类目 - - 二级类目 -

侧栏中最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。

-
三级类目 - - 三级类目 - - 三级类目 -

适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。

-
- -

顶部导航：

-

顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。

- - - - - - - - -
一级类目 - - 一级类目 - - 一级类目 -

适用于导航较少，页面篇幅较长的网站；

-
-
- - - - \ No newline at end of file diff --git a/examples/nav.config.json b/examples/nav.config.json index acf1d7964..840fcd556 100644 --- a/examples/nav.config.json +++ b/examples/nav.config.json @@ -1,31 +1,4 @@ [ - { - "group": "使用说明", - "list": [ - { - "path": "/quickstart", - "name": "快速上手" - }, - { - "path": "/development", - "name": "开发指南" - }, - { - "path": "/changelog", - "name": "更新日志" - } - ] - }, - { - "group": "设计指南", - "list": [ - { - "path": "/menu", - "name": "导航", - "description": "导航(Navigation) 可以解决用户在访问页面时：在哪里，去哪里，怎么去的问题。一般导航会有「侧栏导航」和「顶部导航」2种类型。" - } - ] - }, { "group": "Basic", "list": [ @@ -247,5 +220,18 @@ "description": "出现在按钮、图标旁的数字或状态标记" } ] + }, + { + "group": "使用说明", + "list": [ + { + "path": "/quickstart", + "name": "快速上手" + }, + { + "path": "/development", + "name": "开发指南" + } + ] } ] diff --git a/examples/pages/changelog.vue b/examples/pages/changelog.vue new file mode 100644 index 000000000..660c7d6e2 --- /dev/null +++ b/examples/pages/changelog.vue @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/examples/pages/component.vue b/examples/pages/component.vue new file mode 100644 index 000000000..ba32c22ce --- /dev/null +++ b/examples/pages/component.vue @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/examples/pages/design.vue b/examples/pages/design.vue new file mode 100644 index 000000000..2cd156d6e --- /dev/null +++ b/examples/pages/design.vue @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/examples/pages/guide.vue b/examples/pages/guide.vue new file mode 100644 index 000000000..ba32c22ce --- /dev/null +++ b/examples/pages/guide.vue @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/examples/pages/nav.vue b/examples/pages/nav.vue new file mode 100644 index 000000000..c51234892 --- /dev/null +++ b/examples/pages/nav.vue @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/examples/pages/resource.vue b/examples/pages/resource.vue new file mode 100644 index 000000000..d59cdd2c9 --- /dev/null +++ b/examples/pages/resource.vue @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/examples/route.config.js b/examples/route.config.js index 04f2b87a6..c12868857 100644 --- a/examples/route.config.js +++ b/examples/route.config.js @@ -1,15 +1,18 @@ import navConfig from './nav.config.json'; const registerRoute = (config) => { - let route = []; + let route = [{ + path: '/component', + component: require('./pages/component.vue'), + children: [] + }]; config .map(nav => nav.list.map(page => { - if (page.path === '/changelog') return; const component = require(`./docs${page.path}.md`); - route.push({ - path: page.path, + route[0].children.push({ + path: page.path.slice(1), meta: { title: page.title || page.name, description: page.description @@ -24,10 +27,33 @@ const registerRoute = (config) => { const route = registerRoute(navConfig); -route.route.push({ +let guideRoute = { + path: '/guide', + name: '指南', + component: require('./pages/guide.vue'), + children: [{ + path: 'design', + name: '设计原则', + component: require('./pages/design.vue') + }, { + path: 'nav', + name: '导航', + component: require('./pages/nav.vue') + }] +}; + +let resourceRoute = { + path: '/resource', + name: '资源', + component: require('./pages/resource.vue') +}; + +let changeLogRoute = { path: '/changelog', - component: require('../CHANGELOG.md') -}); + component: require('./pages/changelog.vue') +}; + +route.route = route.route.concat([guideRoute, resourceRoute, changeLogRoute]); route.route.push({ path: '*', diff --git a/src/index.js b/src/index.js index 7a3f3d135..9e2595432 100644 --- a/src/index.js +++ b/src/index.js @@ -43,7 +43,7 @@ import Loading from '../packages/loading/index.js'; import Icon from '../packages/icon/index.js'; import Row from '../packages/row/index.js'; import Col from '../packages/col/index.js'; -// import Upload from '../packages/upload/index.js'; +import Upload from '../packages/upload/index.js'; import Progress from '../packages/progress/index.js'; import Spinner from '../packages/spinner/index.js'; import Message from '../packages/message/index.js'; @@ -98,7 +98,7 @@ const install = function(Vue) { Vue.component(Icon.name, Icon); Vue.component(Row.name, Row); Vue.component(Col.name, Col); - // Vue.component(Upload.name, Upload); + Vue.component(Upload.name, Upload); Vue.component(Progress.name, Progress); Vue.component(Spinner.name, Spinner); Vue.component(Message.name, Message); @@ -170,7 +170,7 @@ module.exports = { Icon, Row, Col, - // Upload, + Upload, Progress, Spinner, Message, From 3d90f2a3c33095a3f930f4e3e609c7aa90a35295 Mon Sep 17 00:00:00 2001 From: baiyaaaaa Date: Mon, 22 Aug 2016 17:42:04 +0800 Subject: [PATCH 2/6] component header --- examples/assets/styles/common.css | 7 +++- examples/components/header.vue | 67 +++++++++++++++++++++++++++++++ examples/pages/index.vue | 6 +++ 3 files changed, 79 insertions(+), 1 deletion(-) create mode 100644 examples/components/header.vue create mode 100644 examples/pages/index.vue diff --git a/examples/assets/styles/common.css b/examples/assets/styles/common.css index de970e0b8..cba9f7bc5 100644 --- a/examples/assets/styles/common.css +++ b/examples/assets/styles/common.css @@ -85,4 +85,9 @@ display: none; } } -} \ No newline at end of file +} + +.container { + width: 960px; + margin: 0 auto; +} diff --git a/examples/components/header.vue b/examples/components/header.vue new file mode 100644 index 000000000..4bafda16b --- /dev/null +++ b/examples/components/header.vue @@ -0,0 +1,67 @@ + + + diff --git a/examples/pages/index.vue b/examples/pages/index.vue new file mode 100644 index 000000000..bc1dc8115 --- /dev/null +++ b/examples/pages/index.vue @@ -0,0 +1,6 @@ + + From 1b63c03dd74364f6afdc60b355bb5a50a4f61371 Mon Sep 17 00:00:00 2001 From: Leopoldthecoder Date: Tue, 23 Aug 2016 16:57:58 +0800 Subject: [PATCH 3/6] add footer and demo-block --- examples/app.vue | 6 +- examples/assets/images/qrcode.png | Bin 0 -> 12837 bytes examples/components/demo-block.vue | 165 +++++++++++++++++++++++ examples/components/footer.vue | 133 +++++++++++++++++++ examples/docs/alert.md | 206 ++++++++++++++++------------- examples/docs/notification.md | 81 ++++++------ examples/entry.js | 2 + examples/index.template.html | 1 + scripts/cooking.demo.js | 20 +-- 9 files changed, 475 insertions(+), 139 deletions(-) create mode 100644 examples/assets/images/qrcode.png create mode 100644 examples/components/demo-block.vue create mode 100644 examples/components/footer.vue diff --git a/examples/app.vue b/examples/app.vue index 4a568f7d4..bd917ebd2 100644 --- a/examples/app.vue +++ b/examples/app.vue @@ -12,10 +12,14 @@ } body { - font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; + font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif; overflow: auto; } + .pure-g { + font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif; + } + .pure-g [class *= "pure-u"] { font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif; } diff --git a/examples/assets/images/qrcode.png b/examples/assets/images/qrcode.png new file mode 100644 index 0000000000000000000000000000000000000000..e921aec031092d5eda9683a18e7fbb91af4d0e51 GIT binary patch literal 12837 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 +
+ +
+ + {{ controlText }} +
+
+ + + + + \ No newline at end of file diff --git a/examples/components/footer.vue b/examples/components/footer.vue new file mode 100644 index 000000000..a51ee799b --- /dev/null +++ b/examples/components/footer.vue @@ -0,0 +1,133 @@ + + + diff --git a/examples/docs/alert.md b/examples/docs/alert.md index 6e758c1e3..e51cbfaa1 100644 --- a/examples/docs/alert.md +++ b/examples/docs/alert.md @@ -11,124 +11,146 @@ .demo-box.demo-alert .el-alert { margin: 20px 0 0; } + + .demo-box.demo-alert .el-alert:first-child { + margin: 0; + } ## 基本用法 -Alert 组件提供四种主题，由`type`属性指定，默认值为`info`，下面的示例展示了四种不同的主题。 - -
- - - - -
- +::: demo Alert 组件提供四种主题，由 `type` 属性指定，默认值为 `info`。 ```html - - - - + ``` +::: ## 自定义关闭按钮 -在alert组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。 - -`closable`属性决定是否可关闭，接受`boolean`，默认为`true`。 - -你可以设置`close-text`属性来代替右侧的关闭图标，注意：`close-text`必须为文本。 - -设置`close`事件来设置关闭时的回调。 - -下面的示例展示了上述三种情况： - -
- - - -
- +::: demo 在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。`closable` 属性决定是否可关闭，接受 `boolean`，默认为 `true`。你可以设置 `close-text` 属性来代替右侧的关闭图标，注意：`close-text` 必须为文本。设置 `close` 事件来设置关闭时的回调。 ```html - - - + + + ``` +::: ## 带有 icon -通过设置`show-icon`属性来显示alert的icon，这能更有效的向用户展示你的显示意图。 - -
- - - - -
- +::: demo 通过设置 `show-icon` 属性来显示 Alert 的 icon，这能更有效的向用户展示你的显示意图。 ```html - - - - + ``` +::: ## 带有辅助性文字介绍 -除了必填的`title`属性外，你可以设置`description`属性来帮助你更好的介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。 - -
- -
- +::: demo 除了必填的 `title` 属性外，你可以设置 `description` 属性来帮助你更好的介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。 ```html - - + ``` +::: ## 带有 icon 和辅助性文字介绍 -最后，这是一个同时具有 icon 和辅助性文字的样例。 - -
- - - - -
- +::: demo 最后，这是一个同时具有 icon 和辅助性文字的样例。 ```html - - - - - - - - - - - + ``` +::: ## Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | diff --git a/examples/docs/notification.md b/examples/docs/notification.md index 0961f0976..9e41f323a 100644 --- a/examples/docs/notification.md +++ b/examples/docs/notification.md @@ -73,15 +73,14 @@ ## 基本用法 -Notification 组件提供通知功能，Element 注册了`$notify`方法，接收一个`options`字面量参数，最简单的条件下，你可以设置`title`字段和`message`字段，用于设置通知的标题和正文，下面是一个最简单的情况的样例： - -
- 点击展示 Notification -
- +::: demo Notification 组件提供通知功能，Element 注册了 `$notify` 方法，接收一个 `options` 字面量参数，在最简单的情况下，你可以设置 `title` 字段和 `message` 字段，用于设置通知的标题和正文。 ```html ``` +::: ## 带有 icon -Element 也为 Notification 组件准备了四种通知类型：`success`, `warning`, `info`, `error`。 - -通过`type`字段来设置，除此以外的值将被忽略，下面是四种类型的样例： - -
- 成功 - 警告 - 消息 - 错误 -
- +::: demo Element 为 Notification 组件准备了四种通知类型：`success`, `warning`, `info`, `error`。通过 `type` 字段来设置，除此以外的值将被忽略。 ```html ``` +::: ## 不会自动关闭 -默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置 `duration`，可以控制关闭的时间间隔，特别的是，如果设置为`0`，则不会自动关闭，下面是一个不会自动关闭的样例： - -注意：`duration`接收一个`Number`，单位为毫秒，默认为`4500`。 - -
- 不会自动关闭的 Notification -
- +::: demo 默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置 `duration`，可以控制关闭的时间间隔，特别的是，如果设置为 `0`，则不会自动关闭。注意：`duration` 接收一个 `Number`，单位为毫秒，默认为 `4500`。 ```html ``` +::: ## 回调函数 -Element 为关闭操作设置了回调函数，在关闭时会触发`onClose`，你可以通过设置`onClose`参数来处理后续操作，它是一个`Function`，下面是一个样例，会在控制台输出：Notification 已关闭。 - -
- 带有回调函数的 Notification -
- +::: demo Element 为关闭操作设置了回调函数，在关闭时会触发 `onClose`，你可以通过设置 `onClose` 参数来处理后续操作，它是一个 `Function`。本例会在控制台输出：Notification 已关闭。 ```html ``` +::: ## 全局方法 diff --git a/examples/entry.js b/examples/entry.js index 4e9c5dccd..292ff3f18 100644 --- a/examples/entry.js +++ b/examples/entry.js @@ -4,9 +4,11 @@ import VueRouter from 'vue-router'; import configRouter from './route.config'; import Element from 'main/index.js'; import 'packages/theme-default/src/index.css'; +import demoBlock from './components/demo-block.vue'; Vue.use(Element); Vue.use(VueRouter); +Vue.component('demo-block', demoBlock); const router = new VueRouter({ base: __dirname, diff --git a/examples/index.template.html b/examples/index.template.html index 1fe11fdcf..33b355738 100644 --- a/examples/index.template.html +++ b/examples/index.template.html @@ -2,6 +2,7 @@ + ELEMENT diff --git a/scripts/cooking.demo.js b/scripts/cooking.demo.js index 22b0b66dc..4033213bb 100644 --- a/scripts/cooking.demo.js +++ b/scripts/cooking.demo.js @@ -4,6 +4,13 @@ var md = require('markdown-it')(); var Components = require('../components.json'); var striptags = require('strip-tags'); +function convert(str){ + str = str.replace(/(&#x)(\w{4});/gi,function($0){ + return String.fromCharCode(parseInt(encodeURIComponent($0).replace(/(%26%23x)(\w{4})(%3B)/g,"$2"),16)); + }); + return str; +} + cooking.set({ entry: { app: './examples/entry.js', @@ -56,27 +63,24 @@ cooking.add('vueMarkdown', { }], [require('markdown-it-container'), 'demo', { validate: function(params) { - return params.trim().match(/^demo\s+(.*)$/); + return params.trim().match(/^demo\s*(.*)$/); }, render: function (tokens, idx) { - var m = tokens[idx].info.trim().match(/^demo\s+(.*)$/); - + var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/); if (tokens[idx].nesting === 1) { var description = (m && m.length > 1) ? m[1] : ''; - var html = striptags(tokens[idx + 1].content, 'script'); - + var html = convert(striptags(tokens[idx + 1].content, 'script')); var descriptionHTML = description ? '
' + md.render(description) + '
' : ''; - - return `
+ return `
${html}
${descriptionHTML}
`; } - return '
\n'; + return '
\n'; } }] ], From 0d6fdd2bd627dad93ac17498549433167072451d Mon Sep 17 00:00:00 2001 From: baiyaaaaa Date: Tue, 23 Aug 2016 14:03:45 +0800 Subject: [PATCH 4/6] component side-nav --- examples/app.vue | 168 ++++++++++++------------------- examples/components/header.vue | 2 +- examples/components/side-nav.vue | 52 ++++++++++ examples/entry.js | 4 + examples/pages/component.vue | 38 ++++++- 5 files changed, 160 insertions(+), 104 deletions(-) create mode 100644 examples/components/side-nav.vue diff --git a/examples/app.vue b/examples/app.vue index bd917ebd2..cbc1076bd 100644 --- a/examples/app.vue +++ b/examples/app.vue @@ -270,115 +270,81 @@ diff --git a/examples/components/header.vue b/examples/components/header.vue index 4bafda16b..8466396df 100644 --- a/examples/components/header.vue +++ b/examples/components/header.vue @@ -3,12 +3,12 @@ height: 80px; background-color: #20a0ff; color: #fff; - position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; line-height: @height; + margin-bottom: 48px; .container { height: 100%; diff --git a/examples/components/side-nav.vue b/examples/components/side-nav.vue new file mode 100644 index 000000000..760711df1 --- /dev/null +++ b/examples/components/side-nav.vue @@ -0,0 +1,52 @@ + + + diff --git a/examples/entry.js b/examples/entry.js index 292ff3f18..ae8c0ff44 100644 --- a/examples/entry.js +++ b/examples/entry.js @@ -6,10 +6,14 @@ import Element from 'main/index.js'; import 'packages/theme-default/src/index.css'; import demoBlock from './components/demo-block.vue'; +import SideNav from './components/side-nav'; + Vue.use(Element); Vue.use(VueRouter); Vue.component('demo-block', demoBlock); +Vue.component('side-nav', SideNav); + const router = new VueRouter({ base: __dirname, routes: configRouter diff --git a/examples/pages/component.vue b/examples/pages/component.vue index ba32c22ce..449be196b 100644 --- a/examples/pages/component.vue +++ b/examples/pages/component.vue @@ -1,3 +1,37 @@ \ No newline at end of file +
+ + + + +
+ +
+ +
+ + From 424793298857aed958770889d9ccaadeb84227c9 Mon Sep 17 00:00:00 2001 From: baiyaaaaa Date: Tue, 23 Aug 2016 17:39:58 +0800 Subject: [PATCH 5/6] component nav --- examples/components/side-nav.vue | 106 +++++-- examples/docs/layout.md | 0 examples/nav.config.json | 468 ++++++++++++++++--------------- examples/pages/component.vue | 42 ++- examples/route.config.js | 46 ++- 5 files changed, 362 insertions(+), 300 deletions(-) create mode 100644 examples/docs/layout.md diff --git a/examples/components/side-nav.vue b/examples/components/side-nav.vue index 760711df1..3936d59fb 100644 --- a/examples/components/side-nav.vue +++ b/examples/components/side-nav.vue @@ -1,40 +1,86 @@ diff --git a/examples/route.config.js b/examples/route.config.js index c12868857..0dfa73204 100644 --- a/examples/route.config.js +++ b/examples/route.config.js @@ -6,21 +6,33 @@ const registerRoute = (config) => { component: require('./pages/component.vue'), children: [] }]; - config - .map(nav => - nav.list.map(page => { - const component = require(`./docs${page.path}.md`); + function addRoute(page) { + const component = require(`./docs${page.path}.md`); - route[0].children.push({ - path: page.path.slice(1), - meta: { - title: page.title || page.name, - description: page.description - }, - component: component.default || component + route[0].children.push({ + path: page.path.slice(1), + meta: { + title: page.title || page.name, + description: page.description + }, + component: component.default || component + }); + } + config + .map(nav => { + if (nav.groups) { + nav.groups.map(group => { + group.list.map(page => { + addRoute(page); + }) }); - }) - ); + } + if (nav.children) { + nav.children.map(page => { + addRoute(page); + }); + } + }); return { route, navs: config }; }; @@ -48,12 +60,18 @@ let resourceRoute = { component: require('./pages/resource.vue') }; +let indexRoute = { + path: '/', + name: '首页', + component: require('./pages/index.vue') +}; + let changeLogRoute = { path: '/changelog', component: require('./pages/changelog.vue') }; -route.route = route.route.concat([guideRoute, resourceRoute, changeLogRoute]); +route.route = route.route.concat([indexRoute, guideRoute, resourceRoute, changeLogRoute]); route.route.push({ path: '*', From 2d9a77b474cd649c26ce31a3fc9e751bfc8b4543 Mon Sep 17 00:00:00 2001 From: baiyaaaaa Date: Tue, 23 Aug 2016 19:15:15 +0800 Subject: [PATCH 6/6] index --- examples/app.vue | 332 +----------- examples/assets/images/Axure-Components.svg | 41 ++ examples/assets/images/Module.svg | 62 +++ examples/assets/images/Sketch-Template.svg | 37 ++ examples/assets/images/banner-bg.svg | 559 ++++++++++++++++++++ examples/assets/images/fankui.svg | 28 + examples/assets/images/guide1.png | Bin 34079 -> 0 bytes examples/assets/images/guide2.png | Bin 50307 -> 0 bytes examples/assets/images/guide3.png | Bin 32934 -> 0 bytes examples/assets/images/guide4.png | Bin 31278 -> 0 bytes examples/assets/images/kekong.svg | 28 + examples/assets/images/navbar_0.png | Bin 0 -> 5178 bytes examples/assets/images/navbar_1.png | Bin 0 -> 5328 bytes examples/assets/images/navbar_2.png | Bin 0 -> 7935 bytes examples/assets/images/navbar_3.png | Bin 0 -> 5416 bytes examples/assets/images/xiaolv.svg | 36 ++ examples/assets/images/yizhi.svg | 58 ++ examples/assets/images/zhinan.svg | 45 ++ examples/assets/images/ziyuan.svg | 42 ++ examples/assets/images/zujian.svg | 67 +++ examples/components/footer.vue | 1 + examples/components/header.vue | 147 ++++- examples/components/side-nav.vue | 28 +- examples/docs/alert.md | 30 +- examples/entry.js | 6 +- examples/pages/component.vue | 46 +- examples/pages/design.vue | 81 ++- examples/pages/guide.vue | 82 ++- examples/pages/index.vue | 174 ++++++ examples/pages/nav.vue | 153 +++++- examples/pages/resource.vue | 103 +++- examples/route.config.js | 2 +- package.json | 3 +- 33 files changed, 1817 insertions(+), 374 deletions(-) create mode 100644 examples/assets/images/Axure-Components.svg create mode 100644 examples/assets/images/Module.svg create mode 100644 examples/assets/images/Sketch-Template.svg create mode 100644 examples/assets/images/banner-bg.svg create mode 100644 examples/assets/images/fankui.svg delete mode 100644 examples/assets/images/guide1.png delete mode 100644 examples/assets/images/guide2.png delete mode 100644 examples/assets/images/guide3.png delete mode 100644 examples/assets/images/guide4.png create mode 100644 examples/assets/images/kekong.svg create mode 100644 examples/assets/images/navbar_0.png create mode 100644 examples/assets/images/navbar_1.png create mode 100644 examples/assets/images/navbar_2.png create mode 100644 examples/assets/images/navbar_3.png create mode 100644 examples/assets/images/xiaolv.svg create mode 100644 examples/assets/images/yizhi.svg create mode 100644 examples/assets/images/zhinan.svg create mode 100644 examples/assets/images/ziyuan.svg create mode 100644 examples/assets/images/zujian.svg diff --git a/examples/app.vue b/examples/app.vue index cbc1076bd..d7b1aa2ca 100644 --- a/examples/app.vue +++ b/examples/app.vue @@ -1,7 +1,4 @@ diff --git a/examples/components/side-nav.vue b/examples/components/side-nav.vue index 3936d59fb..6c3e11349 100644 --- a/examples/components/side-nav.vue +++ b/examples/components/side-nav.vue @@ -9,6 +9,7 @@ } ul { padding: 0; + margin: 0; } .nav-item { @@ -50,15 +51,22 @@
  • - {{item.name}} + {{item.name}} + +
    • + v-text="navItem.title || navItem.name">
    @@ -68,13 +76,13 @@
    • + v-for="navItem in group.list" + v-if="!navItem.disabled"> + v-text="navItem.title">
@@ -86,7 +94,11 @@ diff --git a/examples/pages/index.vue b/examples/pages/index.vue index bc1dc8115..62b7a96fe 100644 --- a/examples/pages/index.vue +++ b/examples/pages/index.vue @@ -1,6 +1,180 @@ + diff --git a/examples/pages/nav.vue b/examples/pages/nav.vue index c51234892..e8399e712 100644 --- a/examples/pages/nav.vue +++ b/examples/pages/nav.vue @@ -1,3 +1,152 @@ + \ No newline at end of file +
+

导航

+
+

导航可以解决用户在访问页面时：在哪里，去哪里，怎p去的问题。一般导航会有「侧栏导航」和「顶部导航」2种类型。

+
+
+

选择合适的导航

+

选择合适的导航可以让用户在产品的使用过程中非常流畅,相反若是不合适就会引起用户操作不适(方向不明确)，以下是「侧栏导航」和 「顶部导航」的区别。

+
+
+

侧栏导航

+ + +

可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。

+ + + 一级类目 +
一级类目
+

适用于结构简单的网站：只有一级页面时，不需要使用面包屑。

+ 二级类目 +
二级类目
+

侧栏中最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。

+ 三级类目 +
三级类目
+

适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。

+ + +
+
+

顶部导航

+ + +

顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。

+ + + +

适用于导航较少，页面篇幅较长的网站；

+ + +
+
+
+ +
+ +
+ +
+
+ + diff --git a/examples/pages/resource.vue b/examples/pages/resource.vue index d59cdd2c9..bce29ae3b 100644 --- a/examples/pages/resource.vue +++ b/examples/pages/resource.vue @@ -1,3 +1,102 @@ + \ No newline at end of file +
+

资源

+

这里提供 Element 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。

+
+
    +
  • +
    + +

    Axure Components

    +

    通过在 Axure 中导入 Element 组件库，可以在交互设计阶段方便地调用常用的组件

    + 下载 +
    +
    • +
  • +
    + +

    Sketch Template

    +

    从 Element Template 快速调用常用组件，在提升设计效率的同时，保证统一的视觉风格

    + 下载 +
    +
    • +
  • +
    + +

    组件交互文档

    +

    进一步查看 Element 交互文档，从一个较为微观的角度详细地了解各个组件的交互细节

    + 下载 +
    +
    • +
+
+
+ diff --git a/examples/route.config.js b/examples/route.config.js index 0dfa73204..6468595e2 100644 --- a/examples/route.config.js +++ b/examples/route.config.js @@ -24,7 +24,7 @@ const registerRoute = (config) => { nav.groups.map(group => { group.list.map(page => { addRoute(page); - }) + }); }); } if (nav.children) { diff --git a/package.json b/package.json index 071ee27bd..52081fe86 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,8 @@ "url": "https://github.com/eleme/element-ui/issues" }, "dependencies": { - "object-assign": "^4.1.0" + "object-assign": "^4.1.0", + "typing.js": "^2.1.0" }, "devDependencies": { "babel-helper-vue-jsx-merge-props": "^1.0.1",