docs: update upload doc

2025-01-18 10:59:10 +08:00 · 2020-11-20 23:29:50 +08:00 · 2020-11-20 23:29:50 +08:00 · 95d28d48ea
commit 95d28d48ea
parent 35dc2332f9
8 changed files with 176 additions and 115 deletions
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@ -1,5 +1,5 @@
 Please make sure these boxes are checked before submitting your PR, thank you!

-* [ ] Make sure you follow Element's contributing guide ([中文](https://github.com/element-plus/element-plus/blob/master/.github/CONTRIBUTING.zh-CN.md) | [English](https://github.com/element-plus/element-plus/blob/master/.github/CONTRIBUTING.en-US.md) | [Español](https://github.com/element-plus/element-plus/blob/master/.github/CONTRIBUTING.es.md) | [Français](https://github.com/element-plus/element-plus/blob/master/.github/CONTRIBUTING.fr-FR.md)).
+* [ ] Make sure you follow Element's contributing guide [English](https://github.com/element-plus/element-plus/blob/master/.github/CONTRIBUTING.en-US.md) | ([中文](https://github.com/element-plus/element-plus/blob/master/.github/CONTRIBUTING.zh-CN.md) | [Español](https://github.com/element-plus/element-plus/blob/master/.github/CONTRIBUTING.es.md) | [Français](https://github.com/element-plus/element-plus/blob/master/.github/CONTRIBUTING.fr-FR.md)).
 * [ ] Make sure you are merging your commits to `dev` branch.
 * [ ] Add some descriptions and refer to relative issues for your PR.
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -1,5 +1,13 @@
 ## Changelog

+### Progress of Element Plus
+Progress of Element Plus, please check https://github.com/element-plus/element-plus
+
+
+
+
+
+
 ### 2.13.2

 *2020-05-18*
