blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-24 10:20:19 +08:00
Code Issues Projects Releases Wiki Activity

docs(Popover): use composition api

Browse Source
This commit is contained in:
chenjiahan 2020-12-13 17:05:48 +08:00
parent 497f36a2d3
commit 615ac2cefb
3 changed files with 203 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
src/popover/README.md
View File

@ -23,23 +23,27 @@ app.use(Popover);
``` ```
```js ```js
import { ref } from 'vue';
import { Toast } from 'vant'; import { Toast } from 'vant';
export default { export default {
data() { setup() {
return { const showPopover = ref(false);
showPopover: false, const actions = [
actions: [ { text: 'Option 1' },
{ text: 'Option 1' }, { text: 'Option 2' },
{ text: 'Option 2' }, { text: 'Option 3' },
{ text: 'Option 3' }, ];
],
}; const onSelect = (action) => {
},
methods: {
onSelect(action) {
Toast(action.text); Toast(action.text);
}, };
return {
actions,
onSelect,
showPopover,
};
}, },
}; };
``` ```
@ -57,15 +61,20 @@ Using the `theme` prop to change the style of Popover.
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
const showPopover = ref(false);
const actions = [
{ text: 'Option 1' },
{ text: 'Option 2' },
{ text: 'Option 3' },
];
return { return {
showPopover: false, actions,
actions: [ showPopover,
{ text: 'Option 1' },
{ text: 'Option 2' },
{ text: 'Option 3' },
],
}; };
}, },
}; };
@ -105,15 +114,20 @@ bottom-end # Bottom right
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
const showPopover = ref(false);
const actions = [
{ text: 'Option 1', icon: 'add-o' },
{ text: 'Option 2', icon: 'music-o' },
{ text: 'Option 3', icon: 'more-o' },
];
return { return {
showPopover: false, actions,
actions: [ showPopover,
{ text: 'Option 1', icon: 'add-o' },
{ text: 'Option 2', icon: 'music-o' },
{ text: 'Option 3', icon: 'more-o' },
],
}; };
}, },
}; };
@ -132,15 +146,20 @@ Using the `disabled` option to disable an action.
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
const showPopover = ref(false);
const actions = [
{ text: 'Option 1', disabled: true },
{ text: 'Option 2', disabled: true },
{ text: 'Option 3' },
];
return { return {
showPopover: false, actions,
actions: [ showPopover,
{ text: 'Option 1', disabled: true },
{ text: 'Option 2', disabled: true },
{ text: 'Option 3' },
],
}; };
}, },
}; };
@ -172,11 +191,12 @@ export default {
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
return { const showPopover = ref(false);
showPopover: false, return { showPopover };
};
}, },
}; };
``` ```

91
src/popover/README.zh-CN.md
View File

@ -29,20 +29,29 @@ app.use(Popover);
``` ```
```js ```js
import { ref } from 'vue';
import { Toast } from 'vant'; import { Toast } from 'vant';
export default { export default {
data() { setup() {
return { const showPopover = ref(false);
showPopover: false,
// 通过 actions 属性来定义菜单选项 // 通过 actions 属性来定义菜单选项
actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }], const actions = [
}; { text: '选项一' },
}, { text: '选项二' },
methods: { { text: '选项三' },
onSelect(action) { ];
const onSelect = (action) => {
Toast(action.text); Toast(action.text);
}, };
return {
actions,
onSelect,
showPopover,
};
}, },
}; };
``` ```
@ -60,11 +69,20 @@ Popover 支持浅色和深色两种风格，默认为浅色风格，将 `theme`
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
const showPopover = ref(false);
const actions = [
{ text: '选项一' },
{ text: '选项二' },
{ text: '选项三' },
];
return { return {
showPopover: false, actions,
actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }], showPopover,
}; };
}, },
}; };
@ -108,15 +126,20 @@ bottom-end # 底部右侧位置
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
const showPopover = ref(false);
const actions = [
{ text: '选项一', icon: 'add-o' },
{ text: '选项二', icon: 'music-o' },
{ text: '选项三', icon: 'more-o' },
];
return { return {
showPopover: false, actions,
actions: [ showPopover,
{ text: '选项一', icon: 'add-o' },
{ text: '选项二', icon: 'music-o' },
{ text: '选项三', icon: 'more-o' },
],
}; };
}, },
}; };
@ -135,15 +158,20 @@ export default {
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
const showPopover = ref(false);
const actions = [
{ text: '选项一', disabled: true },
{ text: '选项二', disabled: true },
{ text: '选项三' },
];
return { return {
showPopover: false, actions,
actions: [ showPopover,
{ text: '选项一', disabled: true },
{ text: '选项二', disabled: true },
{ text: '选项三' },
],
}; };
}, },
}; };
@ -177,11 +205,12 @@ export default {
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
return { const showPopover = ref(false);
showPopover: false, return { showPopover };
};
}, },
}; };
``` ```

