docs(select): composition api (#1108)

src/select/demos/enUS/remote-multiple.demo.md

@@ -17,6 +17,8 @@ Async example for multiple select.
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
+
 const options = [
   {
     label: 'Drive My Car',
@@ -68,24 +70,29 @@ const options = [
   }
 ]
 
-export default {
-  data () {
+export default defineComponent({
+  setup () {
+    const loadingRef = ref(false)
+    const optionsRef = ref([])
+
     return {
-      selectedValues: null,
-      loading: false,
-      options: [],
+      selectedValues: ref(null),
+      loading: loadingRef,
+      options: optionsRef,
       handleSearch: (query) => {
         if (!query.length) {
-          this.options = []
+          optionsRef.value = []
           return
         }
-        this.loading = true
+        loadingRef.value = true
         window.setTimeout(() => {
-          this.options = options.filter((item) => ~item.label.indexOf(query))
-          this.loading = false
+          optionsRef.value = options.filter(
+            (item) => ~item.label.indexOf(query)
+          )
+          loadingRef.value = false
         }, 1000)
       }
     }
   }
-}
+})
 ```

src/select/demos/enUS/remote.demo.md

@@ -16,6 +16,8 @@ Async example for single select.
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
+
 const options = [
   {
     label: 'Drive My Car',
@@ -67,24 +69,29 @@ const options = [
   }
 ]
 
-export default {
-  data () {
+export default defineComponent({
+  setup () {
+    const loadingRef = ref(false)
+    const optionsRef = ref([])
+
     return {
-      value: null,
-      loading: false,
-      options: [],
+      value: ref(null),
+      loading: loadingRef,
+      options: optionsRef,
       handleSearch: (query) => {
         if (!query.length) {
-          this.options = []
+          optionsRef.value = []
           return
         }
-        this.loading = true
+        loadingRef.value = true
         window.setTimeout(() => {
-          this.options = options.filter((item) => ~item.label.indexOf(query))
-          this.loading = false
+          optionsRef.value = options.filter(
+            (item) => ~item.label.indexOf(query)
+          )
+          loadingRef.value = false
         }, 1000)
       }
     }
   }
-}
+})
 ```

src/select/demos/enUS/scroll-event.demo.md

@@ -16,14 +16,19 @@ My colleague said he want use scroll status to async load options.
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    const scrollContentHeightRef = ref(null)
+    const scrollContainerHeightRef = ref(null)
+    const scrollContainerScrollTopRef = ref(null)
+
     return {
-      value: null,
-      array: null,
-      scrollContentHeight: null,
-      scrollContainerHeight: null,
-      scrollContainerScrollTop: null,
+      value: ref(null),
+      scrollContentHeight: scrollContentHeightRef,
+      scrollContainerHeight: scrollContainerHeightRef,
+      scrollContainerScrollTop: scrollContainerScrollTopRef,
       options: [
         {
           label: 'Drive My Car',
@@ -73,15 +78,13 @@ export default {
           label: 'Wait',
           value: 'song12'
         }
-      ]
-    }
-  },
-  methods: {
-    handleScroll (e) {
-      this.scrollContentHeight = e.target.firstElementChild.offsetHeight
-      this.scrollContainerScrollTop = e.target.scrollTop
-      this.scrollContainerHeight = e.target.offsetHeight
+      ],
+      handleScroll (e) {
+        scrollContentHeightRef.value = e.target.firstElementChild.offsetHeight
+        scrollContainerScrollTopRef.value = e.target.scrollTop
+        scrollContainerHeightRef.value = e.target.offsetHeight
+      }
     }
   }
-}
+})
 ```

src/select/demos/zhCN/remote-multiple.demo.md

@@ -17,6 +17,8 @@
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
+
 const options = [
   {
     label: 'Drive My Car',
@@ -68,24 +70,29 @@ const options = [
   }
 ]
 
-export default {
-  data () {
+export default defineComponent({
+  setup () {
+    const loadingRef = ref(false)
+    const optionsRef = ref([])
+
     return {
-      selectedValues: null,
-      loading: false,
-      options: [],
+      selectedValues: ref(null),
+      loading: loadingRef,
+      options: optionsRef,
       handleSearch: (query) => {
         if (!query.length) {
-          this.options = []
+          optionsRef.value = []
           return
         }
-        this.loading = true
+        loadingRef.value = true
         window.setTimeout(() => {
-          this.options = options.filter((item) => ~item.label.indexOf(query))
-          this.loading = false
+          optionsRef.value = options.filter(
+            (item) => ~item.label.indexOf(query)
+          )
+          loadingRef.value = false
         }, 1000)
       }
     }
   }
-}
+})
 ```

src/select/demos/zhCN/remote.demo.md

@@ -16,6 +16,8 @@
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
+
 const options = [
   {
     label: 'Drive My Car',
@@ -67,24 +69,29 @@ const options = [
   }
 ]
 
-export default {
-  data () {
+export default defineComponent({
+  setup () {
+    const loadingRef = ref(false)
+    const optionsRef = ref([])
+
     return {
-      value: null,
-      loading: false,
-      options: [],
+      value: ref(null),
+      loading: loadingRef,
+      options: optionsRef,
       handleSearch: (query) => {
         if (!query.length) {
-          this.options = []
+          optionsRef.value = []
           return
         }
-        this.loading = true
+        loadingRef.value = true
         window.setTimeout(() => {
-          this.options = options.filter((item) => ~item.label.indexOf(query))
-          this.loading = false
+          optionsRef.value = options.filter(
+            (item) => ~item.label.indexOf(query)
+          )
+          loadingRef.value = false
         }, 1000)
       }
     }
   }
-}
+})
 ```

src/select/demos/zhCN/scroll-event.demo.md

@@ -16,14 +16,19 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    const scrollContentHeightRef = ref(null)
+    const scrollContainerHeightRef = ref(null)
+    const scrollContainerScrollTopRef = ref(null)
+
     return {
-      value: null,
-      array: null,
-      scrollContentHeight: null,
-      scrollContainerHeight: null,
-      scrollContainerScrollTop: null,
+      value: ref(null),
+      scrollContentHeight: scrollContentHeightRef,
+      scrollContainerHeight: scrollContainerHeightRef,
+      scrollContainerScrollTop: scrollContainerScrollTopRef,
       options: [
         {
           label: 'Drive My Car',
@@ -73,15 +78,13 @@ export default {
           label: 'Wait',
           value: 'song12'
         }
-      ]
-    }
-  },
-  methods: {
-    handleScroll (e) {
-      this.scrollContentHeight = e.target.firstElementChild.offsetHeight
-      this.scrollContainerScrollTop = e.target.scrollTop
-      this.scrollContainerHeight = e.target.offsetHeight
+      ],
+      handleScroll (e) {
+        scrollContentHeightRef.value = e.target.firstElementChild.offsetHeight
+        scrollContainerScrollTopRef.value = e.target.scrollTop
+        scrollContainerHeightRef.value = e.target.offsetHeight
+      }
     }
   }
-}
+})
 ```