@ -97,13 +105,13 @@
 - Image
  - Perfect picture preview behavior (#16985 by @luckyCao)
  - Fix shield the page when preview big image (#16796 by @luckyCao)
- Drawer 
+- Drawer
  - Bugfix drawer-append-to-body-not-working (#16953 by @JeremyWuuuuu)
 - Select
  - Fix tag show value or empty issue (17199 by @luckyCao)
 - Scrollbar
  - Fix FireFox scroll bar width (#18091 by @iamkun)
-  
+
 #### Optimization

 - I18n
@ -235,7 +243,7 @@
  - Display correct header when range is specified (#16354 by @ziyoung)
 - Submenu
  - Fix prop append-to-body (#16289 by @a631807682)
- Table 
+- Table
  - Fix tree table when updating data (#16481 by @island205)
 - Select
  - Fix memory leak issue (#16463 by @island205)
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -1,5 +1,13 @@
 ## 更新日志

+### Element Plus 更新进度
+Element Plus 更新进度 请查看 https://github.com/element-plus/element-plus
+
+
+
+
+
+
 ### 2.13.2

 *2020-05-18*
@ -98,13 +106,13 @@
 - Image
  - 优化用户体验 (#16985 by @luckyCao)
  - 优化大图片展示问题 (#16796 by @luckyCao)
- Drawer 
+- Drawer
  - 修复 drawer-append-to-body 失效的 bug (#16953 by @JeremyWuuuuu)
 - Select
  - 修复空 tag 的 bug (17199 by @luckyCao)
 - Scrollbar
  - 修复 FireFox 双滚动条的 bug (#18091 by @iamkun)
-  
+
 #### Optimization

 - I18n
@ -235,7 +243,7 @@
  - 更新显示正确的 header 的逻辑 (#16354 by @ziyoung)
 - Submenu
  - 修复 append-to-body 问题 (#16289 by @a631807682)
- Table 
+- Table
  - 修复 tree table 数据更新问题 (#16481 by @island205)
 - Select
  - 修复内存泄漏问题 (#16463 by @island205)
--- a/packages/checkbox/index.ts
+++ b/packages/checkbox/index.ts
@ -1,7 +1,5 @@
 import { App } from 'vue'
 import Checkbox from './src/checkbox.vue'
-import CheckboxButton from './src/checkbox-button.vue'
-import CheckboxGroup from './src/checkbox-group.vue'

 Checkbox.install = (app: App): void => {
  app.component(Checkbox.name, Checkbox)
--- a/packages/dropdown/index.ts
+++ b/packages/dropdown/index.ts
@ -1,7 +1,5 @@
 import { App } from 'vue'
 import Dropdown from './src/dropdown.vue'
-import DropdownItem from './src/dropdown-item.vue'
-import DropdownMenu from './src/dropdown-menu.vue'

 Dropdown.install = (app: App): void => {
  app.component(Dropdown.name, Dropdown)
--- a/website/docs/es/upload.md
+++ b/website/docs/es/upload.md
@ -16,7 +16,9 @@ Carga archivos haciendo clic o arrastrándolos.
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">Clic para subir archivo</el-button>
-  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>
+  <template #tip>
+    <div class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>
+  </template>
 </el-upload>
 <script>
  export default {
@ -160,35 +162,36 @@ Use `scoped-slot` to change default thumbnail template.
  action="#"
  list-type="picture-card"
  :auto-upload="false">
-    <i slot="default" class="el-icon-plus"></i>
-    <div slot="file" slot-scope="{file}">
-      <img
-        class="el-upload-list__item-thumbnail"
-        :src="file.url" alt=""
-      >
-      <span class="el-upload-list__item-actions">
-        <span
-          class="el-upload-list__item-preview"
-          @click="handlePictureCardPreview(file)"
-        >
-          <i class="el-icon-zoom-in"></i>
+    <template #default>
+      <i class="el-icon-plus"></i>
+    </template>
+    <template #file="{file}">
+      <div>
+        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+        <span class="el-upload-list__item-actions">
+          <span
+            class="el-upload-list__item-preview"
+            @click="handlePictureCardPreview(file)"
+          >
+            <i class="el-icon-zoom-in"></i>
+          </span>
+          <span
+            v-if="!disabled"
+            class="el-upload-list__item-delete"
+            @click="handleDownload(file)"
+          >
+            <i class="el-icon-download"></i>
+          </span>
+          <span
+            v-if="!disabled"
+            class="el-upload-list__item-delete"
+            @click="handleRemove(file)"
+          >
+            <i class="el-icon-delete"></i>
+          </span>
        </span>
-        <span
-          v-if="!disabled"
-          class="el-upload-list__item-delete"
-          @click="handleDownload(file)"
-        >
-          <i class="el-icon-download"></i>
-        </span>
-        <span
-          v-if="!disabled"
-          class="el-upload-list__item-delete"
-          @click="handleRemove(file)"
-        >
-          <i class="el-icon-delete"></i>
-        </span>
-      </span>
-    </div>
+      </div>
+    </template>
 </el-upload>
 <el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
@ -231,7 +234,9 @@ Use `scoped-slot` to change default thumbnail template.
  :file-list="fileList"
  list-type="picture">
  <el-button size="small" type="primary">Clic para subir archivo</el-button>
-  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>
+  <template #tip>
+    <div class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>
+  </template>
 </el-upload>
 <script>
  export default {
@ -265,7 +270,9 @@ Utilice el _hook_ `on-change` para controlar la funcionalidad de la lista de arc
  :on-change="handleChange"
  :file-list="fileList">
  <el-button size="small" type="primary">Clic para subir archivo</el-button>
-  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>
+  <template #tip>
+    <div class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>
+  </template>
 </el-upload>
 <script>
  export default {
@ -306,7 +313,9 @@ Puede arrastrar el archivo dentro de un área en especifico para cargar el archi
  multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">Suelta tu archivo aquí o <em>haz clic para cargar</em></div>
-  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>
+  <template #tip>
+    <div class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>
+  </template>
 </el-upload>
 ```
 :::
@ -320,9 +329,13 @@ Puede arrastrar el archivo dentro de un área en especifico para cargar el archi
  ref="upload"
  action="https://jsonplaceholder.typicode.com/posts/"
  :auto-upload="false">
-  <el-button slot="trigger" size="small" type="primary">Selecciona un archivo</el-button>
+  <template #trigger>
+    <el-button size="small" type="primary">Selecciona un archivo</el-button>
+  </template>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">Cargar al servidor</el-button>
-  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>
+  <template #tip>
+    <div class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>
+  </template>
 </el-upload>
 <script>
  export default {
--- a/website/docs/fr-FR/upload.md
+++ b/website/docs/fr-FR/upload.md
@ -17,7 +17,9 @@ Permet d'uploader des fichiers en cliquant ou en les déplaçant sur le composan
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">Cliquer pour envoyer</el-button>
-  <div slot="tip" class="el-upload__tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>
+  <template #tip>
+    <div class="el-upload__tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>
+  </template>
 </el-upload>
 <script>
  export default {
@ -164,35 +166,36 @@ Use `scoped-slot` to change default thumbnail template.
  action="#"
  list-type="picture-card"
  :auto-upload="false">
-    <i slot="default" class="el-icon-plus"></i>
-    <div slot="file" slot-scope="{file}">
-      <img
-        class="el-upload-list__item-thumbnail"
-        :src="file.url" alt=""
-      >
-      <span class="el-upload-list__item-actions">
-        <span
-          class="el-upload-list__item-preview"
-          @click="handlePictureCardPreview(file)"
-        >
-          <i class="el-icon-zoom-in"></i>
+    <template #default>
+      <i class="el-icon-plus"></i>
+    </template>
+    <template #file="{file}">
+      <div>
+        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+        <span class="el-upload-list__item-actions">
+          <span
+            class="el-upload-list__item-preview"
+            @click="handlePictureCardPreview(file)"
+          >
+            <i class="el-icon-zoom-in"></i>
+          </span>
+          <span
+            v-if="!disabled"
+            class="el-upload-list__item-delete"
+            @click="handleDownload(file)"
+          >
+            <i class="el-icon-download"></i>
+          </span>
+          <span
+            v-if="!disabled"
+            class="el-upload-list__item-delete"
+            @click="handleRemove(file)"
+          >
+            <i class="el-icon-delete"></i>
+          </span>
        </span>
-        <span
-          v-if="!disabled"
-          class="el-upload-list__item-delete"
-          @click="handleDownload(file)"
-        >
-          <i class="el-icon-download"></i>
-        </span>
-        <span
-          v-if="!disabled"
-          class="el-upload-list__item-delete"
-          @click="handleRemove(file)"
-        >
-          <i class="el-icon-delete"></i>
-        </span>
-      </span>
-    </div>
+      </div>
+    </template>
 </el-upload>
 <el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
@ -235,7 +238,9 @@ Use `scoped-slot` to change default thumbnail template.
  :file-list="fileList"
  list-type="picture">
  <el-button size="small" type="primary">Cliquer pour envoyer</el-button>
-  <div slot="tip" class="el-upload__tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>
+  <template #tip>
+    <div class="el-upload__tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>
+  </template>
 </el-upload>
 <script>
  export default {
@ -269,7 +274,9 @@ Utilisez `on-change` pour contrôler le comportement de la liste de fichiers.
  :on-change="handleChange"
  :file-list="fileList">
  <el-button size="small" type="primary">Cliquer pour envoyer</el-button>
-  <div slot="tip" class="el-upload__tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>
+  <template #tip>
+    <div class="el-upload__tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>
+  </template>
 </el-upload>
 <script>
  export default {
@ -310,7 +317,9 @@ Vous pouvez déposer les fichiers par drag'n drop sur l'espace dédié.
  multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">Déposer les fichiers ici ou<em>cliquez pour envoyer</em></div>
-  <div class="el-upload__tip" slot="tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>
+  <template #tip>
+    <div class="el-upload__tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>
+  </template>
 </el-upload>
 ```
 :::
@ -324,9 +333,13 @@ Vous pouvez déposer les fichiers par drag'n drop sur l'espace dédié.
  ref="upload"
  action="https://jsonplaceholder.typicode.com/posts/"
  :auto-upload="false">
-  <el-button slot="trigger" size="small" type="primary">Choisir un fichier</el-button>
+  <template #trigger>
+    <el-button size="small" type="primary">Choisir un fichier</el-button>
+  </template>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">Envoyer au serveur</el-button>
-  <div class="el-upload__tip" slot="tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>
+  <template #tip>
+    <div class="el-upload__tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>
+  </template>
 </el-upload>
 <script>
  export default {
--- a/website/docs/zh-CN/upload.md
+++ b/website/docs/zh-CN/upload.md
@ -15,9 +15,12 @@
  multiple
  :limit="3"
  :on-exceed="handleExceed"
-  :file-list="fileList">
+  :file-list="fileList"
+>
  <el-button size="small" type="primary">点击上传</el-button>
-  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+  <template #tip>
+    <div class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div>
+  </template>
 </el-upload>
 <script>
  export default {
@ -56,7 +59,8 @@
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
-  :before-upload="beforeAvatarUpload">
+  :before-upload="beforeAvatarUpload"
+>
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
 </el-upload>
@ -164,35 +168,36 @@
  action="#"
  list-type="picture-card"
  :auto-upload="false">
-    <i slot="default" class="el-icon-plus"></i>
-    <div slot="file" slot-scope="{file}">
-      <img
-        class="el-upload-list__item-thumbnail"
-        :src="file.url" alt=""
-      >
-      <span class="el-upload-list__item-actions">
-        <span
-          class="el-upload-list__item-preview"
-          @click="handlePictureCardPreview(file)"
-        >
-          <i class="el-icon-zoom-in"></i>
+    <template #default>
+      <i class="el-icon-plus"></i>
+    </template>
+    <template #file="{file}">
+      <div>
+        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+        <span class="el-upload-list__item-actions">
+          <span
+            class="el-upload-list__item-preview"
+            @click="handlePictureCardPreview(file)"
+          >
+            <i class="el-icon-zoom-in"></i>
+          </span>
+          <span
+            v-if="!disabled"
+            class="el-upload-list__item-delete"
+            @click="handleDownload(file)"
+          >
+            <i class="el-icon-download"></i>
+          </span>
+          <span
+            v-if="!disabled"
+            class="el-upload-list__item-delete"
+            @click="handleRemove(file)"
+          >
+            <i class="el-icon-delete"></i>
+          </span>
        </span>
-        <span
-          v-if="!disabled"
-          class="el-upload-list__item-delete"
-          @click="handleDownload(file)"
-        >
-          <i class="el-icon-download"></i>
-        </span>
-        <span
-          v-if="!disabled"
-          class="el-upload-list__item-delete"
-          @click="handleRemove(file)"
-        >
-          <i class="el-icon-delete"></i>
-        </span>
-      </span>
-    </div>
+      </div>
+    </template>
 </el-upload>
 <el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
@ -235,7 +240,11 @@
  :file-list="fileList"
  list-type="picture">
  <el-button size="small" type="primary">点击上传</el-button>
-  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+  <template #tip>
+    <div class="el-upload__tip">
+      只能上传 jpg/png 文件，且不超过 500kb
+    </div>
+  </template>
 </el-upload>
 <script>
  export default {
@ -269,7 +278,11 @@
  :on-change="handleChange"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
-  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+  <template #tip>
+    <div class="el-upload__tip">
+      只能上传 jpg/png 文件，且不超过 500kb
+    </div>
+  </template>
 </el-upload>
 <script>
  export default {
@ -305,7 +318,11 @@
  multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
+  <template #tip>
+    <div class="el-upload__tip">
+      只能上传 jpg/png 文件，且不超过 500kb
+    </div>
+  </template>
 </el-upload>
 ```
 :::
@ -322,9 +339,15 @@
  :on-remove="handleRemove"
  :file-list="fileList"
  :auto-upload="false">
-  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
+  <template #trigger>
+    <el-button size="small" type="primary">选取文件</el-button>
+  </template>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
-  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+  <template #tip>
+    <div class="el-upload__tip">
+      只能上传 jpg/png 文件，且不超过 500kb
+    </div>
+  </template>
 </el-upload>
 <script>
  export default {