fix encoding apostrophes/some components change to new template

2e0a1419 · SkyAo · 315ba8c2 · 2e0a1419 · 2e0a1419 · 2e0a1419
Commit 2e0a1419 authored Aug 25, 2016 by SkyAo
21 changed files
--- a/examples/components/demo-block.vue
+++ b/examples/components/demo-block.vue
@@ -44,7 +44,8 @@
      font-size: 14px;
      line-height: 1.5;
      color: #5e6d82;
+      word-break: break-word;
      p {
        margin: 0;
      }

--- a/examples/components/header.vue
+++ b/examples/components/header.vue
@@ -117,7 +117,7 @@
          </li>
          <li class="nav-item">
            <router-link
-              active-class="active" 
+              active-class="active"
              to="/resource"
              exact>资源
            </router-link>

--- a/examples/docs/badge.md
+++ b/examples/docs/badge.md
 ## 基础用法
-Badge 组件可以在右上角展示标记，最常见的用法是用于展示消息数，定义`value`属性，它接受`Number`或者`String`。
+Badge 组件可以在右上角展示标记，最常见的用法是用于展示消息数。
-下面是一个样例，我们在 Badge 组件内嵌入 Button 组件：
+:::demo 定义`value`属性，它接受`Number`或者`String`。
-<el-row>
-  <el-col :span="12">
-    <el-badge :value="12" class="item">
-      <el-button size="small">评论</el-button>
-    </el-badge>
-    <el-badge :value="3" class="item">
-      <el-button size="small">回复</el-button>
-    </el-badge>
-  </el-col>
-  <el-col :span="12">
-    <el-dropdown text="点我查看" type="text" :icon-separate="false" trigger="click">
-      <el-dropdown-item class="clearfix">
-        评论
-        <el-badge class="mark" :value="12" />
-      </el-dropdown-item>
-      <el-dropdown-item class="clearfix">
-        回复
-        <el-badge class="mark" :value="3" />
-      </el-dropdown-item>
-    </el-dropdown>
-  </el-col>
-</el-row>
 ```html
 <el-badge :value="12" class="item">
@@ -45,22 +22,12 @@ Badge 组件可以在右上角展示标记，最常见的用法是用于展示
  </el-dropdown-item>
 </el-dropdown>
 ```
+:::
 ## 最大值
-为了方便使用，Badge 组件可以自定义显示的最大值，由`max`属性定义，它接受一个`Number`，需要注意的是，只有当`value`为`Number`时，它才会生效。
+为了方便使用，Badge 组件可以自定义显示的最大值。
-下面是一个样例：
-<el-row>
+:::demo 由`max`属性定义，它接受一个`Number`，需要注意的是，只有当`value`为`Number`时，它才会生效。
-  <el-col :span="12">
-    <el-badge :value="200" :max="99" class="item">
-      <el-button size="small">评论</el-button>
-    </el-badge>
-    <el-badge :value="100" :max="10" class="item">
-      <el-button size="small">回复</el-button>
-    </el-badge>
-  </el-col>
-</el-row>
 ```html
 <el-badge :value="200" :max="99" class="item">
@@ -70,23 +37,13 @@ Badge 组件可以在右上角展示标记，最常见的用法是用于展示
  <el-button size="small">回复</el-button>
 </el-badge>
 ```
+:::
 ## 自定义内容
-定义`value`为`String`类型是时可以用于显示自定义文本，下面是两个样例，它们可以启发你在适时的情况使用 Badge：
+下面是两个样例，它们可以启发你在适时的情况使用 Badge：
+:::demo 定义`value`为`String`类型是时可以用于显示自定义文本。
-<el-row>
-  <el-col :span="12">
-    <el-badge value="new" class="item">
-      <el-button size="small">评论</el-button>
-    </el-badge>
-    <el-badge value="hot" class="item">
-      <el-button size="small">回复</el-button>
-    </el-badge>
-  </el-col>
-</el-row>
 ```html
 <el-badge value="new" class="item">
@@ -96,18 +53,13 @@ Badge 组件可以在右上角展示标记，最常见的用法是用于展示
  <el-button size="small">回复</el-button>
 </el-badge>
 ```
+:::
 ## 小红点
-除了数字外，设置`is-dot`属性，它接受一个`Boolean`。可以使badge组件显示为一个小红点，来提醒用户需要关注的内容，此时设置其他属性均无效。
-<el-row>
+可以使 Badge 组件显示为一个小红点，来提醒用户需要关注的内容，此时设置其他属性均无效。
-  <el-col :span="12">
-    <el-badge is-dot class="item">数据查询</el-badge>
+:::demo 除了数字外，设置`is-dot`属性，它接受一个`Boolean`。
-    <el-badge is-dot class="item">
-      <el-button class="share-button" icon="share" type="primary"></el-button>
-    </el-badge>
-  </el-col>
-</el-row>
 ```html
 <el-badge is-dot class="item">数据查询</el-badge>
@@ -115,6 +67,7 @@ Badge 组件可以在右上角展示标记，最常见的用法是用于展示
  <el-button class="share-button" icon="share" type="primary"></el-button>
 </el-badge>
 ```
