Vue通过link实现换肤功能

主要使用的是link的rel属性中的alternate，不清楚的可以看MDN

• 先写好css，然后引入

有alternate的时候，需要加上title

1. 无alternate、无title：始终应用，无论如何都会加载并渲染
2. 无alternate、有title：默认应用，可以选择，作为默认样式CSS文件加载并渲染
3. 有alternate stylesheet、有title：默认禁用，可以选择，作为备选样式CSS文件加载，默认不渲染

• 通过js来控制disabled，达到换肤的效果

<template>
    <div class="skin-container">
        <div class="alt">
            <button @click="inSkin('默认')">默认</button>
            <button @click="inSkin('夜间模式')">夜间模式</button>
            <button @click="inSkin('靓丽模式')">靓丽模式</button>
        </div>
        <div class="skin">
            换肤
        </div>
    </div>
</template>

<script>
export default {
    setup(props) {
        let inSkin = function (type) {
            let links = document.querySelectorAll("link[title]");
            links.forEach((item) => {
                item.disabled = true;
                if (item.getAttribute("title") === type) {
                    item.disabled = false;
                }
            });
        };
        return {
            inSkin,
        };
    },
};
</script>