用户:玲子/CodexDemo.js

注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。

Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。

const content = document.getElementById( 'mw-content-text' );

// 等待页面加载完成
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');
});