fix: the official website example thumbnail does not display problem

hug-sun · Nov 19, 2020 · a6318c1 · a6318c1
1 parent 6b15e72
commit a6318c1
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git a/examples/docs/zh-CN/upload.md b/examples/docs/zh-CN/upload.md
@@ -143,23 +143,22 @@
   :on-remove="handleRemove">
   <i class="el-icon-plus"></i>
 </el-upload>
-<el-dialog :visible.sync="dialogVisible">
-  <img width="100%" :src="dialogImageUrl" alt="">
+<el-dialog :visible.sync="dialogVisible" v-model:visible="dialogVisible">
+  <img :src="dialogImageUrl" alt="" style="width: 100%;">
 </el-dialog>
 <script>
-  import { ref , getCurrentInstance } from 'vue';
+  import { ref, unref } from 'vue';
   export default {
     setup(){
       const dialogImageUrl = ref('');
       const dialogVisible = ref(false);
 
-      const self = getCurrentInstance().ctx;
       const handleRemove = (file, fileList) => {
         console.log(file, fileList);
       }
       const handlePictureCardPreview = (file) => {
-        self.dialogImageUrl = file.url;
-        self.dialogVisible = true;
+        dialogImageUrl.value = unref(file).url;
+        dialogVisible.value = true;
       }
 
       return {

diff --git a/packages/upload/src/index.vue b/packages/upload/src/index.vue
@@ -339,7 +339,7 @@ export default {
         raw: rawFile
       }
 
-      if (listType === 'picture-card' || listType === 'picture') {
+      if (unref(listType) === 'picture-card' || unref(listType) === 'picture') {
         try {
           file.url = URL.createObjectURL(rawFile)
         } catch (err) {