uniapp mengubah suai gaya secara dinamik

Kata Pengantar

Dalam UniApp, kita selalunya perlu mengubah suai gaya secara dinamik, seperti menukar mod siang dan malam, melaraskan saiz fon, dsb. Pada masa ini kita perlu menguasai beberapa kemahiran mengubah suai gaya secara dinamik. Artikel ini akan memperkenalkan beberapa kaedah yang biasa digunakan untuk membantu anda mengawal perubahan gaya dengan lebih baik.

1. Gunakan sifat terkira Vue

Sifat yang dikira dalam Vue boleh mengira nilai sifat baharu secara dinamik berdasarkan pembolehubah bersandar, jadi kami boleh menggunakannya untuk mengubah suai gaya secara dinamik.

Sebagai contoh, kita boleh mentakrifkan pembolehubah isNight dalam data untuk mengawal mod siang dan malam, dan kemudian mengira gaya yang sepadan dalam pengiraan:

<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>

Dengan cara ini, selagi pembolehubah isNight perubahan, Gaya boleh dikemas kini secara automatik.

2. Gunakan ref untuk mendapatkan elemen

Kadangkala, kita perlu memanipulasi secara langsung gaya elemen DOM, kita boleh menggunakan ref untuk mendapatkan elemen.

<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>

Dengan cara ini, kita boleh mengubah suai gaya secara dinamik dalam kaedah changeStyle.

3. Gunakan JavaScript untuk menetapkan gaya

Kaedah paling langsung ialah menggunakan JavaScript untuk menetapkan gaya. Hanya dapatkan objek gaya elemen dan kemudian ubah suai nilai atribut yang sepadan.

<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>

Kaedah ini tidak memerlukan penulisan peraturan gaya tambahan, tetapi perlu diingatkan bahawa kita mesti memastikan masa mengubah suai gaya untuk mengelak daripada menimpa peraturan gaya asal.

4. Gaya global dan gaya tempatan

Saya percaya anda telah menghadapi keraguan sedemikian apabila menggunakan UniApp untuk membangunkan projek: Mengapakah sesetengah gaya muncul di halaman lain selepas ia ditakrifkan dalam App.vue? Bolehkah ia berkesan?

Ini kerana gaya dalam App.vue adalah gaya global dan akan dikongsi oleh semua halaman. Jika kita perlu menentukan gaya tempatan, kita boleh mentakrifkannya dalam fail gaya halaman yang sepadan.

Sebagai contoh, kami mentakrifkan gaya global dalam App.vue:

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

Gaya ini akan dikongsi oleh semua halaman Jika anda perlu mengubah suai gaya dalam halaman tertentu, anda boleh mengubah suai gaya dalam halaman yang ditakrifkan dalam fail.

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

Dengan cara ini, gaya badan halaman akan mengatasi gaya badan global.

Kesimpulan

Artikel ini memperkenalkan beberapa kaedah biasa untuk mengubah suai gaya secara dinamik, termasuk menggunakan sifat terkira Vue, menggunakan ref untuk mendapatkan elemen, menggunakan JavaScript untuk menetapkan gaya, gaya global dan gaya tempatan, dsb. Saya harap ia akan membantu semua orang yang menghadapi situasi mengubah suai gaya secara dinamik dalam pembangunan UniApp.

Atas ialah kandungan terperinci uniapp mengubah suai gaya secara dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!