refactor(example): replace ref to reactive

varletjs · Apr 19, 2021 · 285704c · 285704c
1 parent 9ae7ac7
commit 285704c
Show file tree

Hide file tree

Showing 22 changed files with 248 additions and 361 deletions.
diff --git a/packages/varlet-ui/src/checkbox-group/example/index.vue b/packages/varlet-ui/src/checkbox-group/example/index.vue
@@ -59,7 +59,7 @@ import Icon from '../../icon'
 import Button from '../../button'
 import Row from '../../row'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
-import { ref } from 'vue'
+import { reactive, toRefs } from 'vue'
 import { watchLang } from '../../utils/components'
 import { use, pack } from './locale'
 
@@ -74,29 +74,23 @@ export default {
     AppType,
   },
   setup() {
-    const value = ref(false)
-    const value2 = ref(0)
-    const value3 = ref(false)
-    const value4 = ref(false)
-    const value5 = ref(false)
-    const value6 = ref([])
-    const group = ref(null)
-    const value7 = ref(false)
-    const value8 = ref([])
+    const values = reactive({
+      value: false,
+      value2: 0,
+      value3: false,
+      value4: false,
+      value5: false,
+      value6: [],
+      value7: false,
+      value8: [],
+      group: null
+    })
 
     watchLang(use)
 
     return {
       pack,
-      value,
-      value2,
-      value3,
-      value4,
-      value5,
-      value6,
-      group,
-      value7,
-      value8,
+      ...toRefs(values)
     }
   },
 }

diff --git a/packages/varlet-ui/src/collapse/example/index.vue b/packages/varlet-ui/src/collapse/example/index.vue
@@ -50,7 +50,7 @@
 </template>
 
 <script>
-import { defineComponent, ref } from 'vue'
+import { defineComponent, reactive, toRefs } from 'vue'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import Collapse from '..'
 import CollapseItem from '../../collapse-item'