+:::
 <style scoped>
  .share-button {

--- a/examples/docs/breadcrumb.md
+++ b/examples/docs/breadcrumb.md
@@ -2,19 +2,7 @@
 Breadcrumb，面包屑导航，用于提供给用户一个回溯到首页的路径，最后一级即为当前位置。
-在`el-breadcrumb`中使用`el-breadcrumb-item`标签表示从首页开始的每一级。
+:::demo 在`el-breadcrumb`中使用`el-breadcrumb-item`标签表示从首页开始的每一级。Element 提供了一个`separator`属性，在`el-breadcrumb`标签中设置它来决定分隔符，它只能是字符串，默认为斜杠`/`。
-Element 提供了一个`separator`属性，在`el-breadcrumb`标签中设置它来决定分隔符，它只能是字符串，默认为斜杠`/`。
-<div>
-  <el-breadcrumb separator="//">
-    <el-breadcrumb-item>Home</el-breadcrumb-item>
-    <el-breadcrumb-item>Page 1</el-breadcrumb-item>
-    <el-breadcrumb-item>Page 1-2</el-breadcrumb-item>
-    <el-breadcrumb-item>Page 1-2-1</el-breadcrumb-item>
-  </el-breadcrumb>
-</div>
 ```html
 <el-breadcrumb separator="//">
@@ -24,6 +12,7 @@ Element 提供了一个`separator`属性，在`el-breadcrumb`标签中设置它
  <el-breadcrumb-item>Page 1-2-1</el-breadcrumb-item>
 </el-breadcrumb>
 ```
+:::
 ## Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |

--- a/examples/docs/button.md
+++ b/examples/docs/button.md
@@ -31,26 +31,7 @@
 ## 基础用法
-Button 组件默认提供7种主题，由`type`属性来定义，默认为`default`：
+:::demo Button 组件默认提供7种主题，由`type`属性来定义，默认为`default`。
-<div class="demo-box demo-button">
-  <el-button>Default</el-button>
-  <el-button type="primary">primary</el-button>
-  <el-button type="success">success</el-button>
-  <el-button type="warning">warning</el-button>
-  <el-button type="danger">danger</el-button>
-  <el-button type="info">info</el-button>
-  <el-button type="text">text button</el-button>
-</div>
-你可以使用`disabled`属性来定义按钮是否可用，它接受一个`Boolean`值：
-<div class="demo-box demo-button">
-  <el-button>Default</el-button>
-  <el-button :disabled="true">disabled</el-button>
-</div>
-下面是他们的样例代码：
 ```html
 <el-button>Default</el-button>
@@ -60,26 +41,20 @@ Button 组件默认提供7种主题，由`type`属性来定义，默认为`defau
 <el-button type="danger">danger</el-button>
 <el-button type="info">info</el-button>
 <el-button type="text">text button</el-button>
-<el-button :disabled="true">disabled</el-button>
 ```
+:::
-## Plain Button
+:::demo 你可以使用`disabled`属性来定义按钮是否可用，它接受一个`Boolean`值。
-默认的`Default`主题，我们称之为朴素按钮(Plain Button)，朴素按钮同样设置了不同的`type`属性对应的样式（可选值同上），默认为`info`。
-设置`plain`属性，它接受一个`Boolean`。
+```html
+<el-button :disabled="true">disabled</el-button>
-注意，在该情况下，`type`虽然可以为`text`，但是是没有意义的，会显示为`text button`的样式。
+```
+:::
-你可以 Hover 在样例上进行预览：
+## Plain Button
+默认的`Default`主题，我们称之为朴素按钮(Plain Button)，你可以 hover 在样例上进行预览。
-<div class="demo-box demo-button">
+:::demo 朴素按钮同样设置了不同的`type`属性对应的样式（可选值同上），默认为`info`。设置`plain`属性，它接受一个`Boolean`。注意，在该情况下，`type`虽然可以为`text`，但是是没有意义的，会显示为`text button`的样式。
-  <el-button :plain="true">Default</el-button>
-  <el-button :plain="true" type="success">success</el-button>
-  <el-button :plain="true" type="warning">warning</el-button>
-  <el-button :plain="true" type="danger">danger</el-button>
-  <el-button :plain="true" :disabled="true">disabled</el-button>
-</div>
 ```html
 <el-button :plain="true">Default</el-button>
@@ -88,17 +63,13 @@ Button 组件默认提供7种主题，由`type`属性来定义，默认为`defau
 <el-button :plain="true" type="danger">danger</el-button>
 <el-button :plain="true" :disabled="true">disabled</el-button>
 ```
+:::
 ## 尺寸
-Button 组件提供除了默认值以外的三种尺寸：`large`、`small`、`mini`来满足不同的需求，通过设置`size`属性来配置它们。
+Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。
-<div class="demo-box demo-button">
+:::demo 额外的尺寸：`large`、`small`、`mini`，通过设置`size`属性来配置它们。
-  <el-button type="primary" size="large">large</el-button>
-  <el-button type="primary">Default</el-button>
-  <el-button type="primary" size="small">small</el-button>
-  <el-button type="primary" size="mini">mini</el-button>
-</div>
 ```html
 <el-button type="primary" size="large">large</el-button>
@@ -106,21 +77,13 @@ Button 组件提供除了默认值以外的三种尺寸：`large`、`small`、`m
 <el-button type="primary" size="small">small</el-button>
 <el-button type="primary" size="mini">mini</el-button>
 ```
+:::
 ## Loading
-Button 组件提供的`loading`属性可以方便的让你处理 loading 状态，它接受一个`Boolean`，要设置为 loading 状态，只要设置`loading`属性为`true`即可，下面是一个样例：
+可以方便的处理 loading 状态，点击下面的按钮预览效果。
-<div class="demo-box demo-button">
-  <el-button type="primary" :loading="true">Button</el-button>
-</div>
-点击后变成 loading 状态的样例，尝试点击它：
-<div class="demo-box demo-button">
+:::demo 要设置为 loading 状态，只要设置`loading`属性为`true`即可。
-  <el-button type="primary" :loading="isLoading" @click.native="isLoading = true">Button</el-button>
-  <el-button type="primary" icon="search" :loading="isLoading2" @click.native="isLoading2 = true">Button</el-button>
-</div>
 ```html
 <el-button type="primary" :loading="true">Button</el-button>
@@ -128,45 +91,26 @@ Button 组件提供的`loading`属性可以方便的让你处理 loading 状态
 <el-button type="primary" :loading="isLoading" @click.native="isLoading = true">Button</el-button>
 <el-button type="primary" icon="search" :loading="isLoading2" @click.native="isLoading2 = true">Button</el-button>
 ```
+:::
 ## 图标按钮
-理所当然的，Element 也支持图标按钮，设置`icon`属性即可，icon 的列表可以参考 Element 的 icon 组件，下面是简单的预览：
+带图标的按钮可增强辨识度(有文字)或节省空间(无文字)。
-<div class="demo-box demo-button">
+:::demo 设置`icon`属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用`i`标签即可，可以使用自定义图标。
-  <el-button type="primary" icon="edit"></el-button>
-  <el-button type="primary" icon="search">Search</el-button>
-</div>
-除此以外，你也可以设置在文字右边的 icon ，只要使用`i`标签即可，使用图标组件来实现它，由此，你可以使用自己的图标了：
-<div class="demo-box demo-button">
-  <el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>
-</div>
 ```html
 <el-button type="primary" icon="edit"></el-button>
 <el-button type="primary" icon="search">Search</el-button>
 <el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>
 ```
+:::
 ## 按钮组
-如果你需要多个并列的按钮，按钮组可以帮你轻松的实现它，使用`<el-button-group>`标签来嵌套你的按钮即可。
+如果你需要多个并列的按钮，按钮组可以帮你轻松的实现它。
-<div class="demo-box demo-button">
+:::demo 使用`<el-button-group>`标签来嵌套你的按钮。
-  <el-button-group>
-    <el-button>Button</el-button>
-    <el-button>Button</el-button>
-    <el-button>Button</el-button>
-  </el-button-group>
-  <div></div>
-  <el-button-group>
-    <el-button type="primary" icon="edit"></el-button>
-    <el-button type="primary" icon="share"></el-button>
-    <el-button type="primary" icon="delete"></el-button>
-  </el-button-group>
-</div>
 ```html
 <el-button-group>
@@ -181,6 +125,7 @@ Button 组件提供的`loading`属性可以方便的让你处理 loading 状态
  <el-button type="primary" icon="delete"></el-button>
 </el-button-group>
 ```
+:::
 ## Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |

--- a/examples/docs/card.md
+++ b/examples/docs/card.md
@@ -45,24 +45,10 @@
 ## 基础用法
-Card 组件包括`header`和`body`部分，`header`部分需要有显式具名 slot 分发，同时他也是可选的。
-下面是一个带有标题、内容和操作（按钮）的 Card 组件示例，需要注意的是，部分样式需要你自己填入，下例中我们使用了布局来限制卡片的宽度：
+下面是一个带有标题、内容和操作（按钮）的 Card 组件示例，需要注意的是，部分样式需要你自己填入。
-<el-row>
-  <el-col :span="12">
-    <el-card>
-      <div slot="header" class="clearfix">
-        <span style="line-height: 36px;">卡片名称</span>
-        <el-button style="float: right;" type="primary">操作按钮</el-button>
-      </div>
-      <div v-for="o in 4" class="text item">
-        {{'列表内容 ' + o }}
-      </div>
-    </el-card>
-  </el-col>
-</el-row>
+:::demo Card 组件包括`header`和`body`部分，`header`部分需要有显式具名 slot 分发，同时也是可选的。
 ```html
 <el-card>
  <div slot="header" class="clearfix">
@@ -74,21 +60,13 @@ Card 组件包括`header`和`body`部分，`header`部分需要有显式具名 s
  </div>
 </el-card>
 ```
+:::
 ## 简单卡片
-如上述所言，Card 组件可以只有`body`区域，下面是一个没有定义`header`的 Card 组件。
+卡片可以只有内容区域。
-<el-row>
-  <el-col :span="12">
-    <el-card>
-      <div v-for="o in 4" class="text item">
-        {{'列表内容 ' + o }}
-      </div>
-    </el-card>
-  </el-col>
-</el-row>
+:::demo
 ```html
 <el-card>
  <div v-for="o in 4" class="text item">
@@ -96,15 +74,15 @@ Card 组件包括`header`和`body`部分，`header`部分需要有显式具名 s
  </div>
 </el-card>
 ```
+:::
 ## 进阶使用
-配置`body-style`属性来自定义`body`部分的`style`。
+可以让你的卡片极大程度的被个性化，为更丰富的内容展示服务。
-可以让你的卡片极大程度的被个性化，为更丰富的内容展示服务。。
 下例是一个带图片的示例，能帮助你更好地理解`body-style`配合分发内容自定义样式的强大：
+:::demo 配置`body-style`属性来自定义`body`部分的`style`，我们还使用了布局组件。
+```html
 <el-row>
  <el-col :span="8" v-for="(o, index) in 2" :offset="index > 0 ? 2 : 0">
    <el-card :body-style="{ padding: '0px' }">
@@ -119,19 +97,8 @@ Card 组件包括`header`和`body`部分，`header`部分需要有显式具名 s
    </el-card>
  </el-col>
 </el-row>
-```html
-<el-card :body-style="{ padding: '0px' }">
-  <img src="~examples/assets/images/hamburger.png" class="image">
-  <div style="padding: 14px;">
-    <span>好吃的汉堡</span>
-    <div class="bottom clearfix">
-      <time class="time">{{ currentDate }}</time>
-      <el-button type="text" class="button">操作按钮</el-button>
-    </div>
-  </div>
-</el-card>
 ```
+:::
 ## Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |

--- a/examples/docs/checkbox.md
+++ b/examples/docs/checkbox.md
@@ -28,29 +28,27 @@
 ## 基础用法
-### 单个勾选框，逻辑值
+:::demo 在`el-checkbox`元素中定义`v-model`绑定变量，单一的`checkbox`中，默认绑定变量的值会是`Boolean`，选中为`true`。
-<div class="demo-box demo-checkbox">
-  <el-checkbox class="checkbox" v-model="checked">{{ checked }}</el-checkbox>
-</div>
 ```html
-<el-checkbox class="checkbox" v-model="checked">{{ checked }}</el-checkbox>
+<template>
+  <el-checkbox class="checkbox" v-model="checked">{{ checked }}</el-checkbox>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        checked: true
+      };
+    }
+  };
+</script>
 ```
+:::
-### 多个勾选框，绑定到同一个数组
+## 多选框组
-<div class="demo-box demo-checkbox">
-<el-checkbox-group v-model="checkList">
-  <el-checkbox class="checkbox" label="复选框 A"></el-checkbox>
-  <el-checkbox class="checkbox" label="复选框 B"></el-checkbox>
-  <el-checkbox class="checkbox" label="复选框 C"></el-checkbox>
-  <el-checkbox class="checkbox" label="禁用" disabled></el-checkbox>
-  <el-checkbox class="checkbox" label="选中且禁用" disabled></el-checkbox>
-</el-checkbox-group>
-</div>
-<p>{{ checkList }}</p>
+:::demo `checkbox-group`元素能把多个 checkbox 管理为一组，只需要在 Group 中使用`v-model`绑定`Array`类型的变量即可，`label`属性除了改变 checkbox 按钮后的介绍外，同时也是该 checkbox 对应的值，`label`与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。
 ```html
 <template>
@@ -61,6 +59,9 @@
    <el-checkbox class="checkbox" label="禁用" disabled></el-checkbox>
    <el-checkbox class="checkbox" label="选中且禁用" disabled></el-checkbox>
  </el-checkbox-group>
+  <p>{{ checkList }}</p>
 </template>
 <script>
@@ -68,15 +69,19 @@
    data () {
      return {
        checkList: ['选中且禁用','复选框 A']
-      }
+      };
    }
-  }
+  };
 </script>
 ```
+:::
+## 绑定 value 的多选框
-### 绑定 value：
+:::demo 使用`true-label`和`false-label`可以自定义选中时和未选中时的值，可以为`String`或`Number`类型。
-<div class="demo-box demo-checkbox">
+```html
+<template>
  <el-checkbox
    class="checkbox"
    v-model="name"
@@ -84,42 +89,30 @@
    :false-label="b">
    {{name}}
  </el-checkbox>
-</div>
+</template>
+<script>
-```html
+  export default {
-<el-checkbox
+    data() {
-  class="checkbox"
+      return {
-  v-model="name"
+        name: 'Jonny',
-  :true-label="a"
+        a: 'Jonny',
-  :false-label="b">
+        b: 'Lara'
-  {{name}}
+      };
-</el-checkbox>
+    }
-```
+  };
+</script>
-```js
-vm.a = 'Jonny';
-vm.b = 'Lara';
-// 当选中时
-vm.name === vm.a
-// 当没有选中时
-vm.name === vm.b
 ```
+:::
-## checkbox API
+## Checkbox Attributes
-| 参数      | 说明    | 类型      | 可选值       | 默认值   |
-|---------- |-------- |---------- |-------------  |-------- |
-| value     | 绑定值   | string\|string[]\|boolean  |    |    |
-| label     | 真实值   | string    |               |         |
-| true-label | 选中时的真实值   | string    |               |         |
-| true-label | 没有选中时的真实值   | string    |               |         |
-| disabled  | 禁用    | boolean   | true, false   | false   |
-## checkbox group API
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| value     | 绑定值   | string\|string[]\|boolean    |               |         |
+| label     | 选中状态的值（只有在`checkbox-group`下有意义）   | string    |               |         |
+| true-label | 选中时的值   | string, number    |               |         |
+| false-label | 没有选中时的值   | string, number    |               |         |
+| disabled  | 按钮禁用    | boolean   |    | false   |
-## checkbox group 事件
+## Checkbox-group Events
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
-| change  | 当绑定值变化时触发的事件 | (value: string) |
+| change  | 当绑定值变化时触发的事件 | 选中的 Checkbox Label 值 |
--- a/examples/docs/dialog.md
+++ b/examples/docs/dialog.md
@@ -68,23 +68,7 @@
 Dialog 弹出一个对话框，适合需要定制性更大的场景，如果只是弹出框，可以尝试 MessageBox 组件。
-要使用 Dialog 组件，首先你需要设置`v-model`属性，它接收`Boolean`，当为`true`时显示 Dialog。
+:::demo 需要设置`v-model`属性，它接收`Boolean`，当为`true`时显示 Dialog。Dialog 分为两个部分：`body`和`footer`，`footer`需要具名为`footer`的`slot`。`title`属性用于定义标题，它是可选的，默认值为空。
-Dialog 分为两个部分：`body`和`footer`，`footer`需要具名为`footer`的`slot`。
-`title`属性用于定义标题，它是可选的，默认值为空，下面是一个最简单的用例：
-<el-button :plain="true" @click.native="dialogVisible = true">点击打开 Dialog</el-button>
-<div class="demo-box demo-dialog">
-  <el-dialog title="提示" v-model="dialogVisible">
-    <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click.native="dialogVisible = false">取 消</el-button>
-      <el-button type="primary" @click.native="dialogVisible = false">确 定</el-button>
-    </span>
-  </el-dialog>
-</div>
 ```html
 <el-button :plain="true" @click.native="dialogVisible = true">点击打开 Dialog</el-button>
@@ -97,24 +81,14 @@ Dialog 分为两个部分：`body`和`footer`，`footer`需要具名为`footer`
  </span>
 </el-dialog>
 ```
+:::
 ## 设置尺寸
-Dialog 组件提供四种尺寸：`tiny`, `small`, `large`, `full`。通过`size`属性来设置，下面是一个 tiny 的例子。
+:::demo 提供四种尺寸：`tiny`, `small`, `large`, `full`。通过`size`属性来设置。
-<el-button :plain="true" @click.native="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>
-<div class="demo-box demo-dialog">
-  <el-dialog title="提示" v-model="dialogTinyVisible" size="tiny">
-    <span>这是一段内容</span>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click.native="dialogTinyVisible = false">取 消</el-button>
-      <el-button type="primary" @click.native="dialogTinyVisible = false">确 定</el-button>
-    </span>
-  </el-dialog>
-</div>
 ```html
+<!-- tiny -->
 <el-button :plain="true" @click.native="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>
 <el-dialog title="提示" v-model="dialogTinyVisible" size="tiny">
@@ -124,66 +98,24 @@ Dialog 组件提供四种尺寸：`tiny`, `small`, `large`, `full`。通过`size
    <el-button type="primary" @click.native="dialogTinyVisible = false">确 定</el-button>
  </span>
 </el-dialog>
-```
-下面是一个全屏幕 Dialog 的样例：
-<el-button @click.native="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>
+<!-- 全屏幕Dialog -->
-<div class="demo-box demo-dialog">
-  <el-dialog title="提示" v-model="dialogFullVisible" size="full">
-    <img src="http://placekitten.com/1920/1280" class="full-image">
-  </el-dialog>
-</div>
-```html
 <el-button @click.native="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>
 <el-dialog title="提示" v-model="dialogFullVisible" size="full">
  <img src="http://placekitten.com/1920/1280">
 </el-dialog>
 ```
+:::
-## 设置能否通过点击modal或按下esc关闭Dialog
-在默认条件下，你可以通过 ESC 和点击背后的遮罩层关闭 Dialog，但是可以通过设置`close-on-click-modal`属性和`close-on-press-escape`属性来关闭这一功能，它们接收`Boolean`，默认均为`true`。
-<el-button @click.native="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭</el-button>
-<div class="demo-box demo-dialog">
-  <el-dialog title="提示"
-    v-model="dialogStubbornVisible"
-    :close-on-click-modal="false"
-    :close-on-press-escape="false">
-    <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
-  </el-dialog>
-</div>
-```html
-<el-button @click.native="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭</el-button>
-<el-dialog title="提示"
-  v-model="dialogStubbornVisible"
-  :close-on-click-modal="false"
-  :close-on-press-escape="false">
-  <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
-</el-dialog>
-```
 ## 使用 Dialog 方法打开
-使用`v-model`确实是一个不错的做法，为了一些特殊需求，我们暴露了实例`open`和`close`方法，你可以不用显式改变`v-modal`的值了：
+:::demo 使用实例`open`和`close`方法，不用显式改变`v-modal`的值。
-<el-button @click.native="openDialog()">使用Dialog方法</el-button>
-<div class="demo-box demo-dialog">
-  <el-dialog title="提示" v-model="dialogBindVisible" ref="dialogBind">
-    <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
-  </el-dialog>
-</div>
 ```html
 <template>
+  <el-button @click.native="openDialog()">使用Dialog方法</el-button>
  <el-dialog title="提示" v-model="dialogBindVisible" ref="dialogBind">
    <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
  </el-dialog>
@@ -203,46 +135,15 @@ Dialog 组件提供四种尺寸：`tiny`, `small`, `large`, `full`。通过`size
  };
 </script>
 ```
+:::
 ## 自定义内容
-Dialog 组件的正文标题可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例，除此以外，它们并没有什么特殊之处：
+Dialog 组件的正文标题可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例，除此以外，它们并没有什么特殊之处。
-<el-button @click.native="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
-<div class="demo-box demo-dialog">
-  <el-dialog title="收货地址" v-model="dialogTableVisible">
-    <el-table :data="gridData">
-      <el-table-column property="date" label="日期" width="150"></el-table-column>
-      <el-table-column property="name" label="姓名" width="200"></el-table-column>
-      <el-table-column property="address" label="地址"></el-table-column>
-    </el-table>
-  </el-dialog>
-</div>
-<el-button @click.native="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
-<div class="demo-box demo-dialog">
-  <el-dialog title="收货地址" v-model="dialogFormVisible">
-    <el-form :models="form">
-      <el-form-item label="活动名称" :label-width="formLabelWidth">
-        <el-input :model.sync="form.name" auto-complete="off"></el-input>
-      </el-form-item>
-      <el-form-item label="活动区域" :label-width="formLabelWidth">
-        <el-select :value.sync="form.region" :width="300" placeholder="请选择活动区域">
-          <el-option label="区域一" value="shanghai"></el-option>
-          <el-option label="区域二" value="beijing"></el-option>
-        </el-select>
-      </el-form-item>
-    </el-form>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click.native="dialogFormVisible = false">取 消</el-button>
-      <el-button type="primary" @click.native="dialogFormVisible = false">确 定</el-button>
-    </span>
-  </el-dialog>
-</div>
+:::demo
 ```html
+<!-- Table -->
 <el-button @click.native="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
 <el-dialog title="收货地址" v-model="dialogTableVisible">
@@ -253,6 +154,7 @@ Dialog 组件的正文标题可以是任意的，甚至可以是表格或表单
  </el-table>
 </el-dialog>
+<!-- Form -->
 <el-button @click.native="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
 <el-dialog title="收货地址" v-model="dialogFormVisible">
@@ -273,6 +175,7 @@ Dialog 组件的正文标题可以是任意的，甚至可以是表格或表单
  </span>
 </el-dialog>
 ```
+:::
 ## Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |

--- a/examples/docs/icon.md
+++ b/examples/docs/icon.md
@@ -54,21 +54,15 @@
 ## 使用方法
-直接通过设置类名为`el-icon-iconName`来使用即可。例如：
+直接通过设置类名为`el-icon-iconName`来使用即可。
-<div><i class="el-icon-search"></i></div>
+:::demo
 ```html
 <i class="el-icon-search"></i>
-```
-也可以在按钮组件中使用图标，更多地使用方式可以在按钮组件的文档中看到。
-<div><el-button type="primary" icon="search">搜索</el-button></div>
-```html
 <el-button type="primary" icon="search">搜索</el-button>
 ```
+:::
 ## 图标集合

--- a/examples/docs/input-number.md
+++ b/examples/docs/input-number.md
@@ -3,7 +3,8 @@
    data() {
      return {
        num1: 1,
-        num2: 1
+        num2: 1,
+        num3: 5
      }
    }
  };
@@ -18,54 +19,67 @@
 ## 基础使用
-<p>当我们需要标准的数字值时可以用到这个组件，它为你提供了数值输入提供了范围控制和递增递减的步数控制。</p>
+需要标准的数字值时可以用到 Input Number 组件，你提供了数值输入提供了范围控制和递增递减的步数控制。
+值得一提的是，你可以不用通过连续点击增减，可以直接输入数字或者长按按钮进行数字的改变。
-<div class="demo-box demo-input-number">
-  <el-input-number v-model="num1"></el-input-number>
-</div>
+:::demo 要使用它，只需要在`el-input-number`元素中使用`v-model`绑定变量即可，变量的初始值即为默认值。
 ```html
-<el-input-number v-model="num1"></el-input-number>
+<template>
+  <el-input-number v-model="num1"></el-input-number>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        num1: 1
+      };
+    }
+  };
+</script>
 ```
+:::
 ## 禁用状态
-<div class="demo-box demo-input-number">
+:::demo `disabled`属性接受一个`Boolean`，设置为`true`即可禁用整个组件，如果你只需要控制数值在某一范围内，可以设置`min`属性和`max`属性，不设置`min`和`max`时，最小值为 0。
-  <el-input-number v-model="num1" :disabled="true"></el-input-number>
-</div>
 ```html
 <el-input-number v-model="num1" :disabled="true"></el-input-number>
