|
|
| 第1行： |
第1行： |
| const content = document.getElementById( 'mw-content-text' );
| | mw.loader.load( 'https://thga.me/用户:玲子/CodexDemo.js?action=raw&ctype=text/javascript' ); |
| | |
| // 等待页面加载完成
| |
| mw.loader.using( '@wikimedia/codex' ).then( function( require ) { | |
| const Vue = mw.loader.require( 'vue' );
| |
| const { CdxButton, CdxDialog, CdxIcon } = require( '@wikimedia/codex' );
| |
|
| |
|
| |
| // 创建 Vue 应用
| |
| const app = Vue.createApp({
| |
| data() {
| |
| return {
| |
| showDialog: false
| |
| };
| |
| },
| |
| methods: {
| |
| openDialog() {
| |
| this.showDialog = true;
| |
| },
| |
| closeDialog() {
| |
| this.showDialog = false;
| |
| }
| |
| },
| |
| template: `
| |
| <div>
| |
| <cdx-button
| |
| weight="primary"
| |
| @click="openDialog"
| |
| >
| |
| 打开对话框
| |
| </cdx-button>
| |
| | |
| <cdx-dialog
| |
| v-model:open="showDialog"
| |
| title="提示"
| |
| @close="closeDialog"
| |
| >
| |
| <p>这是一个使用 Codex 和 Vue 实现的对话框示例。</p>
| |
| <template #footer>
| |
| <cdx-button
| |
| weight="primary"
| |
| @click="closeDialog"
| |
| >
| |
| 确定
| |
| </cdx-button>
| |
| </template>
| |
| </cdx-dialog>
| |
| </div>
| |
| `
| |
| }).component( 'CdxButton', CdxButton )
| |
| .component( 'CdxDialog', CdxDialog )
| |
| .component( 'CdxIcon', CdxIcon );
| |
| | |
| // 创建容器元素
| |
| const container = document.createElement('div');
| |
| container.id = 'codex-demo';
| |
| content.insertBefore( container, content.firstChild );
| |
| | |
| // 挂载 Vue 应用
| |
| app.mount('#codex-demo');
| |
| });
| |
mw.loader.load( 'https://thga.me/用户:玲子/CodexDemo.js?action=raw&ctype=text/javascript' );
