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

* update

examples/components/demo-block.vue

@@ -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() {
+      goCodepen() {
-        const { script, html, style } = this.jsfiddle;
+        // 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,
+          html: htmlTpl
-          panel_js: 3,
-          panel_css: 1
         };
         const form = document.getElementById('fiddle-form') || document.createElement('form');
-        form.innerHTML = '';
+        while (form.firstChild) {
-        const node = document.createElement('textarea');
+          form.removeChild(form.firstChild);
-
-        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());
         }
-        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.codepen.html = stripTemplate(code);
-          this.jsfiddle.script = stripScript(code);
+          this.codepen.script = stripScript(code);
-          this.jsfiddle.style = stripStyle(code);
+          this.codepen.style = stripStyle(code);
         }
       }
     },

examples/components/footer-nav.vue

@@ -17,7 +17,7 @@
   </div>
 </template>
 
-<style>
+<style lang="scss">
   .footer-nav {
     padding: 40px 0;
     color: #333;

examples/components/footer.vue

@@ -43,7 +43,7 @@
   </footer>
 </template>
 
-<style>
+<style lang="scss">
   .footer {
     background-color: #F7FBFD;
     width: 100%;

examples/components/header.vue

@@ -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;
       }

examples/components/search.vue

@@ -35,7 +35,7 @@
   </el-autocomplete>
 </template>
 
-<style>
+<style lang="scss">
   .algolia-search {
     width: 450px !important;
 

examples/components/side-nav.vue

@@ -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"

examples/components/theme-picker.vue

@@ -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 {

examples/docs/en-US/card.md

@@ -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>

examples/docs/en-US/installation.md

@@ -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).

examples/docs/es/card.md

@@ -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>

examples/docs/es/installation.md

@@ -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)

examples/docs/fr-FR/card.md

@@ -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>

examples/docs/fr-FR/installation.md

@@ -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).

examples/docs/zh-CN/card.md

@@ -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">

examples/docs/zh-CN/installation.md

@@ -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)。

examples/i18n/component.json

@@ -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",