+<el-input-number v-model="num3" :min="5" :max="10"></el-input-number>
 ```
+:::
-## 步数
+## 步长
-<div class="demo-box demo-input-number">
+让组件按照步长来增减。
-  <el-input-number v-model="num2" :step="2"></el-input-number>
-</div>
+:::demo 设置`step`属性可以控制步长，接受一个`Number`。
 ```html
 <el-input-number v-model="num2" :step="2"></el-input-number>
 ```
+:::
 ## 尺寸
-<div class="demo-box demo-input-number">
+和其他组件一样，Input Number 同样具有不同的尺寸。
-  <el-input-number v-model="num1" size="large"></el-input-number>
-  <el-input-number v-model="num1"></el-input-number>
+:::demo 三种尺寸：`large`，`small`以及默认，只需要设置`size`属性即可。
-  <el-input-number v-model="num1" size="small"></el-input-number>
-</div>
 ```html
 <el-input-number v-model="num1" size="large"></el-input-number>
 <el-input-number v-model="num1"></el-input-number>
 <el-input-number v-model="num1" size="small"></el-input-number>
 ```
+:::
-## API
+## Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |----------|-------------- |----------|--------------------------------  |-------- |
-| model    | 绑定值         | number   |       | |
+| min      | 设置计数器允许的最小值 | number |   | 0 |
-| step     | 步数           | number   |      | 1 |
+| max      | 设置计数器允许的最大值 | number |   | Infinity |
-| size     | 尺寸           | string   | large, small | |
+| step     | 计数器步长           | number   |      | 1 |
-| disabled | 是否禁用        | boolean | true, false | false |
+| size     | 计数器尺寸           | string   | large, small | |
+| disabled | 是否禁用计数器        | boolean |  | false |
--- a/examples/docs/loading.md
+++ b/examples/docs/loading.md
@@ -3,6 +3,7 @@
    border: solid 1px #999;
    padding: 10px;
    text-align: center;
+    margin-top: 10px;
    p {
      font-size: 30px;
@@ -64,13 +65,7 @@
 ## 基本用法
-在 Loading 组件中，Element 准备了自定义命令`v-loading`，只需要绑定`Boolean`即可，默认状况下，Loading 遮罩会插入到绑定元素的子节点。
+:::demo 在 Loading 组件中，Element 准备了自定义命令`v-loading`，只需要绑定`Boolean`即可，默认状况下，Loading 遮罩会插入到绑定元素的子节点。
-<el-button :plain="true" @click.native="loading = !loading">打开 / 关闭 loading</el-button>
-<div v-loading="loading" class="el-loading-demo">
-  <p>点击上面的按钮，本区域显示 loading 遮罩</p>
-</div>
 ```html
 <el-button :plain="true" @click.native="loading = !loading">打开 / 关闭 loading</el-button>
