cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk melaksanakan pemilih bandar menggunakan Vue?

Bagaimana untuk melaksanakan pemilih bandar menggunakan Vue?

WBOY
WBOYasal
2023-06-25 13:43:261311semak imbas

Dalam beberapa tahun kebelakangan ini, teknologi bahagian hadapan sentiasa dikemas kini, dan kemunculan rangka kerja bahagian hadapan juga telah meningkatkan kecekapan pembangunan harian kami. Di bawah rangka kerja Vue.js, kami boleh melaksanakan banyak komponen berfungsi yang biasa digunakan dengan mudah, seperti pemilih bandar.

Jadi, bagaimana untuk melaksanakan pemilih bandar dalam Vue? Artikel ini akan berkongsi dengan anda kaedah pelaksanaan yang mudah.

1. Penyediaan data

Sebelum melaksanakan pemilih bandar, kita perlu menyediakan data bandar. Memandangkan terdapat banyak data bandar, kami perlu menggunakan format data JSON untuk menyimpannya. Di sini, saya menyediakan fail data JSON yang boleh anda temui dalam talian atau dalam sumber lain.

Sampel fail data bandar:

[
  {
    "label": "北京市",
    "value": "110000",
    "children": [
      {
        "label": "北京市",
        "value": "110100",
        "children": [
          {
            "label": "东城区",
            "value": "110101"
          },
          {
            "label": "西城区",
            "value": "110102"
          },
          {
            "label": "崇文区",
            "value": "110103"
          },
          ...
        ]
      }
    ]
  },
  {
    "label": "上海市",
    "value": "310000",
    "children": [
      {
        "label": "上海市",
        "value": "310100",
        "children": [
          {
            "label": "黄浦区",
            "value": "310101"
          },
          {
            "label": "徐汇区",
            "value": "310104"
          },
          {
            "label": "长宁区",
            "value": "310105"
          },
          ...
        ]
      }
    ]
  },
  ...
]

2. Pelaksanaan komponen pemilih

2.1 Memperkenalkan data bandar

Kami perlu memperkenalkan data bandar dalam bahagian skrip komponen:

<script>
  import cityData from './city-data.json';

  export default {
    // 组件属性和方法
  }
</script>

2.2 Tentukan komponen pemilih

pemilihan Bekas boleh digunakan di beberapa tempat dan kita boleh mentakrifkannya sebagai komponen. Dalam komponen ini, kita perlu menentukan beberapa sifat dan kaedah.

Atribut:
  • modelNilai: nilai bandar yang dipilih sekarang;
  • baca sahaja: Sama ada pemilih adalah baca sahaja.
  • Kaedah:
  • handleChangeCity: kaedah panggil balik selepas memilih bandar. 
<template>
  <div class="city-picker">
    <input type="text" :readonly="readonly" :disabled="disabled" :placeholder="placeholder" :style="{width: width}" v-model="selectedCity">
    <!-- 其他相关 DOM 结构 -->
  </div>
</template>

<script>
  import cityData from './city-data.json';

  export default {
    props: {
      modelValue: {
        type: String,
        default: ''
      },
      placeholder: {
        type: String,
        default: '请选择城市'
      },
      width: {
        type: String,
        default: '200px'
      },
      disabled: {
        type: Boolean,
        default: false
      },
      readonly: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        selectedCity: this.modelValue,
        // 城市数据
        cityData: []
      }
    },
    methods: {
      handleChangeCity(value) {
        this.selectedCity = value;
        // 触发父组件的 onChange 事件
        this.$emit('onChange', value);
      }
    },
    mounted() {
      this.cityData = cityData;
    }
  }
</script>

