www.antdv.com
1. <a-select 默认选中：
<a-select :value="refreshInterval"
2.使用Drawer (单独页面方式)
<template>
<a @click="changeTheme" style="padding-right: 20px">切换主题</a>
<SettingDrawer ref="settingDrawer" /> </template>
<script setup>
import SettingDrawer from "./SettingDrawer.vue";
const settingDrawer = ref();
const changeTheme = () => {settingDrawer.value.showDrawer();
};
</script>
SettingDrawer.vue:
<template><a-drawer:visible="visibleFlag"class="custom-class"style="color: red"title="设置"@close="closeDrawer"placement="right"><p>Some contents...</p></a-drawer>
</template>
<script setup>import {ref} from "vue";const visibleFlag = ref(false);
function showDrawer(){visibleFlag.value = true;
}
function closeDrawer(){visibleFlag.value = false;
}
defineExpose({showDrawer,})
</script>
如有回调，则：emits('reloadList'); //在合适的方法里执行。
const emits = defineEmits(['reloadList']);
<FormDrawer ref="formDrawer" @reloadList="queryList"/>
