VueJS事件处理器修改CSS背景：仅传入背景链接更新渐变背景样式

存在的问题 #

• 函数调用名错误：定义的函数名是css_variable_watcher，调用时写成了css-variable-watcher，JS 中标识符不支持短横线，会被识别为减法运算触发语法错误
• 传参顺序完全错误：css_variable_watcher 第一个参数需要传入你要修改的CSS变量名--background，第二个参数是前缀（也就是渐变+url开头的部分），第三个参数是后缀（也就是url闭合+后面的背景属性部分），你当前传参完全错位
• Vue挂载节点不规范：不推荐直接将Vue实例挂载到body上，容易和页面原生元素、其他全局样式产生冲突
• CSS的url属性未做引号包裹：如果输入的链接包含特殊字符（空格、特殊符号等），会导致CSS语法解析失败

修正后的代码 #

CSS 部分 #

:root {
  --background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('') no-repeat center center fixed;
}
body {
  background: var(--background);
  /* 补充背景适配规则，避免图片变形 */
  background-size: cover;
}

JS 部分 #

function css_variable_watcher(name, prefix = "", suffix = "") {
    return {
        immediate: true,
        handler(new_value) {
            // 对输入的链接做转义避免引号冲突
            const safeUrl = new_value.replace(/'/g, "\\'");
            document.documentElement.style.setProperty(name, prefix + safeUrl + suffix);
        },
    };
}

var vue = new Vue ({
   el: "#app", // 页面提前添加<div id="app"></div>包裹所有Vue控制的内容
   data: {
      background: "https://example.com/default-bg.jpg", // 可替换为你的默认背景链接
   },
   watch: {
      background: css_variable_watcher(
        "--background", 
        "linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('",
        "') no-repeat center center fixed"
      ),
   },
});

输入框绑定示例 #

在Vue控制的区域内添加输入框，即可实现输入链接实时修改背景：

<div id="app">
  <input type="text" v-model="background" placeholder="请输入背景图片链接">
</div>

内容的提问来源于stack exchange，提问作者Visal