iT邦幫忙

2024 iThome 鐵人賽

DAY 3
0

Update CSS variable with Vue

摘要

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

大致說明如下:

  1. Vue.js 設置:
    使用Composition API定義了Vue應用。
    ref用於創建響應式的資料屬性spacing, blur, 和 base,這些屬性分別控制間距、模糊效果和基礎顏色。
  2. 響應式變化:
    watchEffect用於監控這些屬性的變化,當它們變化時,使用document.documentElement.style.setProperty來更新CSS變數的值。
    這些CSS變數被動態綁定到input元素的v-model指令中,當使用者調整這些控制項時,CSS樣式會自動更新。
  3. 最終效果:
    使用者可以通過滑動條調整圖片的間距(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>


上一篇
02 - Vue and CSS Clock
下一篇
04 Array Cardio use lodash
系列文
使用 Vue 3 做出 30 個 Side Project7
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言