mirror of https://github.com/ElemeFE/element
chore: use codepen to display demo & fix doc error (#14747)
* fix doc * update doc component * use codeopen to display demo * use codepen * fix image path * updatepull/14750/head
hetech
iamkun
parent
0e8bc859e0
commit
0706805226
|
|
@ -33,7 +33,7 @@
|
|||
size="small"
|
||||
type="text"
|
||||
class="control-button"
|
||||
@click.stop="goJsfiddle">
|
||||
@click.stop="goCodepen">
|
||||
{{ langConfig['button-text'] }}
|
||||
</el-button>
|
||||
</transition>
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
.demo-block {
|
||||
border: solid 1px #ebebeb;
|
||||
border-radius: 3px;
|
||||
|
|
@ -189,7 +189,7 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
jsfiddle: {
|
||||
codepen: {
|
||||
script: '',
|
||||
html: '',
|
||||
style: ''
|
||||
|
|
@ -202,8 +202,9 @@
|
|||
},
|
||||
|
||||
methods: {
|
||||
goJsfiddle() {
|
||||
const { script, html, style } = this.jsfiddle;
|
||||
goCodepen() {
|
||||
// since 2.6.2 use code rather than jsfiddle https://blog.codepen.io/documentation/api/prefill/
|
||||
const { script, html, style } = this.codepen;
|
||||
const resourcesTpl = '<scr' + 'ipt src="//unpkg.com/vue/dist/vue.js"></scr' + 'ipt>' +
|
||||
'\n<scr' + `ipt src="//unpkg.com/element-ui@${ version }/lib/index.js"></scr` + 'ipt>';
|
||||
let jsTpl = (script || '').replace(/export default/, 'var Main =').trim();
|
||||
|
|
@ -215,25 +216,23 @@
|
|||
const data = {
|
||||
js: jsTpl,
|
||||
css: cssTpl,
|
||||
html: htmlTpl,
|
||||
panel_js: 3,
|
||||
panel_css: 1
|
||||
html: htmlTpl
|
||||
};
|
||||
const form = document.getElementById('fiddle-form') || document.createElement('form');
|
||||
form.innerHTML = '';
|
||||
const node = document.createElement('textarea');
|
||||
|
||||
form.method = 'post';
|
||||
form.action = 'https://jsfiddle.net/api/post/library/pure/';
|
||||
form.target = '_blank';
|
||||
|
||||
for (let name in data) {
|
||||
node.name = name;
|
||||
node.value = data[name].toString();
|
||||
form.appendChild(node.cloneNode());
|
||||
while (form.firstChild) {
|
||||
form.removeChild(form.firstChild);
|
||||
}
|
||||
form.setAttribute('id', 'fiddle-form');
|
||||
form.method = 'POST';
|
||||
form.action = 'https://codepen.io/pen/define/';
|
||||
form.target = '_blank';
|
||||
form.style.display = 'none';
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.setAttribute('name', 'data');
|
||||
input.setAttribute('type', 'hidden');
|
||||
input.setAttribute('value', JSON.stringify(data));
|
||||
|
||||
form.appendChild(input);
|
||||
document.body.appendChild(form);
|
||||
|
||||
form.submit();
|
||||
|
|
@ -314,9 +313,9 @@
|
|||
}
|
||||
}
|
||||
if (code) {
|
||||
this.jsfiddle.html = stripTemplate(code);
|
||||
this.jsfiddle.script = stripScript(code);
|
||||
this.jsfiddle.style = stripStyle(code);
|
||||
this.codepen.html = stripTemplate(code);
|
||||
this.codepen.script = stripScript(code);
|
||||
this.codepen.style = stripStyle(code);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
.footer-nav {
|
||||
padding: 40px 0;
|
||||
color: #333;
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
</footer>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
.footer {
|
||||
background-color: #F7FBFD;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
.headerWrapper {
|
||||
height: 80px;
|
||||
}
|
||||
|
|
@ -180,7 +180,7 @@
|
|||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
@when active {
|
||||
.is-active {
|
||||
span, i {
|
||||
color: #409EFF;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
</el-autocomplete>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
.algolia-search {
|
||||
width: 450px !important;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<style>
|
||||
<style lang="scss">
|
||||
.side-nav {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -175,7 +175,7 @@
|
|||
<li
|
||||
class="nav-item"
|
||||
v-for="(navItem, key) in group.list"
|
||||
v-if="!navItem.disabled"
|
||||
v-show="!navItem.disabled"
|
||||
:key="key">
|
||||
<router-link
|
||||
active-class="active"
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
v-model="theme"></el-color-picker>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
.theme-picker {
|
||||
height: 80px;
|
||||
display: inline-block;
|
||||
@utils-vertical-center;
|
||||
// @utils-vertical-center;
|
||||
}
|
||||
|
||||
.theme-picker .el-color-picker__trigger {
|
||||
|
|
|
|||
|
|
@ -79,12 +79,12 @@ Display richer content by adding some configs.
|
|||
<el-row>
|
||||
<el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
|
||||
<el-card :body-style="{ padding: '0px' }">
|
||||
<img src="~examples/assets/images/hamburger.png" class="image">
|
||||
<img src="../../examples/assets/images/hamburger.png" class="image">
|
||||
<div style="padding: 14px;">
|
||||
<span>Yummy hamburger</span>
|
||||
<div class="bottom clearfix">
|
||||
<time class="time">{{ currentDate }}</time>
|
||||
<el-button type="text" class="button">Operating button</el-button>
|
||||
<el-button type="text" class="button">Operating</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
|
|
|||
|
|
@ -25,8 +25,11 @@ We recommend our users to lock Element's version when using CDN. Please refer to
|
|||
|
||||
### Hello world
|
||||
|
||||
If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/)
|
||||
If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://codepen.io/ziyoung/pen/rRKYpd)
|
||||
|
||||
<iframe width="100%" height="600" src="//jsfiddle.net/hzfpyvg6/1213/embedded/html,result/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
||||
<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html" frameborder="no" allowtransparency="true" allowfullscreen="true">
|
||||
See the Pen <a href='https://codepen.io/ziyoung/pen/rRKYpd/'>Element demo</a> by hetech
|
||||
(<a href='https://codepen.io/ziyoung'>@ziyoung</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
If you are using npm and wish to apply webpack, please continue to the next page: [Quick Start](/#/en-US/component/quickstart).
|
||||
|
|
|
|||
|
|
@ -81,12 +81,12 @@ Muestre un contenido más rico añadiendo algunas configuraciones.
|
|||
<el-row>
|
||||
<el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
|
||||
<el-card :body-style="{ padding: '0px' }">
|
||||
<img src="~examples/assets/images/hamburger.png" class="image">
|
||||
<img src="../../examples/assets/images/hamburger.png" class="image">
|
||||
<div style="padding: 14px;">
|
||||
<span>Yummy hamburger</span>
|
||||
<div class="bottom clearfix">
|
||||
<time class="time">{{ currentDate }}</time>
|
||||
<el-button type="text" class="button">Operating button</el-button>
|
||||
<el-button type="text" class="button">Operating</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
|
|
|||
|
|
@ -24,8 +24,11 @@ Recomendamos a nuestros usuarios congelar la versión de Elemet cuando usas un C
|
|||
|
||||
### Hello world
|
||||
|
||||
Si esta usando un CDN, una página con Hello-World es fácil con Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/)
|
||||
Si esta usando un CDN, una página con Hello-World es fácil con Element. [Online Demo](https://codepen.io/ziyoung/pen/rRKYpd)
|
||||
|
||||
<iframe width="100%" height="600" src="//jsfiddle.net/hzfpyvg6/1213/embedded/html,result/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
||||
<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
|
||||
See the Pen <a href='https://codepen.io/ziyoung/pen/rRKYpd/'>Element demo</a> by hetech
|
||||
(<a href='https://codepen.io/ziyoung'>@ziyoung</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
Si esta usando npm y desea combinarlo con webpack, por favor continue a la siguiente página: [Quick Start](/#/es/component/quickstart)
|
||||
|
|
|
|||
|
|
@ -80,12 +80,12 @@ Affichez un contenu plus riche grâce à la configuration.
|
|||
<el-row>
|
||||
<el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
|
||||
<el-card :body-style="{ padding: '0px' }">
|
||||
<img src="~examples/assets/images/hamburger.png" class="image">
|
||||
<img src="../../examples/assets/images/hamburger.png" class="image">
|
||||
<div style="padding: 14px;">
|
||||
<span>Yummy hamburger</span>
|
||||
<div class="bottom clearfix">
|
||||
<time class="time">{{ currentDate }}</time>
|
||||
<el-button type="text" class="button">Operating button</el-button>
|
||||
<el-button type="text" class="button">Operating</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
|
|
|||
|
|
@ -25,8 +25,11 @@ Il est recommandé de fixer la version d'Element lors de l'utilisation du CDN. R
|
|||
|
||||
### Hello world
|
||||
|
||||
Si vous utilisez un CDN, une page hello-world peut être obtenue facilement avec Element ([démo en ligne](https://jsfiddle.net/hzfpyvg6/14/)).
|
||||
Si vous utilisez un CDN, une page hello-world peut être obtenue facilement avec Element ([démo en ligne](https://codepen.io/ziyoung/pen/rRKYpd)).
|
||||
|
||||
<iframe width="100%" height="600" src="//jsfiddle.net/hzfpyvg6/1213/embedded/html,result/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
||||
<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html" frameborder="no" allowtransparency="true" allowfullscreen="true">
|
||||
See the Pen <a href='https://codepen.io/ziyoung/pen/rRKYpd/'>Element demo</a> by hetech
|
||||
(<a href='https://codepen.io/ziyoung'>@ziyoung</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
Si vous utilisez npm et souhaitez ajouter webpack, continuez sur la page suivante: [Démarrer](/#/fr-FR/component/quickstart).
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@
|
|||
<el-row>
|
||||
<el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
|
||||
<el-card :body-style="{ padding: '0px' }">
|
||||
<img src="~examples/assets/images/hamburger.png" class="image">
|
||||
<img src="../../examples/assets/images/hamburger.png" class="image">
|
||||
<div style="padding: 14px;">
|
||||
<span>好吃的汉堡</span>
|
||||
<div class="bottom clearfix">
|
||||
|
|
|
|||
|
|
@ -25,8 +25,11 @@ npm i element-ui -S
|
|||
|
||||
### Hello world
|
||||
|
||||
通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](https://jsfiddle.net/hzfpyvg6/14/)
|
||||
通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](https://codepen.io/ziyoung/pen/rRKYpd)
|
||||
|
||||
<iframe width="100%" height="600" src="//jsfiddle.net/hzfpyvg6/1213/embedded/html,result/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
||||
<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html" frameborder="no" allowtransparency="true" allowfullscreen="true">
|
||||
See the Pen <a href='https://codepen.io/ziyoung/pen/rRKYpd/'>Element demo</a> by hetech
|
||||
(<a href='https://codepen.io/ziyoung'>@ziyoung</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：[快速上手](/#/zh-CN/component/quickstart)。
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
"hide-text": "隐藏代码",
|
||||
"show-text": "显示代码",
|
||||
"button-text": "在线运行",
|
||||
"tooltip-text": "前往 jsfiddle.net 运行此示例"
|
||||
"tooltip-text": "前往 codepen.io 运行此示例"
|
||||
},
|
||||
"footer": {
|
||||
"links": "链接",
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
"hide-text": "Hide",
|
||||
"show-text": "Expand",
|
||||
"button-text": "Try it!",
|
||||
"tooltip-text": "Run this demo on jsfiddle.net"
|
||||
"tooltip-text": "Run this demo on codepen.io"
|
||||
},
|
||||
"footer": {
|
||||
"links": "Links",
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
"hide-text": "Ocultar",
|
||||
"show-text": "Mostrar",
|
||||
"button-text": "Probar",
|
||||
"tooltip-text": "Prueba este ejemplo en jsfiddle.net"
|
||||
"tooltip-text": "Prueba este ejemplo en codepen.io"
|
||||
},
|
||||
"footer": {
|
||||
"links": "Enlaces",
|
||||
|
|
@ -98,7 +98,7 @@
|
|||
"hide-text": "Réduire",
|
||||
"show-text": "Agrandir",
|
||||
"button-text": "Essayez!",
|
||||
"tooltip-text": "Essayer cette démo sur jsfiddle.net"
|
||||
"tooltip-text": "Essayer cette démo sur codepen.io"
|
||||
},
|
||||
"footer": {
|
||||
"links": "Liens",
|
||||
|
|
|
|||
Loading…
Reference in New Issue