@@ -79,37 +74,28 @@
  <p>点击上面的按钮，本区域显示 loading 遮罩</p>
 </div>
 ```
+:::
 ## 修饰符
-Loading 遮罩默认插入至绑定了 `v-loading` 指令的元素上。通过添加 `body` 修饰符，可以使遮罩插入至 DOM 中的 body 上。
+通过修饰符，我们可以使用全屏幕 Loading 或将 Loading 设置在 body 上。
-<el-button :plain="true" @click.native="loading2 = !loading2">打开 / 关闭 loading</el-button>
+:::demo Loading 遮罩默认插入至绑定了 `v-loading` 指令的元素上。通过添加 `body` 修饰符，可以使遮罩插入至 DOM 中的 body 上。当需要全屏遮罩时，可使用 `fullscreen` 修饰符（此时遮罩会插入至 body 上）
-<div v-loading.body="loading2" class="el-loading-demo">
-  <p>点击上面的按钮，本区域显示 loading 遮罩</p>
-</div>
-```html
-<el-button :plain="true" @click.native="loading2 = !loading2">打开 / 关闭 loading</el-button>
-<div v-loading.body="loading2" class="el-loading-demo">
-  <p>点击上面的按钮，本区域显示 loading 遮罩</p>
-</div>
-```
-当需要全屏遮罩时，可使用 `fullscreen` 修饰符（此时遮罩会插入至 body 上）
-<el-button :plain="true" @click.native="openFullScreen" v-loading.fullscreen="fullscreenLoading">打开全屏 loading</el-button>
 ```html
 <template>
