docs(thing): Upgrade the use case of thing component to Composition API (#1044)

This commit is contained in:
songjianet 2021-09-02 22:12:10 +08:00 committed by GitHub
parent 5ca2fd39ba
commit 87d834a42c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 40 additions and 36 deletions

View File

@ -81,21 +81,22 @@ Thing provides many slots to custom.
```
```js
import { defineComponent, ref } from 'vue'
import { CashOutline as CashIcon } from '@vicons/ionicons5'
export default {
export default defineComponent({
components: {
CashIcon
},
data () {
setup () {
return {
avatar: true,
header: true,
headerExtra: true,
description: true,
footer: true,
action: true
avatar: ref(true),
header: ref(true),
headerExtra: ref(true),
description: ref(true),
footer: ref(true),
action: ref(true)
}
}
}
})
```

View File

@ -81,21 +81,22 @@ Content can be indented after avatar.
```
```js
import { defineComponent, ref } from 'vue'
import { CashOutline as CashIcon } from '@vicons/ionicons5'
export default {
export default defineComponent({
components: {
CashIcon
},
data () {
setup () {
return {
avatar: true,
header: true,
headerExtra: true,
description: true,
footer: true,
action: true
avatar: ref(true),
header: ref(true),
headerExtra: ref(true),
description: ref(true),
footer: ref(true),
action: ref(true)
}
}
}
})
```

View File

@ -79,21 +79,22 @@ Thing 提供了很多 slot 来定制。
```
```js
import { defineComponent, ref } from 'vue'
import { CashOutline as CashIcon } from '@vicons/ionicons5'
export default {
export default defineComponent({
components: {
CashIcon
},
data () {
setup () {
return {
avatar: true,
header: true,
headerExtra: true,
description: true,
footer: true,
action: true
avatar: ref(true),
header: ref(true),
headerExtra: ref(true),
description: ref(true),
footer: ref(true),
action: ref(true)
}
}
}
})
```

View File

@ -79,21 +79,22 @@
```
```js
import { defineComponent, ref } from 'vue'
import { CashOutline as CashIcon } from '@vicons/ionicons5'
export default {
export default defineComponent({
components: {
CashIcon
},
data () {
setup () {
return {
avatar: true,
header: true,
headerExtra: true,
description: true,
footer: true,
action: true
avatar: ref(true),
header: ref(true),
headerExtra: ref(true),
description: ref(true),
footer: ref(true),
action: ref(true)
}
}
}
})
```