build v3.3.0

nmxiaowei · Jan 2, 2024 · 1f66e8c · 1f66e8c
1 parent a0b7a53
commit 1f66e8c
Show file tree

Hide file tree

Showing 16 changed files with 426 additions and 52 deletions.
diff --git a/examples/element-ui/crud/upload.html b/examples/element-ui/crud/upload.html
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+
+<html class="no-js">
+
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <title></title>
+  <meta name="description" content="" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <script src="https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.js"></script>
+  <script src="../../cdn/vue/vue.global.min.js"></script>
+  <link rel="stylesheet" href="../../cdn/element-plus/index.css" />
+  <script src="../../cdn/element-plus/index.full.min.js"></script>
+  <script src="http://qtestbucket.qiniudn.com/demo/CryptoJS.js"></script>
+
+  <link rel="stylesheet" href="../../../lib/index.css" />
+  <script src="../../../lib/avue.js"></script>
+</head>
+
+<body>
+  <div id="app">
+    {{form}}
+    <avue-crud :option="option" :data="data" :upload-error="uploadError" :upload-delete="uploadDelete"
+      :upload-before="uploadBefore" :upload-exceed="uploadExceed" :upload-after="uploadAfter">
+      <template #imgUrl-type="{file}">
+        <span>自定义模板{{file}}</span>
+      </template>
+    </avue-crud>
+  </div>
+</body>
+<script>
+  var app = Vue.createApp({
+    data() {
+      return {
+        data: [{
+          imgUrl: [{ "label": "video", "value": "https://www.w3school.com.cn/i/movie.ogg" }, { "label": "avue@226d5c1a_logo.png", "value": "https://avuejs.com/images/logo-bg.jpg" }],
+          imgUrl3: 'https://www.w3school.com.cn/i/movie.ogg',
+          string: 'https://avuejs.com/images/logo-bg.jpg,/images/logo-bg.jpg',
+          img: ['https://www.w3school.com.cn/i/movie.ogg', 'https://avuejs.com/images/logo-bg.jpg']
+        }],
+        option: {
+          labelWidth: 120,
+          viewBtn: true,
+          column: [{
+            label: '文本框',
+            prop: 'text'
+          },
+          {
+            label: '附件上传',
+            prop: 'imgUrl',
+            type: 'upload',
+            loadText: '附件上传中，请稍等',
+            fileText: '上传自定义',
+            span: 24,
+            accept: [],
+            propsHttp: {
+              res: 'data.0'
+            },
+            headers: {
+              'Test': "test",
+            },
+            tip: '只能上传jpg/png文件，且不超过500kb',
+            action: 'https://avueupload.91eic.com/upload/list'
+          },
+          {
+            label: '水印头像',
+            prop: 'imgUrl3',
+            type: 'upload',
+            listType: 'picture-img',
+            span: 24,
+            propsHttp: {
+              res: 'data'
+            },
+            canvasOption: {
+              text: 'avue',
+              ratio: 0.1
+            },
+            tip: '只能上传jpg/png用户头像，且不超过500kb',
+            action: 'https://avuejs.com/imgupload'
+          },
+          {
+            label: '照片墙',
+            prop: 'imgUrl',
+            type: 'upload',
+            span: 24,
+            listType: 'picture-card',
+            tip: '只能上传jpg/png文件，且不超过500kb',
+            propsHttp: {
+              res: 'data'
+            },
+            action: 'https://avuejs.com/imgupload'
+          },
+          {
+            label: '数组图片组',
+            prop: 'img',
+            dataType: 'array',
+            type: 'upload',
+            propsHttp: {
+              res: 'data'
+            },
+            span: 24,
+            listType: 'picture-card',
+            tip: '只能上传jpg/png文件，且不超过500kb',
+            action: 'https://avuejs.com/imgupload'
+          },
+          {
+            label: '字符串图片组',
+            prop: 'string',
+            type: 'upload',
+            propsHttp: {
+              res: 'data.0'
+            },
+            span: 24,
+            listType: 'picture-card',
+            tip: '只能上传jpg/png文件，且不超过500kb',
+            action: 'https://avueupload.91eic.com/upload/list'
+          },
+          {
+            label: '拖拽上传',
+            prop: 'imgUrl',
+            type: 'upload',
+            span: 24,
+            propsHttp: {
+              res: 'data.0'
+            },
+            tip: '只能上传jpg/png文件，且不超过500kb',
+            action: 'https://avueupload.91eic.com/upload/list'
+          },
+          {
+            label: '缩略图上传',
+            prop: 'imgUrl',
+            type: 'upload',
+            limit: 3,
+            span: 24,
+            propsHttp: {
+              res: 'data.0'
+            },
+            listType: 'picture',
+            tip: '只能上传jpg/png文件，且不超过500kb',
+            action: 'https://avueupload.91eic.com/upload/list'
+          }
+          ]
+        }
+      }
+    },
+    methods: {
+      uploadDelete(file, column) {
+        console.log(file, column)
+        return this.$confirm(`这里是自定义的，是否确定移除该选项？`);
+      },
+      uploadExceed(limit, files, fileList, column) {
+        console.log(limit, files, fileList, column)
+        this.$message.success('达到文件限制了' + limit)
+      },
+      uploadBefore(file, done, loading, column) {
+        console.log(file, column)
+        done()
+        this.$message.success('上传前的方法')
+      },
+      uploadError(error, column) {
+        this.$message.success('上传失败')
+        console.log(error, column)
+      },
+      uploadAfter(res, done, loading, column) {
+        console.log(res, column)
+        done()
+        this.$message.success('上传后的方法')
+      },
+      submit() {
+        this.$message.success('当前数据' + JSON.stringify(this.form))
+      }
+    }
+  })
+  app.use(ElementPlus)
+  app.use(AVUE)
+  app.mount('#app')
+</script>
+
+</html>
diff --git a/examples/element-ui/form/cos.html b/examples/element-ui/form/cos.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+
+<html class="no-js">
+
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <title></title>
+  <meta name="description" content="" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <script src="https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.js"></script>
+  <script src="../../cdn/vue/vue.global.min.js"></script>
+  <link rel="stylesheet" href="../../cdn/element-plus/index.css" />
+  <script src="../../cdn/element-plus/index.full.min.js"></script>
+  <script src="http://avuejs.com/cdn/cos-js-sdk-v5.min.js"></script>
+  <link rel="stylesheet" href="../../../lib/index.css" />
+  <script src="../../../lib/avue.js"></script>
+</head>
+
+<body>
+  <div id="app">
+    <avue-form :option="option" v-model="form" :upload-preview="uploadPreview" :upload-delete="uploadDelete"
+      :upload-before="uploadBefore" :upload-after="uploadAfter"> </avue-form>
+  </div>
+</body>
+<script></script>
+<script>
+  var app = Vue.createApp({
+    data() {
+      return {
+        form: {},
+        option: {
+          labelWidth: 120,
+          column: [
+            {
+              label: '附件上传',
+              prop: 'imgUrl',
+              type: 'upload',
+              listType: 'picture-img',
+              canvasOption: {
+                text: 'avue',
+                ratio: 0.1
+              },
+              oss: 'cos',
+              loadText: '附件上传中，请稍等',
+              span: 24,
+              tip: '只能上传jpg/png文件，且不超过500kb',
+            }
+          ]
+        }
+      }
+    },
+    methods: {
+      uploadPreview(file, column) {
+        console.log(file, column)
+        this.$message.success('自定义查看方法')
+      },
+      uploadDelete(column) {
+        console.log(column)
+        return this.$confirm(`这里是自定义的，是否确定移除该选项？`);
+      },
+      uploadBefore(file, done, loading, column) {
+        // console.log(file, column)
+        var newFile = new File([file], '1234', { type: file.type });
+        done(newFile)
+        this.$message.success('上传前的方法')
+      },
+      uploadAfter(res, done, loading, column) {
+        console.log(res, column)
+        done()
+        this.$message.success('上传后的方法')
+      },
+    }
+  })
+  app.use(ElementPlus)
+  app.use(AVUE, {
+    cos: {
+      SecretId: 'AKIDBWuODM6o1YP8duwjHeostpiaQCwcHsU4',
+      SecretKey: 'jTG71yusmcVRNH7pSdr6Mk5Pi2Nk7XuH',
+      Bucket: 'avue-1253807724',
+      Region: 'ap-beijing'
+    }
+  });
+  app.mount('#app')
+</script>
+
+</html>
diff --git a/examples/element-ui/form/table.html b/examples/element-ui/form/table.html
@@ -28,14 +28,15 @@
     data() {
       return {
         obj: {
-          table: '0',
+          table: [0, 2]
         },
         option: {
           column: [
             {
               label: '表格',
               prop: 'table',
               type: 'table',
+              multiple: true,
               children: {
                 border: true,
                 column: [{
@@ -49,20 +50,25 @@
                 }],
               },
               formatter: (row) => {
-                if (!row.name) {
-                  return ''
+                if (Array.isArray(row)) {
+                  return row.map(ele => ele.name + '格式化').join(',')
+                } else {
+                  return row.name + '格式化'
                 }
-                return row.name + '-' + row.sex
               },
               onLoad: ({ page, value, data }, callback) => {
                 console.log(data);
                 setTimeout(() => {
                   if (value) {
-                    callback({
+                    callback([{
                       id: '0',
                       name: '张三',
                       sex: '男'
-                    })
+                    }, {
+                      id: '2',
+                      name: '王五',
+                      sex: '女'
+                    }])
                     return
                   }
                   callback({
@@ -74,6 +80,11 @@
                     }, {
                       id: '1',
                       name: '李四',
+                      disabled: true,
+                      sex: '女'
+                    }, {
+                      id: '2',
+                      name: '王五',
                       sex: '女'
                     }]
                   })