+  <el-button :plain="true" @click.native="loading2 = !loading2">打开 / 关闭 loading</el-button>
  <el-button
    :plain="true"
    @click.native="openFullScreen"
    v-loading.fullscreen="fullscreenLoading">
    打开全屏 loading
  </el-button>
+  <div v-loading.body="loading2" class="el-loading-demo">
+    <p>点击上面的按钮，本区域显示 loading 遮罩</p>
+  </div>
 </template>
 <script>
@@ -130,3 +116,4 @@ Loading 遮罩默认插入至绑定了 `v-loading` 指令的元素上。通过
  }
 </script>
 ```
+:::
--- a/examples/docs/message-box.md
+++ b/examples/docs/message-box.md
@@ -66,15 +66,13 @@
 MessageBox 组件提供了四种不同的样式来替代浏览器提供的`alert`等功能：`$msgbox`，`$alert`，`$confirm`以及`$prompt`。
-在本页文档中一一介绍它们，首先看最简单的示例，我们使用`$alert`，它接收了两个参数，`message`和`title`。
+在本页文档中一一介绍它们，首先看最简单的示例，我们使用`$alert`。
-值得一提的是，窗口被关闭后，它会返回一个`Promise`对象便于进行后续操作的处理。
+:::demo 它接收了两个参数，`message`和`title`。值得一提的是，窗口被关闭后，它会返回一个`Promise`对象便于进行后续操作的处理。
-<el-button @click.native="open">打开 Alert</el-button>
 ```html
 <template>
