From 0706805226cc8ad90011a568c1a14bf0701abd37 Mon Sep 17 00:00:00 2001
From: hetech <dengzhiyang123@126.com>
Date: Mon, 18 Mar 2019 19:41:08 +0800
Subject: [PATCH] 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   | 45 ++++++++++++++--------------
 examples/components/footer-nav.vue   |  2 +-
 examples/components/footer.vue       |  2 +-
 examples/components/header.vue       |  4 +--
 examples/components/search.vue       |  2 +-
 examples/components/side-nav.vue     |  4 +--
 examples/components/theme-picker.vue |  4 +--
 examples/docs/en-US/card.md          |  4 +--
 examples/docs/en-US/installation.md  |  7 +++--
 examples/docs/en-US/rate.md          |  8 ++---
 examples/docs/es/card.md             |  4 +--
 examples/docs/es/installation.md     |  7 +++--
 examples/docs/es/rate.md             |  8 ++---
 examples/docs/fr-FR/card.md          |  4 +--
 examples/docs/fr-FR/installation.md  |  7 +++--
 examples/docs/fr-FR/rate.md          |  8 ++---
 examples/docs/zh-CN/card.md          |  2 +-
 examples/docs/zh-CN/installation.md  |  7 +++--
 examples/docs/zh-CN/rate.md          |  8 ++---
 examples/i18n/component.json         |  8 ++---
 20 files changed, 78 insertions(+), 67 deletions(-)

diff --git a/examples/components/demo-block.vue b/examples/components/demo-block.vue
index 62d3a6664..0a1d2f38a 100644
--- a/examples/components/demo-block.vue
+++ b/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);
         }
       }
     },
diff --git a/examples/components/footer-nav.vue b/examples/components/footer-nav.vue
index 45e58123e..63c5fd9ac 100644
--- a/examples/components/footer-nav.vue
+++ b/examples/components/footer-nav.vue
@@ -17,7 +17,7 @@
   </div>
 </template>
 
-<style>
+<style lang="scss">
   .footer-nav {
     padding: 40px 0;
     color: #333;
diff --git a/examples/components/footer.vue b/examples/components/footer.vue
index 28a75a95e..ca06e0325 100644
--- a/examples/components/footer.vue
+++ b/examples/components/footer.vue
@@ -43,7 +43,7 @@
   </footer>
 </template>
 
-<style>
+<style lang="scss">
   .footer {
     background-color: #F7FBFD;
     width: 100%;
diff --git a/examples/components/header.vue b/examples/components/header.vue
index b0888a596..d27f7eb00 100644
--- a/examples/components/header.vue
+++ b/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;
       }
diff --git a/examples/components/search.vue b/examples/components/search.vue
index 073a7a2d1..b1291da32 100644
--- a/examples/components/search.vue
+++ b/examples/components/search.vue
@@ -35,7 +35,7 @@
   </el-autocomplete>
 </template>
 
-<style>
+<style lang="scss">
   .algolia-search {
     width: 450px !important;
 
diff --git a/examples/components/side-nav.vue b/examples/components/side-nav.vue
index 2fe91795e..f25b98502 100644
--- a/examples/components/side-nav.vue
+++ b/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"
diff --git a/examples/components/theme-picker.vue b/examples/components/theme-picker.vue
index bc64a35f1..fa87a076b 100644
--- a/examples/components/theme-picker.vue
+++ b/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 {
diff --git a/examples/docs/en-US/card.md b/examples/docs/en-US/card.md
index 55c940a49..f99126647 100644
--- a/examples/docs/en-US/card.md
+++ b/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>
diff --git a/examples/docs/en-US/installation.md b/examples/docs/en-US/installation.md
index 6bcad9919..9ea096d60 100644
--- a/examples/docs/en-US/installation.md
+++ b/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).
diff --git a/examples/docs/en-US/rate.md b/examples/docs/en-US/rate.md
index 6cc77c236..ce875caae 100644
--- a/examples/docs/en-US/rate.md
+++ b/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
diff --git a/examples/docs/es/card.md b/examples/docs/es/card.md
index b33712200..d7104005f 100644
--- a/examples/docs/es/card.md
+++ b/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>
diff --git a/examples/docs/es/installation.md b/examples/docs/es/installation.md
index 412657029..2503fd6df 100644
--- a/examples/docs/es/installation.md
+++ b/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)
diff --git a/examples/docs/es/rate.md b/examples/docs/es/rate.md
index 3c2596f19..8f9558191 100644
--- a/examples/docs/es/rate.md
+++ b/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
diff --git a/examples/docs/fr-FR/card.md b/examples/docs/fr-FR/card.md
index a94dad684..77733031f 100644
--- a/examples/docs/fr-FR/card.md
+++ b/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>
diff --git a/examples/docs/fr-FR/installation.md b/examples/docs/fr-FR/installation.md
index 6b2b625c6..fd39b3cc9 100644
--- a/examples/docs/fr-FR/installation.md
+++ b/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).
diff --git a/examples/docs/fr-FR/rate.md b/examples/docs/fr-FR/rate.md
index 38a02ac46..0d3b1e310 100644
--- a/examples/docs/fr-FR/rate.md
+++ b/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
diff --git a/examples/docs/zh-CN/card.md b/examples/docs/zh-CN/card.md
index 506a5107a..b6a837a7e 100644
--- a/examples/docs/zh-CN/card.md
+++ b/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">
diff --git a/examples/docs/zh-CN/installation.md b/examples/docs/zh-CN/installation.md
index 8cc61968b..62ccdff21 100644
--- a/examples/docs/zh-CN/installation.md
+++ b/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)。
diff --git a/examples/docs/zh-CN/rate.md b/examples/docs/zh-CN/rate.md
index a00ed1ad7..5a78bbc19 100644
--- a/examples/docs/zh-CN/rate.md
+++ b/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
diff --git a/examples/i18n/component.json b/examples/i18n/component.json
index 592cfa378..8e4ffee1e 100644
--- a/examples/i18n/component.json
+++ b/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",