❤ Ant Design Vue 2.28的使用

❤ Ant Design Vue 2.28

弹窗

//按钮
<a-button type="primary" @click="showModal">Open Modal</a-button>//窗口
<a-modal v-model:visible="visible" title="Basic Modal" @ok="handleOk"><p>Some contents...</p><p>Some contents...</p><p>Some contents...</p>
</a-modal><script lang="ts">
import { defineComponent, ref } from 'vue'; //引入 
export default defineComponent({setup() {const visible = ref<boolean>(false); //定义窗口开关//定义窗口事件const showModal = () => {visible.value = true;};//窗口事件const handleOk = (e: MouseEvent) => {console.log(e);visible.value = false;};//返回数值return {visible,showModal,handleOk,};},
});
</script>

下拉框

<a-selectref="select"v-model:value="value1"style="width: 120px"@focus="focus"@change="handleChange"><a-select-option value="jack">Jack</a-select-option><a-select-option value="lucy">Lucy</a-select-option><a-select-option value="disabled" disabled>Disabled</a-select-option><a-select-option value="Yiminghe">yiminghe</a-select-option>
</a-select>//数据
const options1 = ref<SelectTypes['options']>([{value: 'jack',label: 'Jack',},{value: 'lucy',label: 'Lucy',},{value: 'disabled',label: 'Disabled',disabled: true,},{value: 'yiminghe',label: 'Yiminghe',},
]);//方法
const focus = () => {console.log('focus');};const handleChange = (value: string) => {console.log(`selected ${value}`);
};