使用HTML 来开发RMMV的UI - Project1

/* 主题变量 */
:root {
    /**文本阴影**/
    --mv-text-shdow: 2px 2px 4px #555555;
    /**字体颜色**/
    --mv-color: #ffffff;
    /**背景颜色**/
    --mv-bg-color: #000000;
    /** 文字对齐方式 **/
    --mv-text-align: center;
    /**字体**/
    --mv-font-family: Arial, GameFont, sans-serif;
    /** 选项框背景色 **/
    --mv-w-select-bg-color: var(--mv-bg-color);
    /** 选项框透明度 最大255 **/
    --mv-w-select-bg-opacity: 192;
    /** 选项框背景填充5像素 **/
    --mv-w-select-bg-padding: 5px;
    /** 选项框背景色 **/
    --mv-w-select-bg-radius: 10px;
    /** 选项框边框颜色 **/
    --mv-w-select-bg-border: 5px #6f91d1 solid;
    /** 选项字体颜色 **/
    --mv-w-select-item-color: var(--mv-color);
    /** 选项边框 **/
    --mv-w-select-item-boder: 2px black solid;
    /** 选项行高度 **/
    --mv-w-select-item-line-height: 36px;
    /** 选项文字大小 **/
    --mv-w-select-item-font-size: 20px;
    /** 选项文字对齐方式 **/
    --mv-w-select-item-text-align: var(--mv-text-align);
    /** 选项背景颜色 **/
    --mv-w-select-item-bg-color: #6caaa6;
    /** 选项背景颜色2 **/
    --mv-w-select-item-bg-color2: #346371;
    /** 选项禁用背景颜色 **/
    --mv-w-select-item-disabled-bg-color: rgba(0, 0, 0, 0.5);
    /** 选项禁用字体颜色 **/
    --mv-w-select-item-disabled-color: gray;
    /** 选项字体颜色 **/
    --mv-w-select-item-text-shdow: var(--mv-text-shdow);
 
    /** 标题界面选项框宽度 **/
    --mv-w-title-select-bg-width: calc(240px - var(--mv-w-select-bg-padding) * 2)
}

/* 主题变量 */


:root {


    /**文本阴影**/


    --mv-text-shdow: 2px 2px 4px #555555;


    /**字体颜色**/


    --mv-color: #ffffff;


    /**背景颜色**/


    --mv-bg-color: #000000;


    /** 文字对齐方式 **/


    --mv-text-align: center;


    /**字体**/


    --mv-font-family: Arial, GameFont, sans-serif;


    /** 选项框背景色 **/


    --mv-w-select-bg-color: var(--mv-bg-color);


    /** 选项框透明度 最大255 **/


    --mv-w-select-bg-opacity: 192;


    /** 选项框背景填充5像素 **/


    --mv-w-select-bg-padding: 5px;


    /** 选项框背景色 **/


    --mv-w-select-bg-radius: 10px;


    /** 选项框边框颜色 **/


    --mv-w-select-bg-border: 5px #6f91d1 solid;


    /** 选项字体颜色 **/


    --mv-w-select-item-color: var(--mv-color);


    /** 选项边框 **/


    --mv-w-select-item-boder: 2px black solid;


    /** 选项行高度 **/


    --mv-w-select-item-line-height: 36px;


    /** 选项文字大小 **/


    --mv-w-select-item-font-size: 20px;


    /** 选项文字对齐方式 **/


    --mv-w-select-item-text-align: var(--mv-text-align);


    /** 选项背景颜色 **/


    --mv-w-select-item-bg-color: #6caaa6;


    /** 选项背景颜色2 **/


    --mv-w-select-item-bg-color2: #346371;


    /** 选项禁用背景颜色 **/


    --mv-w-select-item-disabled-bg-color: rgba(0, 0, 0, 0.5);


    /** 选项禁用字体颜色 **/


    --mv-w-select-item-disabled-color: gray;


    /** 选项字体颜色 **/


    --mv-w-select-item-text-shdow: var(--mv-text-shdow);


 


    /** 标题界面选项框宽度 **/


    --mv-w-title-select-bg-width: calc(240px - var(--mv-w-select-bg-padding) * 2)


}

const {createApp} = Vue
const app = createApp({
    data() {
        return {
            message: 'Hello Vue!'
        }
    },
    methods: {
        startGame() {
            scene.commandNewGame();
        }
    }
});
app.use(ElementPlus);
app.mount('#window');
scene.onTerminate = function () {
    app.unmount();
    console.log("已销毁！")
}

const {createApp} = Vue


const app = createApp({


    data() {


        return {


            message: 'Hello Vue!'


        }


    },


    methods: {


        startGame() {


            scene.commandNewGame();


        }


    }


});


app.use(ElementPlus);


app.mount('#window');


scene.onTerminate = function () {


    app.unmount();


    console.log("已销毁！")


}

<!-- 通过添加data-preventGlobalEvents=“true”，我们可以轻松禁用来自RMMV Input和TouchInput的事件传递到该UI元素。 -->

<a href="#" @click="gameMain" :data-preventGlobalEvents="true">主页</a>

<!-- 通过添加data-preventGlobalEvents=“true”，我们可以轻松禁用来自RMMV Input和TouchInput的事件传递到该UI元素。 -->



<a href="#" @click="gameMain" :data-preventGlobalEvents="true">主页</a>