VUE cambia el color de fondo

1. Determinar las necesidades

Antes de la implementación, primero debemos aclarar el requisito, es decir, los usuarios pueden cambiar el color de fondo de la página de alguna manera, por lo que debemos proporcionar un control operable para implementar esta función.

2. Crear componentes de Vue

Para implementar la función de reemplazo del color de fondo de la página, podemos crear un componente Vue. Aquí hay un ejemplo simple de componente Vue:

 

<template>
  <div>
    <h1>当前背景颜色：{
   
   { backgroundColor }}</h1>
    <div>
      <button @click="setBackgroundColor('red')">红色</button>
      <button @click="setBackgroundColor('green')">绿色</button>
      <button @click="setBackgroundColor('blue')">蓝色</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      backgroundColor: 'white',
    };
  },
  methods: {
    setBackgroundColor(color) {
      this.backgroundColor = color;
      document.body.style.backgroundColor = color;
    },
  },
};
</script>

 En este ejemplo, usamos una backgroundColorvariable para almacenar el color de fondo de la página actual. Cuando el usuario hace clic en el botón, cambiamos setBackgroundColorel color de fondo llamando a un método y aplicamos el color de fondo al bodyelemento al mismo tiempo.

3. Crea una instancia de Vue

Para mostrar nuestro componente Vue, necesitamos crear una instancia de Vue. He aquí un ejemplo:

<template>
  <div>
    <h1>我的网站</h1>
    <background-control></background-control>
  </div>
</template>

<script>
import BackgroundControl from './BackgroundControl.vue';

export default {
  components: {
    'background-control': BackgroundControl,
  },
};
</script>

En este ejemplo, agregamos BackgroundControlel componente que acabamos de crear a la plantilla y lo envolvemos en un archivo <div>. Luego, necesitamos registrar el componente con la instancia de Vue.

4. Agregar estilos

Finalmente, necesitamos agregar estilos para embellecer nuestros controles. Aquí hay un ejemplo de estilos:

button {
  padding: 10px;
  margin-right: 10px;
  border: none;
  border-radius: 5px;
  color: white;
  font-size: 16px;
}

button.red {
  background-color: red;
}

button.green {
  background-color: green;
}

button.blue {
  background-color: blue;
}

En este ejemplo, usamos estilos CSS para embellecer nuestros botones. Establecimos un estilo estándar para cada botón y luego agregamos diferentes estilos de color de fondo para redlos botones greeny respectivamente.blue