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() {
-        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);
         }
       }
     },

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/en-US/rate.md

@@ -6,7 +6,7 @@ Used for rating
 
 :::demo Rate divides rating scores into three levels and these levels can be distinguished by using different background colors. By default background colors are the same, but you can assign them to reflect three levels using the `colors` attribute, and their two thresholds can be defined by `low-threshold` and `high-threshold`.
 
-``` html
+```html
 <div class="block">
   <span class="demonstration">Default</span>
   <el-rate v-model="value1"></el-rate>
@@ -38,7 +38,7 @@ Using text to indicate rating score
 
 :::demo Add attribute `show-text` to display text at the right of Rate. You can assign texts for different scores using `texts`. `texts` is an array whose length should be equal to the max score `max`.
 
-``` html
+```html
 <el-rate
   v-model="value3"
   :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
@@ -63,7 +63,7 @@ You can use different icons to distinguish different rate components.
 
 :::demo You can customize icons for three different levels using `icon-classes`. In this example, we also use `void-icon-class` to set the icon if it is unselected.
 
-``` html
+```html
 <el-rate
   v-model="value4"
   :icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
@@ -89,7 +89,7 @@ Read-only Rate is for displaying rating score. Half star is supported.
 
 :::demo Use attribute `disabled` to make the component read-only. Add `show-score` to display the rating score at the right side. Additionally, you can use attribute `score-template` to provide a score template. It must contain `{value}`, and `{value}` will be replaced with the rating score.
 
-``` html
+```html
 <el-rate
   v-model="value5"
   disabled

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/es/rate.md

@@ -7,7 +7,7 @@ Usado para la calificación
 :::demo Clasificación divide las puntuaciones en tres niveles y estos niveles pueden distinguirse usando diferentes colores de fondo. Por defecto los colores de fondo son iguales, pero puedes asignarlos para reflejar los tres niveles usando el atributo `colors` y sus dos umbrales pueden ser definidos con `low-treshold` y `high-treshold`.
 
 
-``` html
+```html
 <div class="block">
   <span class="demonstration">Default</span>
   <el-rate v-model="value1"></el-rate>
@@ -39,7 +39,7 @@ Usa texto para indicar la puntuación
 
 :::demo Agregar el atributo `show-text` para mostrar texto a la derecha del componente. Puede asignar textos para las distintas puntuaciones usando `texts`. `texts` es un arreglo cuya longitud debe ser igual a la máxima puntuación `max`.
 
-``` html
+```html
 <el-rate
   v-model="value3"
   :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
@@ -64,7 +64,7 @@ Puede utilizar iconos para diferenciar cada componente.
 
 :::demo Puede customizar iconos para tres niveles diferentes usando `icon-classes`. En este ejemplo también usamos `void-icon-class` para asignar un icono si no está seleccionado.
 
-``` html
+```html
 <el-rate
   v-model="value4"
   :icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
@@ -90,7 +90,7 @@ La calificación de solo lectura es para mostrar la puntuación. Soporta media e
 
 :::demo Use el atributo `disabled` para hacer el componente de solo lectura. Agregar `show-score` para mostrar la puntuación en el lado derecho. Además, puede usar el atributo `score-template` para proveer una plantilla. Tiene que contener `{value}`, y `{value}` será sustituido por la puntuación.
 
-``` html
+```html
 <el-rate
   v-model="value5"
   disabled

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/fr-FR/rate.md

@@ -6,7 +6,7 @@ Utilisé pour donner une note sur cinq étoiles.
 
 :::demo Rate divise les scores en trois niveaux et ces niveaux peuvent être distingués en utilisant différentes couleurs de fond. Par défaut ces couleurs sont identiques, mais vous pouvez affecter un tableau des codes couleur à l'attribut `colors`, ainsi que les deux seuils via `low-threshold` et `high-threshold`.
 
-``` html
+```html
 <div class="block">
   <span class="demonstration">Défaut</span>
   <el-rate v-model="value1"></el-rate>
@@ -38,7 +38,7 @@ Vous pouvez ajouter du texte à chaque score.
 
 :::demo Ajoutez l'attribut `show-text` pour afficher du texte à droite des étoiles. Vous pouvez choisir les textes avec l'attribut `texts`. C'est un tableau dont la taille doit être égale au score max `max`.
 
-``` html
+```html
 <el-rate
   v-model="value3"
   :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
@@ -63,7 +63,7 @@ Vous pouvez utiliser différentes icônes pour chaque
 
 :::demo Vous pouvez personnaliser les icônes de chaque niveau en utilisant `icon-classes`. Dans cet exemple, nous utilisons aussi `void-icon-class` qui permet de choisir l'icône des valeurs non-sélectionnées.
 
-``` html
+```html
 <el-rate
   v-model="value4"
   :icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
@@ -89,7 +89,7 @@ Le score peut être en lecture seule. Les demi-étoiles sont supportées.
 
 :::demo Utilisez `disabled` pour mettre le composant en lecture seule. Ajoutez `show-score` pour afficher le score à droite des étoiles. De plus, vous pouvez utiliser `score-template` pour déterminer un template. Il doit contenir `{value}` qui sera remplacé par la valeur du score.
 
-``` html
+```html
 <el-rate
   v-model="value5"
   disabled

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/docs/zh-CN/rate.md

@@ -5,7 +5,7 @@
 ### 基础用法
 
 :::demo 评分被分为三个等级，可以利用颜色对分数及情感倾向进行分级（默认情况下不区分颜色）。三个等级所对应的颜色用过`colors`属性设置，而它们对应的两个阈值则通过 `low-threshold` 和 `high-threshold` 设定。
-``` html
+```html
 <div class="block">
   <span class="demonstration">默认不区分颜色</span>
   <el-rate v-model="value1"></el-rate>
@@ -36,7 +36,7 @@
 用辅助文字直接地表达对应分数
 
 :::demo 为组件设置 `show-text` 属性会在右侧显示辅助文字。通过设置 `texts` 可以为每一个分值指定对应的辅助文字。`texts` 为一个数组，长度应等于最大值 `max`。
-``` html
+```html
 <el-rate
   v-model="value3"
   show-text>
@@ -59,7 +59,7 @@
 当有多层评价时，可以用不同类型的 icon 区分评分层级
 
 :::demo 设置`icon-classes`属性可以自定义对应 3 个不同分段的图标。本例还使用`void-icon-class`指定了未选中时的图标类名。
-``` html
+```html
 <el-rate
   v-model="value4"
   :icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
@@ -84,7 +84,7 @@
 只读的评分用来展示分数，允许出现半星
 
 :::demo 为组件设置 `disabled` 属性表示组件为只读，支持小数分值。此时若设置 `show-score`，则会在右侧显示目前的分值。可以提供 `score-template` 作为显示模板，模板为一个包含了 `{value}` 的字符串，`{value}` 会被解析为分值。
-``` html
+```html
 <el-rate
   v-model="value5"
   disabled

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