@@ -67,12 +67,14 @@ export default defineComponent({
     AppType,
   },
   setup() {
-    const disabled = ref(false)
-    const value = ref(['1'])
-    const value1 = ref('')
-    const value2 = ref([1])
-    const value3 = ref(['1'])
-    const value4 = ref(['2'])
+    const values = reactive({
+      disabled: false,
+      value: ['1'],
+      value1: '',
+      value2: [1],
+      value3: ['1'],
+      value4: ['2'],
+    })
 
     const changeHandle = (val) => {
       console.log(val)
@@ -81,12 +83,7 @@ export default defineComponent({
     watchLang(use)
 
     return {
-      disabled,
-      value,
-      value1,
-      value2,
-      value3,
-      value4,
+      ...toRefs(values),
       pack,
       changeHandle,
     }

diff --git a/packages/varlet-ui/src/counter/example/index.vue b/packages/varlet-ui/src/counter/example/index.vue
@@ -32,7 +32,7 @@
 <script>
 import Counter from '..'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
-import { ref } from 'vue'
+import { reactive, toRefs } from 'vue'
 import { watchLang } from '../../utils/components'
 import { use, pack } from './locale'
 
@@ -43,15 +43,17 @@ export default {
     AppType,
   },
   setup() {
-    const value = ref(0)
-    const value2 = ref(0)
-    const value3 = ref(0)
-    const value4 = ref(0)
-    const value5 = ref(0)
-    const value6 = ref(0)
-    const value7 = ref(0)
-    const value8 = ref(0)
-    const value9 = ref(0)
+    const values = reactive({
+      value: 0,
+      value2: 0,
+      value3: 0,
+      value4: 0,
+      value5: 0,
+      value6: 0,
+      value7: 0,
+      value8: 0,
+      value9: 0,
+    })
 
     const handleBeforeChange = (value, change) => {
       setTimeout(() => {
@@ -63,15 +65,7 @@ export default {
 
     return {
       pack,
-      value,
-      value2,
-      value3,
-      value4,
-      value5,
-      value6,
-      value7,
-      value8,
-      value9,
+      ...toRefs(values),
       handleBeforeChange,
     }
   },

diff --git a/packages/varlet-ui/src/date-picker/example/index.vue b/packages/varlet-ui/src/date-picker/example/index.vue
@@ -44,7 +44,7 @@
 </template>
 
 <script>
-import { defineComponent, ref } from 'vue'
+import { defineComponent, reactive, toRefs } from 'vue'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import DatePicker from '..'
 import { pack, use } from './locale'
@@ -57,12 +57,15 @@ export default defineComponent({
     [DatePicker.name]: DatePicker,
   },
   setup() {
-    const date = ref('2021-01')
-    const date1 = ref('2021-04-08')
-    const date2 = ref(['', ''])
-    const date3 = ref(['2021-02-01', '2021-02-15'])
-    const date4 = ref('2020-11-11')
-    const date5 = ref('2021-02')
+    const dates = reactive({
+      date: '2021-01',
+      date1: '2021-04-08',
+      date2: ['', ''],
+      date3: ['2021-02-01', '2021-02-15'],
+      date4: '2020-11-11',
+      date5: '2021-02',
+    })
+
     const allowedDates = (val) => {
       return parseInt(val.split('-')[1], 10) % 2 === 1
     }
@@ -76,13 +79,8 @@ export default defineComponent({
     watchLang(use)
 
     return {
+      ...toRefs(dates),
       pack,
-      date,
-      date1,
-      date2,
-      date3,
-      date4,
-      date5,
       change,
       allowedDates,
       allowedDates1,

diff --git a/packages/varlet-ui/src/dialog/example/index.vue b/packages/varlet-ui/src/dialog/example/index.vue
@@ -39,7 +39,7 @@ import Icon from '../../icon'
 import Snackbar from '../../snackbar'
 import Cell from '../../cell'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
-import { ref } from 'vue'
+import { reactive, toRefs } from 'vue'
 import { pack, use } from './locale'
 import { watchLang } from '../../utils/components'
 
@@ -53,10 +53,12 @@ export default {
     AppType,
   },
   setup() {
-    const show = ref(false)
-    const show1 = ref(false)
-    const show2 = ref(false)
-    const value = ref('')
+    const values = reactive({
+      show: false,
+      show1: false,
+      show2: false,
+      value: ''
+    })
 
     const actions = {
       confirm: () => Snackbar.success('confirm'),
@@ -106,10 +108,7 @@ export default {
 
     return {
       pack,
-      show,
-      show1,
-      show2,
-      value,
+      ...toRefs(values),
       asyncClose,
       createBasic,
       createAction,

diff --git a/packages/varlet-ui/src/form-details/example/index.vue b/packages/varlet-ui/src/form-details/example/index.vue
@@ -13,9 +13,3 @@ export default defineComponent({
   },
 })
 </script>
-
-<style scoped>
-.example {
-	background: antiquewhite;
-}
-</style>
diff --git a/packages/varlet-ui/src/input/example/index.vue b/packages/varlet-ui/src/input/example/index.vue
@@ -41,7 +41,7 @@ import Input from '..'
 import Button from '../../button'
 import Icon from '../../icon'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
-import { ref } from 'vue'
+import { reactive, toRefs } from 'vue'
 import { use, pack } from './locale'
 import { watchLang } from '../../utils/components'
 
@@ -54,32 +54,26 @@ export default {
     AppType,
   },
   setup() {
-    const value = ref('')
-    const value2 = ref('')
-    const value3 = ref('')
-    const value4 = ref('')
-    const value5 = ref('')
-    const value6 = ref('')
-    const value7 = ref('')
-    const value8 = ref('')
-    const value9 = ref('')
+    const values = reactive({
+      value: '',
+      value2: '',
+      value3: '',
+      value4: '',
+      value5: '',
+      value6: '',
+      value7: '',
+      value8: '',
+      value9: '',
+    })
 
     watchLang((lang) => {
       use(lang)
-      value5.value = pack.value.clearableText
+      values.value5 = pack.value.clearableText
     })
 
     return {
       pack,
-      value,
-      value2,
-      value3,
-      value4,
-      value5,
-      value6,
-      value7,
-      value8,
-      value9,
+      ...toRefs(values)
     }
   },
 }