uniapp mengubah suai gaya dalam fungsi kaedah

Dalam pembangunan uniapp, kita selalunya perlu mengubah suai gaya halaman secara dinamik, dan salah satu kaedah biasa ialah menukar gaya dalam fungsi kaedah. Dalam artikel ini kami akan menerangkan cara melaksanakan kaedah ini.

Secara umumnya, kami boleh mengubah suai gaya dengan menggunakan kaedah terbina dalam yang disediakan oleh uni-app dalam fungsi. Sebagai contoh, kita boleh menggunakan uni.$refs dalam fungsi untuk mendapatkan komponen tertentu pada halaman. Kemudian, kita boleh mengubah suai gaya secara dinamik melalui sifat komponen, seperti style dan class.

Mari kami menggunakan contoh khusus untuk membantu anda memahami proses ini dengan lebih baik. Katakan kita mempunyai halaman log masuk untuk program kecil, di mana gaya susun atur halaman adalah seperti berikut:

<template>
  <view>
    <form>
      <input type="text" placeholder="用户名" />
      <input type="password" placeholder="密码" />
      <button>登录</button>
    </form>
  </view>
</template>

<style scoped>
  form {
    width: 80%;
    margin: 10vw;
    padding: 5vw;
    background-color: #fff;
  }
  input {
    margin-bottom: 3vw;
    width: 100%;
    height: 10vw;
    border: 0;
    border-radius: 3vw;
    background-color: #f2f2f2;
  }
  button {
    width: 100%;
    height: 12vw;
    border: 0;
    border-radius: 3vw;
    color: #fff;
    background-color: #007aff;
    font-size: 4.5vw;
  }
</style>

Mari kita anggap bahawa kita kini perlu melaksanakan keperluan berikut: apabila pengguna menyerahkan borang, jika kotak input dalam borang tidak diisi, anda perlu menukar warna sempadan bawahnya kepada merah. Khususnya, kita perlu menukar nilai atribut placeholder kepada 未填写 dan menambah gaya border-bottom-color: red pada kotak input.

Untuk mencapai keperluan ini, kita perlu menggunakan kaedah uni.$refs dahulu untuk mendapatkan komponen kotak input, dan kemudian kita perlu menukar gaya komponen.

<template>
  <view>
    <form>
      <input ref="username" type="text" placeholder="用户名" />
      <input ref="password" type="password" placeholder="密码" />
      <button @click="login">登录</button>
    </form>
  </view>
</template>

<script>
export default {
  methods: {
    login() {
      if (!this.$refs.username.value.trim()) {
        this.$refs.username.placeholder = '未填写'
        this.$refs.username.style.borderBottomColor = 'red'
      }

      if (!this.$refs.password.value.trim()) {
        this.$refs.password.placeholder = '未填写'
        this.$refs.password.style.borderBottomColor = 'red'
      }
    },
  },
}
</script>

Dalam kod di atas, kami menambahkan atribut ref pada setiap komponen kotak input untuk mendapatkan rujukan kepada komponen tersebut. Dalam fungsi log masuk, kami menentukan sama ada kandungan kotak input kosong Jika ia kosong, kami mengubah suai nilai atribut placeholder kepada 未填写 dan menambah gaya border-bottom-color: red pada kotak input.

Perhatikan bahawa kami menggunakan $refs. bukannya refs. Ini kerana dalam apl uni, $refs ialah objek terbina dalam yang boleh mengakses semua objek dengan atribut ref.

Ringkasnya, melalui artikel ini, kami mempelajari cara mengubah suai gaya dalam fungsi kaedah dalam aplikasi uni. Sudah tentu, ini hanyalah salah satu kaedah pelaksanaan, dan terdapat banyak kaedah lain, seperti menggunakan kaedah this.setData() dalam fungsi untuk menukar keadaan data, menggunakan pemilih kelas pseudo CSS dan sebagainya. Dengan menguasai kemahiran ini, kami boleh menjadi lebih fleksibel dalam menyesuaikan gaya halaman kami untuk memenuhi keperluan pengguna.

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