JSFiddle demo: add <style> support (#935)

build/cooking.demo.js

@@ -59,9 +59,10 @@ cooking.add('vueMarkdown', {
         if (tokens[idx].nesting === 1) {
           var description = (m && m.length > 1) ? m[1] : '';
           var content = tokens[idx + 1].content;
-          var html = convert(striptags.strip(content, 'script'));
+          var html = convert(striptags.strip(content, ['script', 'style']));
           var script = striptags.fetch(content, 'script');
-          var jsfiddle = { html: html, script: script };
+          var style = striptags.fetch(content, 'style');
+          var jsfiddle = { html: html, script: script, style: style };
           var descriptionHTML = description
             ? md.render(description)
             : '';

examples/components/demo-block.vue

@@ -167,12 +167,12 @@
 
     methods: {
       goJsfiddle() {
-        const { script, html } = this.jsfiddle;
+        const { script, html, style } = this.jsfiddle;
         const resourcesTpl = '<scr' + 'ipt src="//unpkg.com/vue/dist/vue.js"></scr' + 'ipt>' +
         '\n<scr' + 'ipt src="//unpkg.com/element-ui@next/lib/index.js"></scr' + 'ipt>';
         let jsTpl = (script || '').replace(/export default/, 'var Main =').trim();
         let htmlTpl = `${resourcesTpl}\n<div id="app">\n${html.trim()}\n</div>`;
-        let cssTpl = '@import url("//unpkg.com/element-ui@next/lib/theme-default/index.css");';
+        let cssTpl = `@import url("//unpkg.com/element-ui@next/lib/theme-default/index.css");\n${(style || '').trim()}\n`;
         jsTpl = jsTpl
           ? jsTpl + '\nvar Ctor = Vue.extend(Main)\nnew Ctor().$mount(\'#app\')'
           : 'new Vue().$mount(\'#app\')';
@@ -180,7 +180,8 @@
           js: jsTpl,
           css: cssTpl,
           html: htmlTpl,
-          panel_js: 3
+          panel_js: 3,
+          panel_css: 1
         };
         const form = document.createElement('form');
         const node = document.createElement('textarea');

examples/docs/zh-CN/input.md

@@ -209,6 +209,16 @@
   placeholder="请输入内容"
   v-model="input">
 </el-input>
+
+<script>
+export default {
+  data() {
+    return {
+      input: ''
+    }
+  }
+}
+</script>
 ```
 :::
 
@@ -222,6 +232,16 @@
   v-model="input1"
   :disabled="true">
 </el-input>
+
+<script>
+export default {
+  data() {
+    return {
+      input1: ''
+    }
+  }
+}
+</script>
 ```
 :::
 
@@ -237,6 +257,21 @@
   v-model="input2"
   @click="handleIconClick">
 </el-input>
+
+<script>
+export default {
+  data() {
+    return {
+      input2: ''
+    }
+  },
+  methods: {
+    handleIconClick(ev) {
+      console.log(ev);
+    }
+  }
+}
+</script>
 ```
 :::
 
@@ -252,6 +287,16 @@
   placeholder="请输入内容"
   v-model="textarea">
 </el-input>
+
+<script>
+export default {
+  data() {
+    return {
+      textarea: ''
+    }
+  }
+}
+</script>
 ```
 :::
 
@@ -261,20 +306,41 @@
 
 ::: demo 可通过 slot 来指定在 input 中前置或者后置内容。
 ```html
-<el-input placeholder="请输入内容" v-model="input3">
-  <template slot="prepend">Http://</template>
-</el-input>
-<el-input placeholder="请输入内容" v-model="input4">
-  <template slot="append">.com</template>
-</el-input>
-<el-input placeholder="请输入内容" v-model="input5" style="width: 300px;">
-  <el-select v-model="select" slot="prepend">
-    <el-option label="餐厅名" value="1"></el-option>
-    <el-option label="订单号" value="2"></el-option>
-    <el-option label="用户电话" value="3"></el-option>
-  </el-select>
-  <el-button slot="append" icon="search"></el-button>
-</el-input>
+<template>
+  <el-input placeholder="请输入内容" v-model="input3">
+    <template slot="prepend">Http://</template>
+  </el-input>
+  <el-input placeholder="请输入内容" v-model="input4">
+    <template slot="append">.com</template>
+  </el-input>
+  <el-input placeholder="请输入内容" v-model="input5" style="width: 300px;">
+    <el-select v-model="select" slot="prepend">
+      <el-option label="餐厅名" value="1"></el-option>
+      <el-option label="订单号" value="2"></el-option>
+      <el-option label="用户电话" value="3"></el-option>
+    </el-select>
+    <el-button slot="append" icon="search"></el-button>
+  </el-input>
+</template>
+
+<style>
+.el-select .el-input {
+  width: 100px;
+}
+</style>
+
+<script>
+export default {
+  data() {
+    return {
+      input3: '',
+      input4: '',
+      input5: '',
+      select: ''
+    }
+  }
+}
+</script>
 ```
 :::
 
@@ -303,6 +369,19 @@
     v-model="input9">
   </el-input>
 </div>
+
+<script>
+export default {
+  data() {
+    return {
+      input6: '',
+      input7: '',
+      input8: '',
+      input9: ''
+    }
+  }
+}
+</script>
 ```
 :::
 
@@ -433,8 +512,29 @@
   @select="handleSelect"
 ></el-autocomplete>
 
+<style>
+.my-autocomplete {
+  li {
+    line-height: normal;
+    padding: 7px;
+
+    .name {
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+    .addr {
+      font-size: 12px;
+      color: #b4b4b4;
+    }
+
+    .highlighted .addr {
+      color: #ddd;
+    }
+  }
+}
+</style>
+
 <script>
-  var Vue = require('vue');
   Vue.component('my-item', {
     functional: true,
     render: function (h, ctx) {

examples/docs/zh-CN/layout.md

@@ -39,32 +39,63 @@
 
 ::: demo 通过 row 和 col 组件，并通过 col 组件的 `span` 属性我们就可以自由地组合布局。
 ```html
-<el-row>
-  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
-</el-row>
-<el-row>
-  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
-</el-row>
-<el-row>
-  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
-  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
-</el-row>
-<el-row>
-  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
-  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
-</el-row>
-<el-row>
-  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
-  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
-  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
-</el-row>
+<template>
+  <el-row>
+    <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
+  </el-row>
+  <el-row>
+    <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
+    <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
+  </el-row>
+  <el-row>
+    <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
+    <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
+    <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
+  </el-row>
+  <el-row>
+    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+    <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
+    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+    <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
+  </el-row>
+  <el-row>
+    <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+    <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
+    <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+    <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
+    <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+    <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
+  </el-row>
+</template>
+
+<style>
+.el-row {
+  margin-bottom: 20px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+.el-col {
+  border-radius: 4px;
+}
+.bg-purple-dark {
+  background: #99a9bf;
+}
+.bg-purple {
+  background: #d3dce6;
+}
+.bg-purple-light {
+  background: #e5e9f2;
+}
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+}
+.row-bg {
+  padding: 10px 0;
+  background-color: #f9fafc;
+}
+</style>
 ```
 :::
 
@@ -74,12 +105,43 @@
 
 ::: demo Row 组件 提供 `gutter` 属性来指定每一栏之间的间隔，默认间隔为 0。
 ```html
-<el-row :gutter="20">
-  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
-</el-row>
+<template>
+  <el-row :gutter="20">
+    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  </el-row>
+</template>
+
+<style>
+.el-row {
+  margin-bottom: 20px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+.el-col {
+  border-radius: 4px;
+}
+.bg-purple-dark {
+  background: #99a9bf;
+}
+.bg-purple {
+  background: #d3dce6;
+}
+.bg-purple-light {
+  background: #e5e9f2;
+}
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+}
+.row-bg {
+  padding: 10px 0;
+  background-color: #f9fafc;
+}
+</style>
 ```
 :::
 
@@ -89,21 +151,52 @@
 
 ::: demo
 ```html
-<el-row :gutter="20">
-  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
-</el-row>
-<el-row :gutter="20">
-  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
-</el-row>
-<el-row :gutter="20">
-  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
-</el-row>
+<template>
+  <el-row :gutter="20">
+    <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
+    <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
+  </el-row>
+  <el-row :gutter="20">
+    <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
+    <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
+    <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+    <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+  </el-row>
+  <el-row :gutter="20">
+    <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+    <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
+    <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+  </el-row>
+</template>
+
+<style>
+.el-row {
+  margin-bottom: 20px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+.el-col {
+  border-radius: 4px;
+}
+.bg-purple-dark {
+  background: #99a9bf;
+}
+.bg-purple {
+  background: #d3dce6;
+}
+.bg-purple-light {
+  background: #e5e9f2;
+}
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+}
+.row-bg {
+  padding: 10px 0;
+  background-color: #f9fafc;
+}
+</style>
 ```
 :::
 
@@ -113,17 +206,48 @@
 
 ::: demo 通过制定 col 组件的 `offset` 属性可以指定分栏偏移的栏数。
 ```html
-<el-row :gutter="20">
-  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
-</el-row>
-<el-row :gutter="20">
-  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
-</el-row>
-<el-row :gutter="20">
-  <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
-</el-row>
+<template>
+  <el-row :gutter="20">
+    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+    <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
+  </el-row>
+  <el-row :gutter="20">
+    <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
+    <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
+  </el-row>
+  <el-row :gutter="20">
+    <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
+  </el-row>
+</template>
+
+<style>
+.el-row {
+  margin-bottom: 20px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+.el-col {
+  border-radius: 4px;
+}
+.bg-purple-dark {
+  background: #99a9bf;
+}
+.bg-purple {
+  background: #d3dce6;
+}
+.bg-purple-light {
+  background: #e5e9f2;
+}
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+}
+.row-bg {
+  padding: 10px 0;
+  background-color: #f9fafc;
+}
+</style>
 ```
 :::
 
@@ -133,31 +257,62 @@
 
 ::: demo 将 `type` 属性赋值为 'flex'，可以启用 flex 布局，并可通过 `justify` 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。
 ```html
-<el-row type="flex" class="row-bg">
-  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
-  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
-</el-row>
-<el-row type="flex" class="row-bg" justify="center">
-  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
-  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
-</el-row>
-<el-row type="flex" class="row-bg" justify="end">
-  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
-  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
-</el-row>
-<el-row type="flex" class="row-bg" justify="space-between">
-  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
-  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
-</el-row>
-<el-row type="flex" class="row-bg" justify="space-around">
-  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
-  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
-</el-row>
+<template>
+  <el-row type="flex" class="row-bg">
+    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+    <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
+    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  </el-row>
+  <el-row type="flex" class="row-bg" justify="center">
+    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+    <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
+    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  </el-row>
+  <el-row type="flex" class="row-bg" justify="end">
+    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+    <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
+    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  </el-row>
+  <el-row type="flex" class="row-bg" justify="space-between">
+    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+    <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
+    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  </el-row>
+  <el-row type="flex" class="row-bg" justify="space-around">
+    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+    <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
+    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  </el-row>
+</template>
+
+<style>
+.el-row {
+  margin-bottom: 20px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+.el-col {
+  border-radius: 4px;
+}
+.bg-purple-dark {
+  background: #99a9bf;
+}
+.bg-purple {
+  background: #d3dce6;
+}
+.bg-purple-light {
+  background: #e5e9f2;
+}
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+}
+.row-bg {
+  padding: 10px 0;
+  background-color: #f9fafc;
+}
+</style>
 ```
 :::
 

examples/docs/zh-CN/radio.md

@@ -31,7 +31,7 @@
   export default {
     data () {
       return {
-        radio: ''
+        radio: '1'
       };
     }
   }
@@ -69,11 +69,23 @@
 :::demo 结合`el-radio-group`元素和子元素`el-radio`可以实现单选组，在`el-radio-group`中绑定`v-model`，在`el-radio`中设置好`label`即可，无需再给每一个`el-radio`绑定变量，另外，还提供了`change`事件来响应变化，它会传入一个参数`value`。
 
 ```html
-<el-radio-group v-model="radio2">
-  <el-radio :label="3">备选项</el-radio>
-  <el-radio :label="6">备选项</el-radio>
-  <el-radio :label="9">备选项</el-radio>
-</el-radio-group>
+<template>
+  <el-radio-group v-model="radio2">
+    <el-radio :label="3">备选项</el-radio>
+    <el-radio :label="6">备选项</el-radio>
+    <el-radio :label="9">备选项</el-radio>
+  </el-radio-group>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        radio2: 3
+      };
+    }
+  }
+</script>
 ```
 :::
 
@@ -83,12 +95,24 @@
 
 :::demo 只需要把`el-radio`元素换成`el-radio-button`元素即可，此外，Element 还提供了`size`属性给按钮组，支持`large`和`small`两种（如果不设定为默认）。
 ```html
-<el-radio-group v-model="radio3">
-  <el-radio-button label="上海"></el-radio-button>
-  <el-radio-button label="北京"></el-radio-button>
-  <el-radio-button label="广州" :disabled="true"></el-radio-button>
-  <el-radio-button label="深圳"></el-radio-button>
-</el-radio-group>
+<template>
+  <el-radio-group v-model="radio3">
+    <el-radio-button label="上海"></el-radio-button>
+    <el-radio-button label="北京"></el-radio-button>
+    <el-radio-button label="广州" :disabled="true"></el-radio-button>
+    <el-radio-button label="深圳"></el-radio-button>
+  </el-radio-group>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        radio3: ''
+      };
+    }
+  }
+</script>
 ```
 :::