0

我正在尝试将 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')

有人可以帮忙吗?

4

0 回答 0