-  <el-button @click.native="open">打开 Message Box</el-button>
+  <el-button @click.native="open">打开 Alert</el-button>
 </template>
 <script>
@@ -87,16 +85,13 @@ MessageBox 组件提供了四种不同的样式来替代浏览器提供的`alert
  }
 </script>
 ```
+:::
 ## 配置项
 MessageBox 组件也拥有极高的定制性，我们可以传入`options`作为第三个参数，它是一个字面量对象。
-下例是一个包含图标的 alert 框，需要注意的是，第二个参数`title`必须定义为`String`类型，如果是`Object`，会被理解为`options`。
+:::demo 第二个参数`title`必须定义为`String`类型，如果是`Object`，会被理解为`options`。`type`字段表明消息类型，可以为`success`，`error`，`info`和`warning`，无效的设置将会被忽略。
-`type`字段表明消息类型，可以为`success`，`error`，`info`和`warning`，无效的设置将会被忽略。
-<el-button @click.native="open2">打开 alert</el-button>
 ```html
 <template>
@@ -115,10 +110,11 @@ MessageBox 组件也拥有极高的定制性，我们可以传入`options`作为
  }
 </script>
 ```
+:::
-下面是一个 confirm 框，在这里我们用了`Promise`来处理后续响应。
+下面是一个 confirm 框。
-<el-button @click.native="open3">打开 confirm</el-button>
+:::demo 在这里我们用了`Promise`来处理后续响应。
 ```html
 <template>
@@ -147,12 +143,11 @@ MessageBox 组件也拥有极高的定制性，我们可以传入`options`作为
  }
 </script>
 ```
+:::
-Prompt 框功能强大，可以处理简单的输入，甚至你可以用`inputPattern`字段自己规定匹配模式，或者用`inputValidator`规定校验函数，可以返回`Boolean`或`String`，`Boolean`为`false`或字符串时均表示校验为通过，`String`相当于定义了`inputErrorMessage`字段。
+Prompt 框功能强大，可以处理简单的输入。
-此外，你可以用`inputPlaceholder`字段来定义输入框的占位符。
+:::demo 可以用`inputPattern`字段自己规定匹配模式，或者用`inputValidator`规定校验函数，可以返回`Boolean`或`String`，`Boolean`为`false`或字符串时均表示校验为通过，`String`相当于定义了`inputErrorMessage`字段。此外，可以用`inputPlaceholder`字段来定义输入框的占位符。
-<el-button @click.native="open4">打开 prompt</el-button>
 ```html
 <template>
@@ -182,12 +177,11 @@ Prompt 框功能强大，可以处理简单的输入，甚至你可以用`inputP
  }
 </script>
 ```
+:::
 Msgbox 框是最基本的弹框，与 Alert 的区别在于 Alert 无法通过 ESC 和 点击框外关闭。
-此例中我们使用了`showCancelButton`字段，用于显示取消按钮，同时使用`cancelButtonClass`可以自定义样式，`cancelButtonText`来自定义按钮文本，Confirm 按钮也具有相同的字段，在文末的字段说明中有完整的字段列表。
+:::demo 使用了`showCancelButton`字段，用于显示取消按钮，同时使用`cancelButtonClass`可以自定义样式，`cancelButtonText`来自定义按钮文本，Confirm 按钮也具有相同的字段，在文末的字段说明中有完整的字段列表。
-<el-button @click.native="open5">打开 Message Box</el-button>
 ```html
 <template>
@@ -213,6 +207,7 @@ Msgbox 框是最基本的弹框，与 Alert 的区别在于 Alert 无法通过 E
  }
 </script>
 ```
+:::
 ## 全局方法

--- a/examples/docs/message.md
+++ b/examples/docs/message.md
@@ -74,11 +74,7 @@
 Message 系统了反馈提示，它比 Notification 更为小巧，可以根据需要来使用它们，在配置上，它们非常类似，所以部分 Notification 的 options 我们不会做详尽解释，文末有 options 列表，可以结合 Notification 的文档理解它们。
-Element 注册了一个`$message`方法用于调用，Message 同样接收一个`options`字面量，`message`参数能定义正文内容，下面是最简单的样例：
+:::demo Element 注册了一个`$message`方法用于调用，Message 同样接收一个`options`字面量，`message`参数能定义正文内容。
-<div class="demo-box demo-message">
-  <el-button :plain="true" @click.native="open">打开消息提示</el-button>
-</div>
 ```html
 <template>
@@ -97,19 +93,15 @@ Element 注册了一个`$message`方法用于调用，Message 同样接收一个
  }
 </script>
 ```
+:::
 ## 不同状态
-Message 同样提供了四种类型：`success`，`info`，`warning`，`error`，由不同图标表示，设置`type`字段来定义它们，默认为`info`，如果设置其他值将被忽略。
+Message 同样提供了四种类型：`success`，`info`，`warning`，`error`，由不同图标表示。
 你可以通过下面的按钮来体验它们：
-<div class="demo-box demo-message">
+:::demo 设置`type`字段来定义它们，默认为`info`，如果设置其他值将被忽略。
-  <el-button :plain="true" @click.native="open2">成功</el-button>
-  <el-button :plain="true" @click.native="open3">警告</el-button>
-  <el-button :plain="true" @click.native="open4">错误</el-button>
-</div>
 ```html
 <template>
  <el-button :plain="true" @click.native="open2">成功</el-button>
