Bagaimana untuk mengalih keluar bulatan di hadapan kotak berbilang pilihan dalam vue

Dalam Vue, kotak berbilang pilihan ialah kawalan bentuk yang sangat biasa, digunakan untuk membolehkan pengguna memilih satu atau lebih pilihan. Secara lalai, kotak semak akan mempunyai bulatan kecil di hadapannya untuk menunjukkan statusnya yang ditandai atau tidak ditanda. Walau bagaimanapun, dalam beberapa kes, kita mungkin mahu menyingkirkan bulatan kecil ini dan hanya mengekalkan gaya kotak pilihan itu sendiri. Artikel ini akan memperkenalkan cara mengalih keluar bulatan di hadapan kotak berbilang pilihan dalam Vue.

Kaedah 1: Gunakan gaya CSS

Kaedah paling mudah ialah menggunakan gaya CSS untuk mengalih keluar bulatan di hadapan kotak berbilang pilihan. Kita boleh menyembunyikan bulatan dengan menetapkan gaya untuk mencapai kesan penyingkiran.

<template>
  <div>
    <label>
      <input type="checkbox" class="checkbox"> 此处为多选框标签
    </label>
  </div>
</template>

<style>
  .checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #999;
    border-radius: 3px;
    width: 20px;
    height: 20px;
  }

  .checkbox:checked {
    background-color: #007aff;
    border-color: #007aff;
  }
</style>

Kami boleh menambah gaya berikut pada kelas kotak berbilang pilihan:

.checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #999;
  border-radius: 3px;
  width: 20px;
  height: 20px;
}

Di sini, kami menggunakan atribut appearance untuk menghalang kotak berbilang pilihan daripada memaparkan bulatan lalai. Kemudian, kami menentukan gaya jidar, saiz dan sudut bulat bagi kotak berbilang pilihan. Akhir sekali, kita boleh menggunakan pemilih CSS untuk memilih sama ada kotak berbilang pilihan dipilih dan menambah gaya yang sepadan, seperti warna latar belakang dan warna sempadan.

Kaedah 2: Gunakan perpustakaan komponen pihak ketiga

Jika anda tidak mahu menulis gaya CSS sendiri, anda juga boleh menggunakan beberapa pustaka komponen pihak ketiga untuk membantu anda mengalih keluar bulatan di hadapan kotak berbilang pilihan, seperti UI Elemen dan Ant Design Vue. Pustaka komponen ini telah menyelesaikan masalah ini untuk anda dan menyediakan banyak kawalan borang lain yang membolehkan anda melengkapkan reka bentuk borang yang lebih kompleks.

UI Elemen

Dalam UI Elemen, anda boleh mengalih keluar bulatan di hadapan kotak berbilang pilihan dengan menetapkan atribut border kepada false.

<template>
  <div>
    <el-checkbox v-model="checked" border=false>此处为多选框标签</el-checkbox>
  </div>
</template>

Kod di atas menggunakan komponen el-checkbox Tetapkan atribut border kepada false untuk mengalih keluar bulatan di hadapan kotak berbilang pilihan.

Ant Design Vue

Dalam Ant Design Vue, anda boleh mengalih keluar bulatan di hadapan kotak berbilang pilihan dengan menetapkan atribut checked dan bordered.

<template>
  <div>
    <a-checkbox v-model="checked" :bordered="false">此处为多选框标签</a-checkbox>
  </div>
</template>

Komponen a-checkbox digunakan dalam kod di atas Tetapkan atribut bordered kepada false untuk mengalih keluar bulatan di hadapan kotak berbilang pilihan.

Ringkasan

Dalam Vue, terdapat banyak cara untuk mengalih keluar bulatan di hadapan kotak berbilang pilihan, seperti menggunakan gaya CSS, menggunakan perpustakaan komponen pihak ketiga, dsb. Kaedah ini membolehkan anda mereka bentuk gaya bentuk secara bebas untuk menjadikan gaya halaman lebih bersatu dan cantik. Sudah tentu, kaedah mana yang hendak dipilih bergantung pada situasi tertentu Jika anda hanya mahu mengalih keluar bulatan kecil, menggunakan gaya CSS sudah memadai. Jika anda memerlukan kawalan borang yang lebih kompleks, anda boleh memilih untuk menggunakan pustaka komponen pihak ketiga untuk membantu anda melengkapkannya.

Atas ialah kandungan terperinci Bagaimana untuk mengalih keluar bulatan di hadapan kotak berbilang pilihan dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!