用户:玲子/common.js

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

// 等待页面加载完成
mw.loader.using( '@wikimedia/codex' ).then( function( require ) {
	const Vue = require( 'vue' );
	const Codex = 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>
        `
    });

    // 创建容器元素
    const container = document.createElement('div');
    container.id = 'codex-demo';
    content.insertBefore( container, content.firstChild );

    // 挂载 Vue 应用
    app.mount('#codex-demo');
});