2.3 Memaparkan data bandar

    Memaparkan data bandar dalam pemilih memerlukan pemaparan rekursif. Semasa rendering, kita perlu menentukan fungsi untuk melintasi data bandar setiap lapisan secara rekursif. Memandangkan data bandar mungkin mempunyai pelbagai peringkat, kita perlu melintasinya secara rekursif. Dalam pelaksanaan kod, kami menggunakan templat yang ditakrifkan dalam komponen Vue untuk pemaparan. 
  • <template>
  <div>
    <!-- 递归渲染省份数据 -->
    <template v-for="province in cityData">
      <div :key="province.value" class="province">
        <div @click="handleShowCity(province)">{{ province.label }}</div>
        <template v-if="province.children && province.children.length > 0">
          <div v-show="province.showCity">
            <!-- 递归渲染城市和区县数据 -->
            <template v-for="city in province.children">
              <div :key="city.value" class="city">
                <div @click="handleShowDistrict(city)">{{ city.label }}</div>
                <template v-if="city.children && city.children.length > 0">
                  <div v-show="city.showDistrict">
                    <div v-for="district in city.children" :key="district.value">{{ district.label }}</div>
                  </div>
                </template>
              </div>
            </template>
          </div>
        </template>
      </div>
    </template>
  </div>
</template>

<script>
  import cityData from './city-data.json';

  export default {
    props: {
      modelValue: {
        type: String,
        default: ''
      },
      placeholder: {
        type: String,
        default: '请选择城市'
      },
      width: {
        type: String,
        default: '200px'
      },
      disabled: {
        type: Boolean,
        default: false
      },
      readonly: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        selectedCity: this.modelValue,
        // 城市数据
        cityData: []
      }
    },
    methods: {
      handleShowCity(province) {
        // 点击省份时，展开或关闭城市数据
        province.showCity = !province.showCity;
      },
      handleShowDistrict(city) {
        // 点击城市时，展开或关闭区县数据
        city.showDistrict = !city.showDistrict;
        // 选中城市后，调用 handleChangeCity 方法
        this.handleChangeCity(city.label);
      },
      handleChangeCity(value) {
        this.selectedCity = value;
        // 触发父组件的 onChange 事件
        this.$emit('onChange', value);
      },
      // 递归遍历城市数据，渲染出每一个层级的城市数据
      renderCity(cityData) {
        cityData.forEach(city => {
          city.showDistrict = false;
          if (city.children && city.children.length > 0) {
            this.renderCity(city.children);
            city.showCity = false;
          }
        })
      }
    },
    mounted() {
      this.cityData = cityData;
      // 渲染城市数据
      this.renderCity(this.cityData);
    }
  }
</script>
    • 2.4 Kod komponen pemilih lengkap

Kod komponen pemilih bandar terakhir adalah seperti berikut:

