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 000000000..e921aec03 Binary files /dev/null and b/examples/assets/images/qrcode.png differ diff --git a/examples/components/demo-block.vue b/examples/components/demo-block.vue new file mode 100644 index 000000000..36bd40166 --- /dev/null +++ b/examples/components/demo-block.vue @@ -0,0 +1,165 @@ + + + + + \ 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'; } }] ],