fix: update some From components

hug-sun · Nov 16, 2020 · 363a37d · 363a37d
1 parent 0f99051
commit 363a37d
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 96 deletions.
diff --git a/examples/docs/zh-CN/upload.md b/examples/docs/zh-CN/upload.md
@@ -22,24 +22,32 @@
   </template>
 </el-upload>
 <script>
+  import { reactive , toRefs , getCurrentInstance } from 'vue';
   export default {
-    data() {
-      return {
+    setup(){
+      let state = reactive({
         fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
-      };
-    },
-    methods: {
-      handleRemove(file, fileList) {
+      });
+      const self = getCurrentInstance().ctx;
+      const handleRemove = (file, fileList) => {
         console.log(file, fileList);
-      },
-      handlePreview(file) {
+      }
+      const handlePreview = (file) => {
         console.log(file);
-      },
-      handleExceed(files, fileList) {
-        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
-      },
-      beforeRemove(file, fileList) {
-        // return this.$confirm(`确定移除 ${ file.name }？`);
+      }
+      const handleExceed = (files, fileList) => {
+        self.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+      }
+      const beforeRemove = (file, fileList) => {
+        // return self.$confirm(`确定移除 ${ file.name }？`);
+      }
+
+      return {
+        ...toRefs(state),
+        handleRemove,
+        handlePreview,
+        handleExceed,
+        beforeRemove
       }
     }
   }
@@ -90,28 +98,33 @@
 </style>
 
 <script>
+  import { ref , getCurrentInstance } from 'vue';
   export default {
-    data() {
-      return {
-        imageUrl: ''
-      };
-    },
-    methods: {
-      handleAvatarSuccess(res, file) {
-        this.imageUrl = URL.createObjectURL(file.raw);
-      },
-      beforeAvatarUpload(file) {
+    setup(){
+      const imageUrl = ref('');
+
+      const self = getCurrentInstance().ctx;
+      const handleAvatarSuccess = (res, file) => {
+        self.imageUrl = URL.createObjectURL(file.raw);
+      }
+      const beforeAvatarUpload = (file) => {
         const isJPG = file.type === 'image/jpeg';
         const isLt2M = file.size / 1024 / 1024 < 2;
 
         if (!isJPG) {
-          this.$message.error('上传头像图片只能是 JPG 格式!');
+          self.$message.error('上传头像图片只能是 JPG 格式!');
         }
         if (!isLt2M) {
-          this.$message.error('上传头像图片大小不能超过 2MB!');
+          self.$message.error('上传头像图片大小不能超过 2MB!');
         }
         return isJPG && isLt2M;
       }
+
+      return {
+        imageUrl,
+        handleAvatarSuccess,
+        beforeAvatarUpload
+      }
     }
   }
 </script>
@@ -135,20 +148,26 @@
   <img width="100%" :src="dialogImageUrl" alt="">
 </el-dialog>
 <script>
+  import { ref , getCurrentInstance } from 'vue';
   export default {
-    data() {
-      return {
-        dialogImageUrl: '',
-        dialogVisible: false
-      };
-    },
-    methods: {
-      handleRemove(file, fileList) {
+    setup(){
+      const dialogImageUrl = ref('');
+      const dialogVisible = ref(false);
+
+      const self = getCurrentInstance().ctx;
+      const handleRemove = (file, fileList) => {
         console.log(file, fileList);
-      },
-      handlePictureCardPreview(file) {
-        this.dialogImageUrl = file.url;
-        this.dialogVisible = true;
+      }
+      const handlePictureCardPreview = (file) => {
+        self.dialogImageUrl = file.url;
+        self.dialogVisible = true;
+      }
+
+      return {
+        dialogImageUrl,
+        dialogVisible,
+        handleRemove,
+        handlePictureCardPreview
       }
     }
   }
@@ -203,25 +222,33 @@
   <img width="100%" :src="dialogImageUrl" alt="">
 </el-dialog>
 <script>
+  import { ref , getCurrentInstance } from 'vue';
   export default {
-    data() {
-      return {
-        dialogImageUrl: '',
-        dialogVisible: false,
-        disabled: false
-      };
-    },
-    methods: {
-      handleRemove(file) {
+    setup(){
+      const dialogImageUrl = ref('');
+      const dialogVisible = ref(false);
+      const disables = ref(false);
+
+      const self = getCurrentInstance().ctx;
+      const handleRemove = (file) => {
         console.log(file);
-      },
-      handlePictureCardPreview(file) {
-        this.dialogImageUrl = file.url;
-        this.dialogVisible = true;
-      },
-      handleDownload(file) {
+      }
+      const handlePictureCardPreview = (file) => {
+        self.dialogImageUrl = file.url;
+        self.dialogVisible = true;
+      }
+      const handleDownload = (file) => {
         console.log(file);
       }
+
+      return {
+        dialogImageUrl,
+        dialogVisible,
+        disables,
+        handleRemove,
+        handlePictureCardPreview,
+        handleDownload
+      }
     }
   }
 </script>
@@ -245,19 +272,24 @@
   </template>
 </el-upload>
 <script>
+  import { reactive , toRefs } from 'vue';
   export default {
-    data() {
-      return {
+    setup(){
+      const state = reactive({
         fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
-      };
-    },
-    methods: {
-      handleRemove(file, fileList) {
+      })
+      const handleRemove = (file, fileList) => {
         console.log(file, fileList);
-      },
-      handlePreview(file) {
+      }
+      const handlePreview = (file) => {
         console.log(file);
       }
+
+      return {
+        ...toRefs(state),
+        handleRemove,
+        handlePreview
+      }
     }
   }
 </script>
@@ -281,21 +313,27 @@
   </template>
 </el-upload>
 <script>
+  import { reactive , toRefs , getCurrentInstance } from 'vue';
   export default {
-    data() {
-      return {
+    setup(){
+      const state = reactive({
         fileList: [{
           name: 'food.jpeg',
           url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
         }, {
           name: 'food2.jpeg',
           url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
         }]
-      };
-    },
-    methods: {
-      handleChange(file, fileList) {
-        this.fileList = fileList.slice(-3);
+      })
+
+      const self = getCurrentInstance().ctx;
+      const handleChange = (file, fileList) => {
+        self.fileList = fileList.slice(-3);
+      }
+
+      return {
+        ...toRefs(state),
+        handleChange
       }
     }
   }
@@ -340,22 +378,30 @@
   </template>
 </el-upload>
 <script>
+  import { reactive , toRefs , getCurrentInstance} from 'vue';
   export default {
-    data() {
-      return {
+    setup(){
+      const state = reactive({
         fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
-      };
-    },
-    methods: {
-      submitUpload() {
-        this.$refs.upload.submit();
-      },
-      handleRemove(file, fileList) {
+      })
+
+      const self = getCurrentInstance().ctx;
+      const submitUpload = () => {
+        self.$refs.upload.submit();
+      }
+      const handleRemove = (file, fileList) => {
         console.log(file, fileList);
-      },
-      handlePreview(file) {
+      }
+      const handlePreview = (file) => {
         console.log(file);
       }
+
+      return {
+        ...toRefs(state),
+        submitUpload,
+        handleRemove,
+        handlePreview
+      }
     }
   }
 </script>

diff --git a/examples/versions.json b/examples/versions.json
@@ -1 +1 @@
-{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","0.0.24":"2.13"}
+{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","0.0.25":"2.13"}
diff --git a/types/element3.d.ts b/types/element3.d.ts
@@ -58,7 +58,6 @@ import { ElForm } from './form'
 import { ElFormItem } from './form-item'
 
 import { ElInput } from './input'
-import { ElInputNumber } from './input-number'
 import { ElLoading } from './loading'
 import { ElMenu } from './menu'
 import { ElMenuItem } from './menu-item'
@@ -129,9 +128,6 @@ export class Collapse extends ElCollapse {}
 /** Collapse Item Component */
 export class CollapseItem extends ElCollapseItem {}
 
-/** Color Picker Component */
-export class ColorPicker extends ElColorPicker {}
-
 /** Date Picker Component */
 export class DatePicker extends ElDatePicker {}
 
@@ -156,9 +152,6 @@ export class FormItem extends ElFormItem {}
 /** Input Component */
 export class Input extends ElInput {}
 
-/** Input Number Component */
-export class InputNumber extends ElInputNumber {}
-
 /** Menu that provides navigation for your website */
 export class Menu extends ElMenu {}
 
@@ -177,12 +170,6 @@ export class OptionGroup extends ElOptionGroup {}
 /** Popover Component */
 export class Popover extends ElPopover {}
 
-/** Rate Component */
-export class Rate extends ElRate {}
-
-/** Slider Component */
-export class Slider extends ElSlider {}
-
 /** Step Component */
 export class Step extends ElStep {}
 
@@ -216,9 +203,6 @@ export class TimeSelect extends ElTimeSelect {}
 /** Tooltip Component */
 export class Tooltip extends ElTooltip {}
 
-/** Transfer Component */
-export class Transfer extends ElTransfer {}
-
 /** Tree Component */
 export class Tree<K = any, D = TreeData> extends ElTree<K, D> {}