!39 upload组件第一次文档修正

Merge pull request !39 from geekreal/develop

example/docs/zh-CN/components/upload.md

@@ -13,19 +13,47 @@
 ::: demo 使用 `lay-upload` 标签, 创建一个按钮上传单文件
 
 <template>
-  <lay-upload @done="getUploadFile"/>
+  <lay-upload @done="getUploadFile" @choose="beginChoose">
+    <template #preview>
+      <div v-for="(item,index) in picList" :key="`demo1-pic-'${index}`">
+        <img :src="item"/>
+      </div>
+    </template>
+  </lay-upload>
 </template>
 
 <script>
-import { ref } from 'vue'
+import { ref,reactive } from 'vue'
 
 export default {
   setup() {
-    const getUploadFile = (file)=>{
+    const picList = ref([]);
-      console.log(file);
+    const filetoDataURL=(file,fn)=>{
+      const reader = new FileReader();
+      reader.onloadend = function(e){
+        fn(e.target.result);
+      };
+      reader.readAsDataURL(file);
+    };
+    const getUploadFile=(files)=>{
+      if(Array.isArray(files)&&files.length>0){
+        files.forEach((file,index,array)=>{
+          filetoDataURL(file,(res)=>{
+            console.log(res);
+            picList.value.push(res);
+            console.log(picList.value);
+          });
+        });
+      }
+    };
+    const beginChoose =(e)=>{
+      console.log("beginChoose",e);
     };
     return {
-      getUploadFile
+      getUploadFile,
+      filetoDataURL,
+      beginChoose,
+      picList
     }
   }
 }
@@ -84,7 +112,7 @@ export default {
 ::: demo 使用 `lay-upload` 标签, 使用 `#preview` 自定义预览的UI交互
 
 <template>
-  <lay-upload @done="getUploadFile">
+  <lay-upload @done="getUploadFile2">
     <template #preview>
       <div class="easy-wrap">
         <img src="https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg" style="width:62.9px;height:63.2px"/>
@@ -101,11 +129,11 @@ export default {
 import { ref } from 'vue'
 export default {
   setup() {
-    const getUploadFile = (file)=>{
+    const getUploadFile2 = (file)=>{
       console.log(file);
     };
     return {
-      getUploadFile
+      getUploadFile2
     }
   }
 }

src/component/table/index.vue

@@ -93,16 +93,16 @@ const change = function (page: any) {
   emit("change", page);
 };
 
-const rowClick = function (data: any,evt:MouseEvent) {
+const rowClick = function (data: any, evt: MouseEvent) {
-  emit("row", data,evt);
+  emit("row", data, evt);
 };
 
-const rowDoubleClick = function (data: any,evt:MouseEvent) {
+const rowDoubleClick = function (data: any, evt: MouseEvent) {
-  emit("row-double", data,evt);
+  emit("row-double", data, evt);
 };
 
-const contextmenu = function (data: any,evt:MouseEvent) {
+const contextmenu = function (data: any, evt: MouseEvent) {
-  emit("contextmenu", data,evt);
+  emit("contextmenu", data, evt);
 };
 
 // 打印 table 数据
@@ -292,9 +292,9 @@ onMounted(() => {
             <tbody>
               <template v-for="data in tableDataSource" :key="data">
                 <tr
-                  @click.stop="rowClick(data,$event)"
+                  @click.stop="rowClick(data, $event)"
-                  @dblclick.stop="rowDoubleClick(data,$event)"
+                  @dblclick.stop="rowDoubleClick(data, $event)"
-                  @contextmenu.stop="contextmenu(data,$event)"
+                  @contextmenu.stop="contextmenu(data, $event)"
                 >
                   <!-- 复选框 -->
                   <td v-if="checkbox" class="layui-table-col-special">

src/component/upload/index.vue

@@ -180,7 +180,6 @@ const getUploadChange = (e: any) => {
   }
 };
 const chooseFile = () => {
-  console.log(orgFileInput.value);
   let _target = orgFileInput.value;
   if (_target) {
     _target.click();