feat(refs): expose input/table/upload/select refs

Author: 0721Betty

packages/Input/src/input.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-input class="emqx-input">
+  <el-input ref="input" class="emqx-input">
     <template v-if="$slots.prepend" #prepend>
       <slot name="prepend"></slot>
     </template>
@@ -16,13 +16,19 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 import { ElInput } from 'element-plus'
 
 export default defineComponent({
   name: 'EmqxInput',
   components: {
     ElInput,
   },
+  setup() {
+    const input = ref()
+    return {
+      input,
+    }
+  },
 })
 </script>

packages/Select/src/select.vue

@@ -1,17 +1,23 @@
 <template>
-  <el-select class="emqx-select" ref="select">
+  <el-select ref="select" class="emqx-select">
     <slot></slot>
   </el-select>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 import { ElSelect } from 'element-plus'
 
 export default defineComponent({
   name: 'EmqxSelect',
   components: {
     ElSelect,
   },
+  setup() {
+    const select = ref()
+    return {
+      select,
+    }
+  },
 })
 </script>

packages/Table/src/table.vue

@@ -1,17 +1,23 @@
 <template>
-  <el-table class="emqx-table">
+  <el-table ref="table" class="emqx-table">
     <slot></slot>
   </el-table>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 import { ElTable } from 'element-plus'
 
 export default defineComponent({
   name: 'EmqxTable',
   components: {
     ElTable,
   },
+  setup() {
+    const table = ref()
+    return {
+      table,
+    }
+  },
 })
 </script>

packages/Upload/src/upload.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-upload class="emqx-upload">
+  <el-upload ref="upload" class="emqx-upload">
     <slot></slot>
     <template v-if="$slots.tip" #tip>
       <slot name="tip"></slot>
@@ -8,13 +8,19 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 import { ElUpload } from 'element-plus'
 
 export default defineComponent({
   name: 'EmqxUpload',
   components: {
     ElUpload,
   },
+  setup() {
+    const upload = ref()
+    return {
+      upload,
+    }
+  },
 })
 </script>