我正在尝试构建一个 Vue 宏应用程序以在 NetSuite 中使用特定功能。由于我无法使用 npm 或其他软件包安装程序，因此我需要使用 CDN。 Vue 应用程序正在运行，甚至 Ant Design 也正在运行。我遇到的唯一问题是它没有选择任何 Ant Design 组件的样式。这是我的代码：
<html>
<head>
<title>Auto Refresh Page</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<link href="https://unpkg.com/[email protected]/dist/antd.min.css" rel="stylesheet">
</link>
<script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
<script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekday.js"></script>
<script src="https://unpkg.com/dayjs/plugin/localeData.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script>
<script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
<script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>
</head>
<body>
<div id="app">
</div>
<script src="https://unpkg.com/[email protected]/dist/antd.min.js"></script>
<script>
const app = Vue.createApp({
el: "#app",
data() {
return {
moduleLoaded: false,
currentRecordModule: null,
backgroundProcess: false,
showModal: false,
};
},
methods: {
init() {
const currentRecordModule = require(['N/currentRecord'], (currentRecord) => {
this.moduleLoaded = true
this.currentRecordModule = currentRecord
});
},
reloadPage() {
location.reload(true)
},
showAlert() {
this.showModal = true
const iframeHtml = '<iframe src="${activeBgTaskUrl}" style="width: 100%; height: 400px; border: none;"></iframe>';
},
handleShowBackgroundProcessAlert(event) {
if (event.target.id === 'showBackgroundProcessAlert') {
this.showAlert()
}
},
},
mounted() {
console.log('App mounted')
this.init();
document.addEventListener('click', this.handleShowBackgroundProcessAlert)
},
},
template: `<a-button icon="search" type="primary">Primary Button</a-button>
<a-modal v-model:visible="showModal" title="Basic Modal" @ok="handleOk">
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</a-modal>`
});
app.mount('#app');
</script>
</body>
</html>
我想在
showAlert在 Ant Design Vue (antdv) 文档中，有一节解释了如何在浏览器中导入它：
在浏览器中添加
scriptlinkantd需要在app.use()中添加全局变量antd。
例如：
app.use(antd).mount('#app');