uniapp modifie dynamiquement les styles

Avant-propos

Dans UniApp, nous devons souvent modifier dynamiquement les styles, comme basculer entre le mode jour et nuit, ajuster la taille de la police, etc. À l’heure actuelle, nous devons maîtriser certaines compétences en matière de modification dynamique des styles. Cet article présentera plusieurs méthodes couramment utilisées pour vous aider à mieux contrôler les changements de style.

1. Utiliser les propriétés calculées de Vue

Les propriétés calculées dans Vue peuvent calculer dynamiquement de nouvelles valeurs de propriété en fonction de variables dépendantes, afin que nous puissions les utiliser pour modifier dynamiquement les styles.

Par exemple, nous pouvons définir une variable isNight dans data pour contrôler le mode jour et nuit, puis calculer le style correspondant en mode calculé :

<template>
  <div :style="themeStyle">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      isNight: false // 默认为白天模式
    }
  },
  computed: {
    themeStyle () {
      return {
        // 日间模式样式
        backgroundColor: this.isNight ? '#37474f' : '#fafafa',
        color: this.isNight ? '#fff' : '#000',
        // 其他属性
      }
    }
  }
}
</script>

De cette façon, tant que la variable isNight change, le style peut être automatiquement mis à jour .

2. Utilisez ref pour obtenir des éléments

Parfois, nous devons manipuler directement le style des éléments DOM. Dans ce cas, nous pouvons utiliser ref pour obtenir l'élément.

<template>
  <div ref="myDiv">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    changeStyle () {
      const myDiv = this.$refs.myDiv
      myDiv.style.color = 'red'
      myDiv.style.fontSize = '20px'
      // 其他样式
    }
  }
}
</script>

De cette façon, nous pouvons modifier dynamiquement le style dans la méthode changeStyle.

3. Utilisez JavaScript pour définir les styles

Le moyen le plus direct consiste à utiliser JavaScript pour définir les styles. Récupérez simplement l’objet style de l’élément puis modifiez la valeur de l’attribut correspondant.

<template>
  <div id="myDiv">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    changeStyle () {
      const myDiv = document.getElementById('myDiv')
      myDiv.style.color = 'red'
      myDiv.style.fontSize = '20px'
      // 其他样式
    }
  }
}
</script>

Cette méthode ne nécessite pas d'écrire des règles de style supplémentaires, mais il convient de noter qu'il faut s'assurer du timing de modification du style pour éviter d'écraser les règles de style d'origine.

4. Styles globaux et styles locaux

Je pense que vous avez rencontré de tels doutes lorsque vous utilisez UniApp pour développer des projets : pourquoi certains styles prennent-ils effet sur d'autres pages après avoir été définis dans App.vue ?

En effet, les styles dans App.vue sont des styles globaux et seront partagés par toutes les pages. Si nous avons besoin de définir des styles locaux, nous pouvons les définir dans le fichier de style de la page correspondante.

Par exemple, nous définissons un style global dans App.vue :

<style>
/* 全局样式 */
body {
  background-color: #fafafa;
}
</style>

Ce style sera partagé par toutes les pages. Si vous devez modifier le style dans une certaine page, vous pouvez le définir dans le fichier de style de la page. .

<style>
/* 局部样式 */
body {
  background-color: #37474f;
}
</style>

De cette façon, le style du corps de la page remplacera le style du corps global.

Conclusion

Cet article présente certaines méthodes courantes de modification dynamique des styles, notamment l'utilisation des propriétés calculées de Vue, l'utilisation de ref pour obtenir des éléments, l'utilisation de JavaScript pour définir les styles, les styles globaux et locaux, etc. J'espère que cela sera utile à tous ceux qui sont confrontés à la situation de modification dynamique des styles dans le développement UniApp.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!