mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(Popover): use composition api
This commit is contained in:
chenjiahan
parent
497f36a2d3
commit
615ac2cefb
@ -23,23 +23,27 @@ app.use(Popover);
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showPopover: false,
|
||||
actions: [
|
||||
{ text: 'Option 1' },
|
||||
{ text: 'Option 2' },
|
||||
{ text: 'Option 3' },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSelect(action) {
|
||||
setup() {
|
||||
const showPopover = ref(false);
|
||||
const actions = [
|
||||
{ text: 'Option 1' },
|
||||
{ text: 'Option 2' },
|
||||
{ text: 'Option 3' },
|
||||
];
|
||||
|
||||
const onSelect = (action) => {
|
||||
Toast(action.text);
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
actions,
|
||||
onSelect,
|
||||
showPopover,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -57,15 +61,20 @@ Using the `theme` prop to change the style of Popover.
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
setup() {
|
||||
const showPopover = ref(false);
|
||||
const actions = [
|
||||
{ text: 'Option 1' },
|
||||
{ text: 'Option 2' },
|
||||
{ text: 'Option 3' },
|
||||
];
|
||||
|
||||
return {
|
||||
showPopover: false,
|
||||
actions: [
|
||||
{ text: 'Option 1' },
|
||||
{ text: 'Option 2' },
|
||||
{ text: 'Option 3' },
|
||||
],
|
||||
actions,
|
||||
showPopover,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -105,15 +114,20 @@ bottom-end # Bottom right
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
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 {
|
||||
showPopover: false,
|
||||
actions: [
|
||||
{ text: 'Option 1', icon: 'add-o' },
|
||||
{ text: 'Option 2', icon: 'music-o' },
|
||||
{ text: 'Option 3', icon: 'more-o' },
|
||||
],
|
||||
actions,
|
||||
showPopover,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -132,15 +146,20 @@ Using the `disabled` option to disable an action.
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
setup() {
|
||||
const showPopover = ref(false);
|
||||
const actions = [
|
||||
{ text: 'Option 1', disabled: true },
|
||||
{ text: 'Option 2', disabled: true },
|
||||
{ text: 'Option 3' },
|
||||
];
|
||||
|
||||
return {
|
||||
showPopover: false,
|
||||
actions: [
|
||||
{ text: 'Option 1', disabled: true },
|
||||
{ text: 'Option 2', disabled: true },
|
||||
{ text: 'Option 3' },
|
||||
],
|
||||
actions,
|
||||
showPopover,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -172,11 +191,12 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showPopover: false,
|
||||
};
|
||||
setup() {
|
||||
const showPopover = ref(false);
|
||||
return { showPopover };
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -29,20 +29,29 @@ app.use(Popover);
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showPopover: false,
|
||||
// 通过 actions 属性来定义菜单选项
|
||||
actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSelect(action) {
|
||||
setup() {
|
||||
const showPopover = ref(false);
|
||||
|
||||
// 通过 actions 属性来定义菜单选项
|
||||
const actions = [
|
||||
{ text: '选项一' },
|
||||
{ text: '选项二' },
|
||||
{ text: '选项三' },
|
||||
];
|
||||
|
||||
const onSelect = (action) => {
|
||||
Toast(action.text);
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
actions,
|
||||
onSelect,
|
||||
showPopover,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -60,11 +69,20 @@ Popover 支持浅色和深色两种风格，默认为浅色风格，将 `theme`
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
setup() {
|
||||
const showPopover = ref(false);
|
||||
const actions = [
|
||||
{ text: '选项一' },
|
||||
{ text: '选项二' },
|
||||
{ text: '选项三' },
|
||||
];
|
||||
|
||||
return {
|
||||
showPopover: false,
|
||||
actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
|
||||
actions,
|
||||
showPopover,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -108,15 +126,20 @@ bottom-end # 底部右侧位置
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
setup() {
|
||||
const showPopover = ref(false);
|
||||
const actions = [
|
||||
{ text: '选项一', icon: 'add-o' },
|
||||
{ text: '选项二', icon: 'music-o' },
|
||||
{ text: '选项三', icon: 'more-o' },
|
||||
];
|
||||
|
||||
return {
|
||||
showPopover: false,
|
||||
actions: [
|
||||
{ text: '选项一', icon: 'add-o' },
|
||||
{ text: '选项二', icon: 'music-o' },
|
||||
{ text: '选项三', icon: 'more-o' },
|
||||
],
|
||||
actions,
|
||||
showPopover,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -135,15 +158,20 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
setup() {
|
||||
const showPopover = ref(false);
|
||||
const actions = [
|
||||
{ text: '选项一', disabled: true },
|
||||
{ text: '选项二', disabled: true },
|
||||
{ text: '选项三' },
|
||||
];
|
||||
|
||||
return {
|
||||
showPopover: false,
|
||||
actions: [
|
||||
{ text: '选项一', disabled: true },
|
||||
{ text: '选项二', disabled: true },
|
||||
{ text: '选项三' },
|
||||
],
|
||||
actions,
|
||||
showPopover,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -177,11 +205,12 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showPopover: false,
|
||||
};
|
||||
setup() {
|
||||
const showPopover = ref(false);
|
||||
return { showPopover };
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -120,65 +120,79 @@
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
import Toast from '../../toast';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
|
||||
shortActions: [{ text: '选项一' }, { text: '选项二' }],
|
||||
actionsWithIcon: [
|
||||
{ text: '选项一', icon: 'add-o' },
|
||||
{ text: '选项二', icon: 'music-o' },
|
||||
{ text: '选项三', icon: 'more-o' },
|
||||
],
|
||||
actionsDisabled: [
|
||||
{ text: '选项一', disabled: true },
|
||||
{ text: '选项二', disabled: true },
|
||||
{ text: '选项三' },
|
||||
],
|
||||
showIcon: '展示图标',
|
||||
placement: '弹出位置',
|
||||
darkTheme: '深色风格',
|
||||
lightTheme: '浅色风格',
|
||||
showPopover: '点击弹出气泡',
|
||||
actionOptions: '选项配置',
|
||||
customContent: '自定义内容',
|
||||
disableAction: '禁用选项',
|
||||
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',
|
||||
},
|
||||
const i18n = {
|
||||
'zh-CN': {
|
||||
actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
|
||||
shortActions: [{ text: '选项一' }, { text: '选项二' }],
|
||||
actionsWithIcon: [
|
||||
{ text: '选项一', icon: 'add-o' },
|
||||
{ text: '选项二', icon: 'music-o' },
|
||||
{ text: '选项三', icon: 'more-o' },
|
||||
],
|
||||
actionsDisabled: [
|
||||
{ text: '选项一', disabled: true },
|
||||
{ text: '选项二', disabled: true },
|
||||
{ text: '选项三' },
|
||||
],
|
||||
showIcon: '展示图标',
|
||||
placement: '弹出位置',
|
||||
darkTheme: '深色风格',
|
||||
lightTheme: '浅色风格',
|
||||
showPopover: '点击弹出气泡',
|
||||
actionOptions: '选项配置',
|
||||
customContent: '自定义内容',
|
||||
disableAction: '禁用选项',
|
||||
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',
|
||||
},
|
||||
};
|
||||
|
||||
data() {
|
||||
return {
|
||||
const placements = [
|
||||
'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: {
|
||||
showIcon: false,
|
||||
placement: false,
|
||||
@ -189,33 +203,26 @@ export default {
|
||||
},
|
||||
showPicker: false,
|
||||
currentPlacement: 'top',
|
||||
placements: [
|
||||
'top',
|
||||
'top-start',
|
||||
'top-end',
|
||||
'left',
|
||||
'left-start',
|
||||
'left-end',
|
||||
'right',
|
||||
'right-start',
|
||||
'right-end',
|
||||
'bottom',
|
||||
'bottom-start',
|
||||
'bottom-end',
|
||||
],
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
methods: {
|
||||
onPickerChange(value) {
|
||||
const onPickerChange = (value: string) => {
|
||||
setTimeout(() => {
|
||||
this.show.placement = true;
|
||||
this.currentPlacement = value;
|
||||
state.show.placement = true;
|
||||
state.currentPlacement = value;
|
||||
});
|
||||
},
|
||||
onSelect(action) {
|
||||
};
|
||||
|
||||
const onSelect = (action: { text: string }) => {
|
||||
Toast(action.text);
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
onSelect,
|
||||
placements,
|
||||
onPickerChange,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user