@@ -144,20 +136,15 @@ Message 同样提供了四种类型：`success`，`info`，`warning`，`error`
  }
 </script>
 ```
+:::
 ## 可关闭
-默认的 Message 是不可以被人工关闭的，如果需要可关闭的 Message，可以使用`showClose`字段，它接受一个`Boolean`，`true`为允许关闭。
+默认的 Message 是不可以被人工关闭的，如果需要可关闭的 Message，可以使用`showClose`字段。
 注意：和 Notification 一样，Message 拥有可控的`duration`，设置`0`为不会被自动关闭，默认为 3000 毫秒。
-<div class="demo-box demo-message">
+:::demo
-  <el-button :plain="true" @click.native="open5">消息</el-button>
-  <el-button :plain="true" @click.native="open6">成功</el-button>
-  <el-button :plain="true" @click.native="open7">警告</el-button>
-  <el-button :plain="true" @click.native="open8">错误</el-button>
-</div>
 ```html
 <template>
  <el-button :plain="true" @click.native="open5">消息</el-button>
@@ -203,6 +190,7 @@ Message 同样提供了四种类型：`success`，`info`，`warning`，`error`
  }
 </script>
 ```
+:::
 ## 全局方法

--- a/examples/docs/switch.md
+++ b/examples/docs/switch.md
@@ -21,22 +21,18 @@
 ## 基本用法
-<div class="demo-box demo-switch">
+Switch 组件提供了平滑的开关。
-  <el-switch v-model="value1"></el-switch>
-</div>
+:::demo 只需要`el-switch`元素绑定`v-model`到一个变量即可完成状态改变，状态是一个`Boolean`。
 ```html
 <el-switch v-model="value1"></el-switch>
 ```
+:::
 ## 禁用状态
-<div class="demo-box demo-switch">
+:::demo 设置`disabled`属性，接受一个`Boolean`，设置`true`即可禁用，此例中我们使用了`on-text`属性与`off-text`属性来设置开关旁的描述，`value`属性用于定义无需双向绑定情况的开关值。
-  <el-switch disabled></el-switch>
-  <el-switch disabled :value="false"></el-switch>
-  <el-switch on-text="" off-text="" disabled></el-switch>
-  <el-switch on-text="" off-text="" disabled :value="false"></el-switch>
-</div>
 ```html
 <el-switch disabled></el-switch>
@@ -44,24 +40,23 @@
 <el-switch on-text="" off-text="" disabled></el-switch>
 <el-switch on-text="" off-text="" disabled :value="false"></el-switch>
 ```
+:::
 ## 自定义颜色
-<div class="demo-box demo-switch">
+:::demo 使用`on-color`和`off-color`属性，可以自定义开关颜色。`on-icon-class`定义了开关时的图标，具体图标可以参见 Icon 组件文档，当设置了 Icon 后，text 值将被忽略。
-  <el-switch on-color="#13ce66" off-color="#ff4949" v-model="value2"></el-switch>
-  <el-switch on-color="#13ce66" off-color="#ff4949" on-text="" off-text="" v-model="value3"></el-switch>
-</div>
 ```html
 <el-switch on-color="#13ce66" off-color="#ff4949" v-model="value2"></el-switch>
 <el-switch on-color="#13ce66" off-color="#ff4949" on-text="" off-text="" v-model="value3"></el-switch>
 ```
+:::
-## API
+## Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | value     | switch 的选中状态   | boolean    |               | true |
-| disabled  | 禁用    | boolean   | true, false   | false   |
+| disabled  | 是否禁用    | boolean   |  | false   |
 | width  | switch 的宽度（像素）    | number   | | 58（有文字）/ 46（无文字） |
 | on-icon-class  | switch 打开时所显示图标的类名    | string   | | |
 | off-icon-class  | switch 关闭时所显示图标的类名    | string   | | |
@@ -69,5 +64,9 @@
 | off-text  | switch 关闭时的文字    | string   | | 'OFF' |
 | on-color  | switch 打开时的背景色    | string   | | |
 | off-color  | switch 关闭时的背景色    | string   | | |
-| name  | 对应 input 的 name 属性    | string   | | |
+| name  | switch 对应的 name 属性    | string   | | |
-| change  | value 发生变化时的回调函数    | function   | | |
+## Events
+| 事件名称      | 说明    | 回调参数      |
+|---------- |-------- |---------- |
+| change  | switch 状态发生变化时的回调函数    |  |
--- a/examples/docs/tabs.md
+++ b/examples/docs/tabs.md
@@ -37,20 +37,7 @@
 ## 基础使用
-Tabs 组件提供了选项卡功能，只需要使用`el-tabs`和子元素`el-tab-pane`即可，在两个元素中，我们分别提供了一系列的属性来方便使用，`el-tab-pane`中`label`决定了选项卡标题，标签内部写入内容即可。
+:::demo Tabs 组件提供了选项卡功能，只需要使用`el-tabs`和子元素`el-tab-pane`即可，在两个元素中，我们分别提供了一系列的属性来方便使用，`el-tab-pane`中`label`决定了选项卡标题，标签内部写入内容即可。在下例中我们在`el-tabs`中设置了`active-name`属性，接受一个`String`值，表明选中的选项卡，在`el-tab-pane`中可以设置对应的`name`属性，如果没有设置`name`，则默认值为顺序的`1`/`2`/`3`/`4`。例子选中选项卡2，如果不设置`name`，将`active-name`设为`2`，可以达成相同效果。
-在下例中我们在`el-tabs`中设置了`active-name`属性，接受一个`String`值，表明选中的选项卡，在`el-tab-pane`中可以设置对应的`name`属性，如果没有设置`name`，则默认值为顺序的`1`/`2`/`3`/`4`。
-下例会选中选项卡2，如果不设置`name`，将`active-name`设为`2`，可以达成相同效果。
-<div>
-  <el-tabs :active-name="activeName">
-    <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
-    <el-tab-pane name="two" label="选项卡二">选项卡二内容</el-tab-pane>
-    <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
-    <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
-  </el-tabs>
-</div>
 ```html
 <template>
@@ -71,20 +58,13 @@ Tabs 组件提供了选项卡功能，只需要使用`el-tabs`和子元素`el-ta
  };
 </script>
 ```
+:::
 ## 多种风格
-除了上例中的风格外，我们还提供了标签和卡片两种风格，只需要设置`type`属性即可，如果需要标签风格，将其设置为`card`，卡片风格，则为`border-card`。
+除了上例中的风格外，我们还提供了标签和卡片两种风格。
-<div>
-  <el-tabs type="card">
-    <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
-    <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
-    <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
-    <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
-  </el-tabs>
-</div>
+:::demo 只需要设置`type`属性即可，如果需要标签风格，将其设置为`card`，卡片风格，则为`border-card`。
 ```html
 <el-tabs type="card">
  <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
@@ -92,44 +72,23 @@ Tabs 组件提供了选项卡功能，只需要使用`el-tabs`和子元素`el-ta
  <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
  <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
 </el-tabs>