163
src/popover/demo/index.vue
View File

@ -120,65 +120,79 @@
</demo-block> </demo-block>
</template> </template>
<script> <script lang="ts">
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate';
import Toast from '../../toast'; import Toast from '../../toast';
export default { const i18n = {
i18n: { 'zh-CN': {
'zh-CN': { actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }], shortActions: [{ text: '选项一' }, { text: '选项二' }],
shortActions: [{ text: '选项一' }, { text: '选项二' }], actionsWithIcon: [
actionsWithIcon: [ { text: '选项一', icon: 'add-o' },
{ text: '选项一', icon: 'add-o' }, { text: '选项二', icon: 'music-o' },
{ text: '选项二', icon: 'music-o' }, { text: '选项三', icon: 'more-o' },
{ text: '选项三', icon: 'more-o' }, ],
], actionsDisabled: [
actionsDisabled: [ { text: '选项一', disabled: true },
{ text: '选项一', disabled: true }, { text: '选项二', disabled: true },
{ text: '选项二', disabled: true }, { text: '选项三' },
{ text: '选项三' }, ],
], showIcon: '展示图标',
showIcon: '展示图标', placement: '弹出位置',
placement: '弹出位置', darkTheme: '深色风格',
darkTheme: '深色风格', lightTheme: '浅色风格',
lightTheme: '浅色风格', showPopover: '点击弹出气泡',
showPopover: '点击弹出气泡', actionOptions: '选项配置',
actionOptions: '选项配置', customContent: '自定义内容',
customContent: '自定义内容', disableAction: '禁用选项',
disableAction: '禁用选项', choosePlacement: '选择弹出位置',
choosePlacement: '选择弹出位置',
},
'en-US': {
actions: [
{ text: 'Option 1' },
{ text: 'Option 2' },
{ text: 'Option 3' },
],
shortActions: [{ text: 'Option 1' }, { text: 'Option 2' }],
actionsWithIcon: [
{ text: 'Option 1', icon: 'add-o' },
{ text: 'Option 2', icon: 'music-o' },
{ text: 'Option 3', icon: 'more-o' },
],
actionsDisabled: [
{ text: 'Option 1', disabled: true },
{ text: 'Option 2', disabled: true },
{ text: 'Option 3' },
],
showIcon: 'Show Icon',
placement: 'Placement',
darkTheme: 'Dark Theme',
lightTheme: 'Light Theme',
showPopover: 'Show Popover',
actionOptions: 'Action Options',
customContent: 'Custom Content',
disableAction: 'Disable Action',
choosePlacement: 'Placement',
},
}, },
'en-US': {
actions: [{ text: 'Option 1' }, { text: 'Option 2' }, { text: 'Option 3' }],
shortActions: [{ text: 'Option 1' }, { text: 'Option 2' }],
actionsWithIcon: [
{ text: 'Option 1', icon: 'add-o' },
{ text: 'Option 2', icon: 'music-o' },
{ text: 'Option 3', icon: 'more-o' },
],
actionsDisabled: [
{ text: 'Option 1', disabled: true },
{ text: 'Option 2', disabled: true },
{ text: 'Option 3' },
],
showIcon: 'Show Icon',
placement: 'Placement',
darkTheme: 'Dark Theme',
lightTheme: 'Light Theme',
showPopover: 'Show Popover',
actionOptions: 'Action Options',
customContent: 'Custom Content',
disableAction: 'Disable Action',
choosePlacement: 'Placement',
},
};
data() { const placements = [
return { 'top',
'top-start',
'top-end',
'left',
'left-start',
'left-end',
'right',
'right-start',
'right-end',
'bottom',
'bottom-start',
'bottom-end',
];
export default {
setup() {
const t = useTranslate(i18n);
const state = reactive({
show: { show: {
showIcon: false, showIcon: false,
placement: false, placement: false,
@ -189,33 +203,26 @@ export default {
}, },
showPicker: false, showPicker: false,
currentPlacement: 'top', currentPlacement: 'top',
placements: [ });
'top',
'top-start',
'top-end',
'left',
'left-start',
'left-end',
'right',
'right-start',
'right-end',
'bottom',
'bottom-start',
'bottom-end',
],
};
},
methods: { const onPickerChange = (value: string) => {
onPickerChange(value) {
setTimeout(() => { setTimeout(() => {
this.show.placement = true; state.show.placement = true;
this.currentPlacement = value; state.currentPlacement = value;
}); });
}, };
onSelect(action) {
const onSelect = (action: { text: string }) => {
Toast(action.text); Toast(action.text);
}, };
return {
...toRefs(state),
t,
onSelect,
placements,
onPickerChange,
};
}, },
}; };
</script> </script>