docs(Overlay): use composition api

This commit is contained in:
chenjiahan 2020-12-09 17:54:17 +08:00
parent 488deefb30
commit 8a2495ee6b
3 changed files with 23 additions and 17 deletions

View File

@ -20,13 +20,14 @@ app.use(Overlay);
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
return { const show = ref(false);
show: false return { show };
} },
} };
},
``` ```
### Embedded Content ### Embedded Content

View File

@ -24,13 +24,14 @@ app.use(Overlay);
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
return { const show = ref(false);
show: false return { show };
} },
} };
},
``` ```
### 嵌入内容 ### 嵌入内容

View File

@ -3,7 +3,7 @@
<van-button <van-button
type="primary" type="primary"
:text="t('showOverlay')" :text="t('showOverlay')"
style="margin-left: 16px;" style="margin-left: 16px"
@click="show = true" @click="show = true"
/> />
<van-overlay :show="show" @click="show = false" /> <van-overlay :show="show" @click="show = false" />
@ -13,7 +13,7 @@
<van-button <van-button
type="primary" type="primary"
:text="t('embeddedContent')" :text="t('embeddedContent')"
style="margin-left: 16px;" style="margin-left: 16px"
@click="showEmbedded = true" @click="showEmbedded = true"
/> />
<van-overlay :show="showEmbedded" @click="showEmbedded = false"> <van-overlay :show="showEmbedded" @click="showEmbedded = false">
@ -25,6 +25,8 @@
</template> </template>
<script> <script>
import { reactive, toRefs } from 'vue';
export default { export default {
i18n: { i18n: {
'zh-CN': { 'zh-CN': {
@ -37,11 +39,13 @@ export default {
}, },
}, },
data() { setup() {
return { const state = reactive({
show: false, show: false,
showEmbedded: false, showEmbedded: false,
}; });
return toRefs(state);
}, },
}; };
</script> </script>