我正在尝试将 antd 工具提示与 vue3 一起使用
<a-tooltip :mouseEnterDelay="1">
<template #title> prompt text </template>
<a-button type="danger" shape="circle" @click="handleDelete(record.id)">
<template #icon><DeleteOutlined /></template>
</a-button>
</a-tooltip>
代码看起来不错,但结果如下:
有点难看,我也在使用相同版本的文档:
"dependencies": {
"ant-design-vue": "^2.0.0-rc.6",
"axios": "^0.21.1",
"lockr": "^0.8.5",
"lodash": "^4.17.20",
"vue": "^3.0.0",
"vue-i18n": "^9.0.0-beta.17",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
编辑:添加 main.ts 完整代码。
import { createApp } from 'vue'
import App from '@/App.vue'
import router from '@/router'
import store from '@/store'
import 'ant-design-vue/dist/antd.css'
import '@/style/index.scss'
import { createI18n } from 'vue-i18n'
import messages from '@/assets/i18n.json'
import { Layout, Menu, Select, Avatar, Dropdown, Tag, Divider, Table, Tooltip, Button, message, Popconfirm } from 'ant-design-vue'
const i18n = createI18n({
legacy: false,
locale: 'en',
messages
})
const app = createApp(App)
app.config.globalProperties.$message = message
app
.use(i18n)
.use(store)
.use(router)
.use(Layout)
//...all the other use of ant
.mount('#app')
有人可以帮忙吗?