用户:玲子/common.js

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

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

(function() {
    'use strict';

    // 等待页面加载完成
    mw.loader.using(['vue', 'codex']).then(function() {
        // 创建 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';
        document.body.appendChild(container);

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