03 - CSS Variables

16th鐵人賽

TimTim

2024-09-17 15:27:12

81 瀏覽

分享至

Update CSS variable with Vue

摘要

本篇最主要透過 CSS 以及 Vue 抓取物件去改變 CSS的值，範例是改變了內邊距(padding), 模糊度(blur)及顏色，並同時對標題得字進行改變。

大致說明如下:

Vue.js 設置：
使用Composition API定義了Vue應用。
ref用於創建響應式的資料屬性spacing, blur, 和 base，這些屬性分別控制間距、模糊效果和基礎顏色。
響應式變化：
watchEffect用於監控這些屬性的變化，當它們變化時，使用document.documentElement.style.setProperty來更新CSS變數的值。
這些CSS變數被動態綁定到input元素的v-model指令中，當使用者調整這些控制項時，CSS樣式會自動更新。
最終效果：
使用者可以通過滑動條調整圖片的間距（Spacing）和模糊效果（Blur），並且可以使用顏色選擇器更改圖片的背景顏色（Base Color）。
所有這些變化都會立即反映在圖片的樣式上，實現了即時的樣式更新效果。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Scoped CSS Variables and Vue</title>
        <style>
            :root {
                --base: #ffc600;
                --spacing: 10px;
                --blur: 10px;
            }

            img {
                padding: var(--spacing);
                background: var(--base);
                filter: blur(var(--blur));
            }

            .hl {
                color: var(--base);
            }

            body {
                text-align: center;
                background: #193549;
                color: white;
                font-family: "helvetica neue", sans-serif;
                font-weight: 100;
                font-size: 50px;
            }

            .controls {
                margin-bottom: 50px;
            }

            input {
                width: 100px;
            }
        </style>
        <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    </head>

    <body id="app">
        <h2>Update CSS Variables with <span class="hl">Vue</span></h2>

        <div class="controls">
            <label for="spacing">Spacing:</label>
            <input
                id="spacing"
                type="range"
                name="spacing"
                min="10"
                max="200"
                value="10"
                data-sizing="px"
                v-model="spacing"
            />

            <label for="blur">Blur:</label>
            <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px" v-model="blur" />

            <label for="base">Base Color</label>
            <input id="base" type="color" name="base" value="#ffc600" v-model="base" />
        </div>

        <img
            src="https://images.unsplash.com/photo-1531040630173-7cfb894c8eaa?q=80&w=2804&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            style="width: 800px; width: 500px"
        />
    </body>
</html>
<script>
    const { ref, watchEffect, createApp } = Vue;

    const app = {
        setup() {
            const spacing = ref(10);
            const blur = ref(10);
            const base = ref("#ffc600");

            watchEffect(() => {
                document.documentElement.style.setProperty("--spacing", `${spacing.value}px`);
                document.documentElement.style.setProperty("--blur", `${blur.value}px`);
                document.documentElement.style.setProperty("--base", base.value);
            });

            return {
                spacing,
                blur,
                base,
            };
        },
    };

    createApp(app).mount("#app");
</script>