<template>
  <div class="city-picker">
    <input type="text" :readonly="readonly" :disabled="disabled" :placeholder="placeholder" :style="{width: width}" v-model="selectedCity">
    <!-- 城市选择器弹出框 -->
    <div class="city-picker-modal" v-show="showModal">
      <div class="city-picker-header">
        <span>请选择城市</span>
        <span class="close-icon" @click="handleCloseModal">&times;</span>
      </div>
      <div class="city-picker-body">
        <!-- 渲染城市选择器树形结构 -->
        <div class="city-picker-tree">
          <div class="top-tab">
            <div
              :class="{ active: (activeTab === 'province') }"
              @click="handleToggleTab('province')"
            >省份</div>
            <div
              :class="{ active: (activeTab === 'city') }"
              @click="handleToggleTab('city')"
            >城市</div>
            <div
              :class="{ active: (activeTab === 'district') }"
              @click="handleToggleTab('district')"
            >区县</div>
          </div>
          <div class="tab-content">
            <template v-if="activeTab === 'province'">
              <!-- 渲染省份数据 -->
              <template v-for="province in cityData">
                <div :key="province.value" class="province">
                  <div @click="handleShowCity(province)">{{ province.label }}</div>
                  <template v-if="province.children && province.children.length > 0">
                    <div v-show="province.showCity">
                      <!-- 渲染城市数据 -->
                      <template v-for="city in province.children">
                        <div :key="city.value" class="city">
                          <div @click="handleShowDistrict(city)">{{ city.label }}</div>
                          <template v-if="city.children && city.children.length > 0">
                            <div v-show="city.showDistrict">
                              <!-- 渲染区县数据 -->
                              <div v-for="district in city.children" :key="district.value">{{ district.label }}</div>
                            </div>
                          </template>
                        </div>
                      </template>
                    </div>
                  </template>
                </div>
              </template>
            </template>
            <template v-else-if="activeTab === 'city'">
              <!-- 渲染城市数据 -->
              <template v-for="province in cityData">
                <template v-if="province.children && province.children.length > 0">
                  <template v-for="city in province.children">
                    <div :key="city.value" class="city">{{ city.label }}</div>
                  </template>
                </template>
              </template>
            </template>
            <template v-else-if="activeTab === 'district'">
              <!-- 渲染区县数据 -->
              <template v-for="province in cityData">
                <template v-if="province.children && province.children.length > 0">
                  <template v-for="city in province.children">
                    <template v-if="city.children && city.children.length > 0">
                      <template v-for="district in city.children">
                        <div :key="district.value">{{ district.label }}</div>
                      </template>
                    </template>
                  </template>
                </template>
              </template>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import cityData from './city-data.json';

  export default {
    props: {
      modelValue: {
        type: String,
        default: ''
      },
      placeholder: {
        type: String,
        default: '请选择城市'
      },
      width: {
        type: String,
        default: '200px'
      },
      disabled: {
        type: Boolean,
        default: false
      },
      readonly: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        // 当前选中的城市
        selectedCity: this.modelValue,
        // 城市数据
        cityData: [],
        // 显示弹出框标志位
        showModal: false,
        // 当前显示的 tab 标签页
        activeTab: 'province'
      }
    },
    methods: {
      // 选中省份时，展开或关闭城市数据
      handleShowCity(province) {
        province.showCity = !province.showCity;
        this.activeTab = (province.showCity ? 'city' : 'province');
      },
      // 选中城市时，展开或关闭区县数据，并选中城市
      handleShowDistrict(city) {
        city.showDistrict = !city.showDistrict;
        this.activeTab = (city.showDistrict ? 'district' : 'city');
        this.selectedCity = city.label;
        // 触发父组件 onChange 事件
        this.$emit('onChange', city.label);
        // 关闭弹出层
        this.showModal = false;
      },
      // 切换 tab 标签页
      handleToggleTab(tab) {
        this.activeTab = tab;
      },
      // 关闭城市选择器弹窗
      handleCloseModal() {
        this.showModal = false;
      }
    },
    mounted() {
      this.cityData = cityData;
      // 递归渲染城市数据，设置状态
      this.cityData.forEach((province) => {
        province.showCity = false;
        if (province.children && province.children.length > 0) {
          province.children.forEach((city) => {
            city.showDistrict = false;
          })
        }
      })
    }
  }
</script>

3 Menggunakan pemilih bandar

Menggunakan komponen pemilih bandar dalam projek Vue adalah sangat mudah, hanya perlu Memperkenalkan bandar. komponen pemilih ke dalam halaman yang anda gunakan, dan kemudian masukkan parameter yang sepadan apabila menggunakannya. Berikut ialah contoh kod: 

<template>
  <div>
    <CityPicker
      v-model="city"
      :width="200"
    ></CityPicker>
  </div>
</template>

<script>
  import CityPicker from './components/CityPicker';

  export default {
    components: {
      CityPicker
    },
    data() {
      return {
        city: ''
      }
    },
    methods: {
      handleChangeCity(value) {
        console.log('选中的城市为：', value);
      }
    }
  }
</script>

Pada ketika ini, kami sudah boleh menggunakan komponen pemilih bandar dalam aplikasi Vue kami. Kod komponen pemilih bandar ini sangat mudah, tetapi ia melaksanakan fungsi pemilihan bandar asas dan boleh dikembangkan dan dioptimumkan mengikut keperluan anda sendiri.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan pemilih bandar menggunakan Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Penjelasan terperinci tentang komponen keep-alive dalam Vue dan senario penggunaannyaArtikel seterusnya：Penjelasan terperinci tentang komponen keep-alive dalam Vue dan senario penggunaannya

Artikel berkaitan

Lihat lagi