Skip to content

E
Element
Commit 41c53099 authored by 杨奕's avatar 杨奕 Committed by FuryBean
Browse files
Options

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

parent d5bd38e4
Hide whitespace changes
Inline Side-by-side
Showing with 396 additions and 115 deletions
build/cooking.demo.js
View file @ 41c53099
...@@ -59,9 +59,10 @@ cooking.add('vueMarkdown', { ...@@ -59,9 +59,10 @@ cooking.add('vueMarkdown', {
if (tokens[idx].nesting === 1) { if (tokens[idx].nesting === 1) {
var description = (m && m.length > 1) ? m[1] : ''; var description = (m && m.length > 1) ? m[1] : '';
var content = tokens[idx + 1].content; 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 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 var descriptionHTML = description
? md.render(description) ? md.render(description)
: ''; : '';
......
examples/components/demo-block.vue
View file @ 41c53099
...@@ -167,12 +167,12 @@ ...@@ -167,12 +167,12 @@
methods: { methods: {
goJsfiddle() { 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>' + 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>'; '\n<scr' + 'ipt src="//unpkg.com/element-ui@next/lib/index.js"></scr' + 'ipt>';
let jsTpl = (script || '').replace(/export default/, 'var Main =').trim(); let jsTpl = (script || '').replace(/export default/, 'var Main =').trim();
let htmlTpl = `${resourcesTpl}\n<div id="app">\n${html.trim()}\n</div>`; 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 = jsTpl
? jsTpl + '\nvar Ctor = Vue.extend(Main)\nnew Ctor().$mount(\'#app\')' ? jsTpl + '\nvar Ctor = Vue.extend(Main)\nnew Ctor().$mount(\'#app\')'
: 'new Vue().$mount(\'#app\')'; : 'new Vue().$mount(\'#app\')';
...@@ -180,7 +180,8 @@ ...@@ -180,7 +180,8 @@
js: jsTpl, js: jsTpl,
css: cssTpl, css: cssTpl,
html: htmlTpl, html: htmlTpl,
panel_js: 3 panel_js: 3,
panel_css: 1
}; };
const form = document.createElement('form'); const form = document.createElement('form');
const node = document.createElement('textarea'); const node = document.createElement('textarea');
......
examples/docs/zh-CN/input.md
View file @ 41c53099
...@@ -209,6 +209,16 @@ ...@@ -209,6 +209,16 @@
placeholder="请输入内容" placeholder="请输入内容"
v-model="input"> v-model="input">
</el-input> </el-input>
<script>
export default {
data() {
return {
input: ''
}
}
}
</script>
``` ```
::: :::
...@@ -222,6 +232,16 @@ ...@@ -222,6 +232,16 @@
v-model="input1" v-model="input1"
:disabled="true"> :disabled="true">
</el-input> </el-input>
<script>
export default {
data() {
return {
input1: ''
}
}
}
</script>
``` ```
::: :::
...@@ -237,6 +257,21 @@ ...@@ -237,6 +257,21 @@
v-model="input2" v-model="input2"
@click="handleIconClick"> @click="handleIconClick">
</el-input> </el-input>
<script>
export default {
data() {
return {
input2: ''
}
},
methods: {
handleIconClick(ev) {
console.log(ev);
}
}
}
</script>
``` ```
::: :::
...@@ -252,6 +287,16 @@ ...@@ -252,6 +287,16 @@
placeholder="请输入内容" placeholder="请输入内容"
v-model="textarea"> v-model="textarea">
</el-input> </el-input>
<script>
export default {
data() {
return {
textarea: ''
}
}
}
</script>
``` ```
::: :::
...@@ -261,20 +306,41 @@ ...@@ -261,20 +306,41 @@
::: demo 可通过 slot 来指定在 input 中前置或者后置内容。 ::: demo 可通过 slot 来指定在 input 中前置或者后置内容。
```html ```html
<el-input placeholder="请输入内容" v-model="input3"> <template>
<template slot="prepend">Http://</template> <el-input placeholder="请输入内容" v-model="input3">
</el-input> <template slot="prepend">Http://</template>
<el-input placeholder="请输入内容" v-model="input4"> </el-input>
<template slot="append">.com</template> <el-input placeholder="请输入内容" v-model="input4">
</el-input> <template slot="append">.com</template>
<el-input placeholder="请输入内容" v-model="input5" style="width: 300px;"> </el-input>
<el-select v-model="select" slot="prepend"> <el-input placeholder="请输入内容" v-model="input5" style="width: 300px;">
<el-option label="餐厅名" value="1"></el-option> <el-select v-model="select" slot="prepend">
<el-option label="订单号" value="2"></el-option> <el-option label="餐厅名" value="1"></el-option>
<el-option label="用户电话" value="3"></el-option> <el-option label="订单号" value="2"></el-option>
</el-select> <el-option label="用户电话" value="3"></el-option>
<el-button slot="append" icon="search"></el-button> </el-select>
</el-input> <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 @@ ...@@ -303,6 +369,19 @@
v-model="input9"> v-model="input9">
</el-input> </el-input>
</div> </div>
<script>
export default {
data() {
return {
input6: '',
input7: '',
input8: '',
input9: ''
}
}
}
</script>
``` ```
::: :::
...@@ -433,8 +512,29 @@ ...@@ -433,8 +512,29 @@
@select="handleSelect" @select="handleSelect"
></el-autocomplete> ></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> <script>
var Vue = require('vue');
Vue.component('my-item', { Vue.component('my-item', {
functional: true, functional: true,
render: function (h, ctx) { render: function (h, ctx) {
......
examples/docs/zh-CN/layout.md
View file @ 41c53099
...@@ -39,32 +39,63 @@ ...@@ -39,32 +39,63 @@
::: demo 通过 row 和 col 组件，并通过 col 组件的 `span` 属性我们就可以自由地组合布局。 ::: demo 通过 row 和 col 组件，并通过 col 组件的 `span` 属性我们就可以自由地组合布局。
```html ```html
<el-row> <template>
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col> <el-row>
</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-row>
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
</el-row> <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-row>
<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-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-row> <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-row>
<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"></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-light"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row> <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-row>
<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"></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-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"></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-light"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
</el-row> <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 @@ ...@@ -74,12 +105,43 @@
::: demo Row 组件 提供 `gutter` 属性来指定每一栏之间的间隔，默认间隔为 0。 ::: demo Row 组件 提供 `gutter` 属性来指定每一栏之间的间隔，默认间隔为 0。
```html ```html
<el-row :gutter="20"> <template>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <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-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> <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 @@ ...@@ -89,21 +151,52 @@
::: demo ::: demo
```html ```html
<el-row :gutter="20"> <template>
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col> <el-row :gutter="20">
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col> <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
</el-row> <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
<el-row :gutter="20"> </el-row>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col> <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="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-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-row :gutter="20"> </el-row>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col> <el-row :gutter="20">
<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-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-row> <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 @@ ...@@ -113,17 +206,48 @@
::: demo 通过制定 col 组件的 `offset` 属性可以指定分栏偏移的栏数。 ::: demo 通过制定 col 组件的 `offset` 属性可以指定分栏偏移的栏数。
```html ```html
<el-row :gutter="20"> <template>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-row :gutter="20">
<el-col :span="6" :offset="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> <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
<el-row :gutter="20"> </el-row>
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col> <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-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
<el-row :gutter="20"> </el-row>
<el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col> <el-row :gutter="20">
</el-row> <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 @@ ...@@ -133,31 +257,62 @@
::: demo 将 `type` 属性赋值为 'flex'，可以启用 flex 布局，并可通过 `justify` 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。 ::: demo 将 `type` 属性赋值为 'flex'，可以启用 flex 布局，并可通过 `justify` 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。
```html ```html
<el-row type="flex" class="row-bg"> <template>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-row type="flex" class="row-bg">
<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"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-row type="flex" class="row-bg" justify="center"> </el-row>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-row type="flex" class="row-bg" justify="center">
<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"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-row type="flex" class="row-bg" justify="end"> </el-row>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-row type="flex" class="row-bg" justify="end">
<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"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-row type="flex" class="row-bg" justify="space-between"> </el-row>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-row type="flex" class="row-bg" justify="space-between">
<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"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-row type="flex" class="row-bg" justify="space-around"> </el-row>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-row type="flex" class="row-bg" justify="space-around">
<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"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row> <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
View file @ 41c53099
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
export default { export default {
data () { data () {
return { return {
radio: '' radio: '1'
}; };
} }
} }
...@@ -69,11 +69,23 @@ ...@@ -69,11 +69,23 @@
:::demo 结合`el-radio-group`元素和子元素`el-radio`可以实现单选组，在`el-radio-group`中绑定`v-model`，在`el-radio`中设置好`label`即可，无需再给每一个`el-radio`绑定变量，另外，还提供了`change`事件来响应变化，它会传入一个参数`value`。 :::demo 结合`el-radio-group`元素和子元素`el-radio`可以实现单选组，在`el-radio-group`中绑定`v-model`，在`el-radio`中设置好`label`即可，无需再给每一个`el-radio`绑定变量，另外，还提供了`change`事件来响应变化，它会传入一个参数`value`。
```html ```html
<el-radio-group v-model="radio2"> <template>
<el-radio :label="3">备选项</el-radio> <el-radio-group v-model="radio2">
<el-radio :label="6">备选项</el-radio> <el-radio :label="3">备选项</el-radio>
<el-radio :label="9">备选项</el-radio> <el-radio :label="6">备选项</el-radio>
</el-radio-group> <el-radio :label="9">备选项</el-radio>
</el-radio-group>
</template>
<script>
export default {
data () {
return {
radio2: 3
};
}
}
</script>
``` ```
::: :::
...@@ -83,12 +95,24 @@ ...@@ -83,12 +95,24 @@
:::demo 只需要把`el-radio`元素换成`el-radio-button`元素即可，此外，Element 还提供了`size`属性给按钮组，支持`large`和`small`两种（如果不设定为默认）。 :::demo 只需要把`el-radio`元素换成`el-radio-button`元素即可，此外，Element 还提供了`size`属性给按钮组，支持`large`和`small`两种（如果不设定为默认）。
```html ```html
<el-radio-group v-model="radio3"> <template>
<el-radio-button label="上海"></el-radio-button> <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-button label="深圳"></el-radio-button> <el-radio-button label="广州" :disabled="true"></el-radio-button>
</el-radio-group> <el-radio-button label="深圳"></el-radio-button>
</el-radio-group>
</template>
<script>
export default {
data () {
return {
radio3: ''
};
}
}
</script>
``` ```
::: :::
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment