Vue改变网页背景颜色切换

最新推荐文章于 2024-08-21 22:17:11 发布

高中不复，大学纷飞

最新推荐文章于 2024-08-21 22:17:11 发布

阅读量2.9k

点赞数

分类专栏：毕设总结系列文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44760912/article/details/127096171

版权

毕设总结系列专栏收录该内容

6 篇文章 1 订阅

订阅专栏

今天给大家分享一个好看的网页背景颜色切换的html文件

功能支持：

1.点击默认主题内容区域切换对应颜色，包括文字背景和文字颜色

2.在动态颜色中可以选择自己喜欢的颜色动态切换

实现代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue主题</title>
    <!-- 引入vue.js最新版本 vue3 -->
    <script src="https://unpkg.com/vue@next"></script>
    <!-- 引入在线css，html代码对应css模板 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/tailwindcss/1.0.5/tailwind.min.css">
    <link rel="stylesheet" href="https://www.jq22.com/demo/jquerybgcolor201907151220/css/style.css">
    <style></style>
</head>

<body>
    <div id="Application">
        <div class="absolute bg-white left-0 p-4 right-0 text-grey">
            <div class="flex items-center">
                <div class="flex flex-wrap mr-8 items-center justify-between">
                    <h3 class="font-bold text-sm mr-3">默认主题</h3>
                    <div class="flex">
                        <template v-for="color in colorlist">
                            <span class="cursor-pointer w-10 h-10 inline-block rounded-full mr-4" data-bg-color="#b84130"
                            data-color="#ffffff" :style="{backgroundColor:color}" @click="changeColorBg(color)">&nbsp;</span>
                        </template>
                    </div>
                </div>
                <h3 class="font-bold mr-4 text-sm">动态颜色</h3>
                <div class="flex items-center">
                    <div class="flex items-center">
                        <div class="flex items-center mr-3">
                          <label class="text-sm mr-2">背景：</label>
                          <input class="cursor-pointer h-10 outline-none rounded-full w-10 input-color-picker" 
                          type="color" v-model="colorBg" />
                        </div>
                        <div class="flex items-center mr-3">
                          <label class="text-sm mr-2">Color:</label>
                          <input class="cursor-pointer h-10 outline-none rounded-full w-10 input-color-picker" 
                          type="color" v-model="colorWz" />
                        </div>
                        <div class="flex items-center">
                            <label class="text-sm mr-2" @click="resetColor" 
                            :style="{color: colorBg == '' ? '#b84130' : colorBg, cursor: 'pointer'}">重置颜色</label>
                          </div>
                      </div>
                </div>
            </div>
        </div>
        <!-- 内容区 -->
        <section class="hero h-screen" :style="BgColor">
            <div class="h-full flex justify-center items-center">
                <h1 class="text-5xl font-bold" :style="WzColor">
                    常常有人问我，你为什么喜欢这个，我只想说，我也不知道耶</h1>
            </div>
        </section>
    </div>
    <script>
        const App = Vue.createApp({
            data() {
                return {
                    colorlist: ["#b84130","#363d98","#FFD5CD"],
                    //内容区背景
                    colorBg: '',
                    //内容区文字颜色
                    colorWz: '',
                }
            },
            //使用计算属性来控制style样式   ``为反引号
            computed: {
                BgColor() {
                    return `background-color: ${this.colorBg == '' ? '#b84130' : this.colorBg};`
                },
                // {cursor: 'pointer',color: colorWz == '' ? 'white' : colorWz}
                WzColor: {
                    get() {
                        return `cursor: 'pointer';color: ${this.colorWz == '' ? 'white' : this.colorWz}`
                    }
                }
            },
            methods: {
                //点击事件执行修改背景颜色
                changeColorBg(color) {
                    this.colorBg = color
                },
                //重置最初状态
                resetColor() {
                    this.colorBg = ''
                    this.colorWz = 'white'
                }
            },
        })
        App.mount("#Application") 
    </script>
</body>

</html>
<!-- 
    没想到input还有color类型
 -->

代码下载：

https://wwt.lanzoul.com/iSTwt0cin6vg
密码:gdqm

顺带分享模板网址：jQuery改变网页背景颜色切换