-```
-<div>
+<el-tabs type="border-card">
-  <el-tabs type="card" :closable="true" @tab-remove="handleRemove" @tab-click="handleClick">
-    <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
-    <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
-    <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
-    <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
-  </el-tabs>
-</div>
-```html
-<el-tabs type="card" :closable="true" @tab-remove="handleRemove" @tab-click="handleClick">
  <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
  <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
  <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
  <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
 </el-tabs>
 ```
+:::
 ## 可关闭的标签
-在`el-tabs`中设置`closable`属性，接受一个`Boolean`，设置为`true`时为可关闭。
+:::demo 在`el-tabs`中设置`closable`属性，接受一个`Boolean`，设置为`true`时为可关闭。
-除此以外，我们在`el-tabs`中准备了两个钩子，用于在 Tab 被选中时和被删除时自定义属性：`on-click`和`on-remove`，接受`Function`，它们都提供一个参数`tab`，为操作的目标标签。
-<div>
-  <el-tabs type="card" :closable="true" @tab-click="handleClick" @tab-remove="handleRemove">
-    <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
-    <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
-    <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
-    <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
-  </el-tabs>
-</div>
 ```html
 <template>
-  <el-tabs type="card" :closable="true" :on-click="handleClick" :on-remove="handleRemove">
+  <el-tabs type="card" :closable="true" @tab-click="handleClick" @tab-remove="handleRemove">
    <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
    <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
    <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
@@ -149,6 +108,7 @@ Tabs 组件提供了选项卡功能，只需要使用`el-tabs`和子元素`el-ta
  };
 </script>
 ```
+:::
 ## Tabs Attributes
 | 参数       | 说明     | 类型      | 可选值       | 默认值   |

--- a/examples/docs/tag.md
+++ b/examples/docs/tag.md
@@ -30,16 +30,9 @@
 ## 基础使用
-Tag 组件提供了六种主题，由`type`属性来定义，该属性可选填：
+Tag 组件提供了六种主题。
-<div class="demo-box demo-tag">
+:::demo 由`type`属性来定义，该属性可选填。
-  <el-tag>标签一</el-tag>
-  <el-tag type="gray">标签二</el-tag>
-  <el-tag type="primary">标签三</el-tag>
-  <el-tag type="success">标签四</el-tag>
-  <el-tag type="warning">标签五</el-tag>
-  <el-tag type="danger">标签六</el-tag>
-</div>
 ```html
 <el-tag>标签一</el-tag>
@@ -49,43 +42,21 @@ Tag 组件提供了六种主题，由`type`属性来定义，该属性可选填
 <el-tag type="warning">标签五</el-tag>
 <el-tag type="danger">标签六</el-tag>
 ```
+:::
 ## 描边
-`hit`属性可以设置描边，接受一个`Boolean`，默认为`false`。
+借此可以定义 hover 时的效果。
-借此可以定义 hover 时的效果，下面是一个`hit`为`true`时的效果：
-<div class="demo-box demo-tag">
-  <el-tag type="primary" :hit="true">标签</el-tag>
-</div>
+:::demo `hit`属性可以设置描边。
 ```html
 <el-tag type="primary" :hit="true">标签</el-tag>
 ```
+:::
 ## 可移除的标签
-设置`closable`属性来定义一个可移除的标签，接受一个`Boolean`，设置为`true`即可。
+:::demo 设置`closable`属性来定义一个可移除的标签，接受一个`Boolean`，设置为`true`即可。默认的标签移除时会附带渐变动画，如果不想使用，可以设置`close-transition`属性，它接受一个`Boolean`，true 为关闭。设置`close`事件可以处理关闭后的回调函数。
-此外，默认的标签移除时会附带渐变动画，如果不想使用，可以设置`close-transition`属性，它接受一个`Boolean`，true 为关闭。
-设置`close`事件可以处理关闭后的回调函数。
-下面是一个综合应用他们的样例：
-<div class="demo-box demo-tag">
-  <el-tag
-    v-for="tag in tags"
-    :closable="true"
-    :type="tag.type"
-    :key="tag"
-    :close-transition="false"
-    @close="handleClose(tag)"
-  >
-  {{tag.name}}
-  </el-tag>
-</div>
 ```html
 <el-tag
@@ -121,6 +92,7 @@ Tag 组件提供了六种主题，由`type`属性来定义，该属性可选填
  }
 </script>
 ```
+:::
 ## Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |

--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
    "oui-dom-events": "^0.2.1",
    "postcss": "^5.0.21",
    "purecss": "^0.6.0",
-    "strip-tags": "^0.1.1",
+    "cheerio": "^0.18.0",
    "uppercamelcase": "^1.1.0",
    "vue": "^2.0.0-rc.2",
    "vue-loader": "^9.3.2",

--- a/packages/slider/src/main.vue
+++ b/packages/slider/src/main.vue
@@ -161,7 +161,7 @@
      onSliderClick(event) {
        var currentX = event.clientX;
-        var sliderOffsetLeft = getStyle(this.$el.parentNode, 'position') === 'static' ? this.$refs.slider.offsetLeft : this.$el.parentNode.offsetLeft + this.$refs.slider.offsetLeft;
+        var sliderOffsetLeft = this.$refs.slider.getBoundingClientRect().left;
        var newPos = (currentX - sliderOffsetLeft) / this.$sliderWidth * 100;
        this.setPosition(newPos);
      },

--- a/packages/switch/src/component.vue
+++ b/packages/switch/src/component.vue
@@ -12,7 +12,7 @@
        @click="handleMiscClick"
        :style="{ 'width': coreWidth + 'px' }">
        <i :class="[onIconClass]" v-if="onIconClass"></i>
-        <span v-if="onText">{{ onText }}</span>
+        <span v-if="!onIconClass && onText">{{ onText }}</span>
      </div>
    </transition>
    <transition name="label-fade">
@@ -22,7 +22,7 @@
        @click="handleMiscClick"
        :style="{ 'width': coreWidth + 'px' }">
        <i :class="[offIconClass]" v-if="offIconClass"></i>
-        <span v-if="offText">{{ offText }}</span>
+        <span v-if="!offIconClass && offText">{{ offText }}</span>
      </div>
    </transition>
  </div>

--- a/scripts/cooking.demo.js
+++ b/scripts/cooking.demo.js
@@ -2,7 +2,7 @@ var cooking = require('cooking');
 var path = require('path');
 var md = require('markdown-it')();
 var Components = require('../components.json');
-var striptags = require('strip-tags');
+var striptags = require('../src/utils/strip-tags');
 function convert(str){
  str = str.replace(/(&#x)(\w{4});/gi,function($0){

--- a/src/utils/strip-tags.js
+++ b/src/utils/strip-tags.js
+/*!
+ * strip-tags <https://github.com/jonschlinkert/strip-tags>
+ *
+ * Copyright (c) 2015 Jon Schlinkert, contributors.
+ * Licensed under the MIT license.
+ */
+'use strict';
+var cheerio = require('cheerio');
+module.exports = function (str, tags) {
+  var $ = cheerio.load(str, {decodeEntities: false});
+  if (!tags || tags.length === 0) {
+    return str;
+  }
+  tags = !Array.isArray(tags) ? [tags] : tags;
+  var len = tags.length;
+  while (len--) {
+    $(tags[len]).remove();
+  }
+  return $.html();
+};