element china area data

Element-UI-Kaskadendaten für chinesische Provinzen und Städte

Demonstrationseffekt-GIF

Installieren

npm install element-china-area-data -S

Online-Beispiel

Importverwendung

 import {
  provinceAndCityData ,
  pcTextArr ,
  regionData ,
  pcaTextArr ,
  codeToText ,
} from "element-china-area-data" ;

1. provinceAndCityData Sekundärverknüpfungsdaten für Provinz und Stadt, chinesische Schriftzeichen + Code
2. regionData dreistufige Verknüpfungsdaten von Provinzen und Gemeinden
3. pcTextArr Provinz- und Stadtverknüpfungsdaten, reine chinesische Schriftzeichen
4. pcaTextArr Provinz- und Stadtverknüpfungsdaten, reine chinesische Schriftzeichen
5. codeToText ist ein großes Objekt, das Attribut ist die Ortsvorwahl und der Attributwert sind chinesische Zeichen. Beispiel: codeToText['110000'] gibt北京市aus

• Provinz- und kommunale Verknüpfung der zweiten Ebene:

   < template >
    < div id = "app" >
      < el-cascader
        size = "large"
        : options = "provinceAndCityData"
        v-model = "selectedOptions" >
      </ el-cascader >
    </ div >
  </ template >
  
  < script >
    import { provinceAndCityData } from 'element-china-area-data'
    export default {
      data ( ) {
        return {
          provinceAndCityData ,
          selectedOptions : [ ]
        }
      } ,
    }
  < / script>

• Provinz- und Stadtebene-2-Verknüpfung, reine chinesische Schriftzeichen:

   < template >
    < div id = "app" >
      < el-cascader
        size = "large"
        : options = "pcTextArr"
        v-model = "selectedOptions" >
      </ el-cascader >
    </ div >
  </ template >
  
  < script >
    import { pcTextArr } from 'element-china-area-data'
    export default {
      data ( ) {
        return {
          pcTextArr ,
          selectedOptions : [ ]
        }
      } ,
    }
  < / script>

• Dreistufige Verbindung zwischen Provinzen und Gemeinden

   < template >
    < div id = "app" >
      < el-cascader
        size = "large"
        : options = "regionData"
        v-model = "selectedOptions" >
      </ el-cascader >
    </ div >
  </ template >
  
  < script >
    import { regionData } from 'element-china-area-data'
    export default {
      data ( ) {
        return {
          regionData ,
          selectedOptions : [ ]
        }
      } ,
    }
  < / script>

• Dreistufige Verbindung zwischen Provinzen und Gemeinden, reine chinesische Schriftzeichen

   < template >
    < div id = "app" >
      < el-cascader
        size = "large"
        : options = "pcaTextArr"
        v-model = "selectedOptions" >
      </ el-cascader >
    </ div >
  </ template >
  
  < script >
    import { pcaTextArr } from 'element-china-area-data'
    export default {
      data ( ) {
        return {
          pcaTextArr ,
          selectedOptions : [ ]
        }
      } ,
    }
  < / script>

Drehbucheinführung

 < script src =" https://unpkg.com/[email protected]/dist/element-china-area-data.iife.js " > </ script >
< script >
  new Vue ( {
    el : "#app" ,
    data : function ( ) {
      return {
        codeToText : elementChinaAreaData . codeToText ,
        provinceAndCityData : elementChinaAreaData . provinceAndCityData ,
        pcTextArr : elementChinaAreaData . pcTextArr ,
        regionData : elementChinaAreaData . regionData ,
        pcaTextArr : elementChinaAreaData . pcaTextArr ,
        selectedOptions1 : [ "11" , "110101" ] ,
        selectedOptions2 : [ "12" , "1201" , "120101" ] ,
        selectedOptions3 : [ "北京市" , "朝阳区" ] ,
        selectedOptions4 : [ "北京市" , "市辖区" , "朝阳区" ] ,
      } ;
    } ,
  } ) ;
</ script > 

v6-Änderungen

0. Wechseln Sie zum Erstellen mit neuem Gerüst, das sowohl CommonJS- als auch ESM-Module unterstützt
1. ProvinceAndCityDataPlus/regionDataPlus/TextToCode wurde entfernt. Bitte verwenden Sie die eigene Funktion der Kaskadenkomponente, um alle auszuwählen.
2. CodeToText wird in codeToText geändert
3. Datenobjekte für reine chinesische Zeichen pcTextArr und pcaTextArr hinzugefügt
4. Hongkong, Macao und Taiwan werden nicht mehr unterstützt, wobei die neue Datenquelle https://github.com/modood/Administrative-divisions-of-China verwendet wird

Alte Version v5.0.2

Dokumentenadresse

Datenquelle

Verwaltungsgliederung-von-China

Testbefehle entwickeln

• dev – startet den Dev-Server
• build – generiert die folgenden Bundles: CommonJS (.cjs), ESM (.mjs) und IIFE (.iife.js). Der Name des Bundles wird automatisch aus der Namenseigenschaft package.json übernommen
• test – startet vitest und führt alle Tests aus
• test:coverage – startet vitest und führt alle Tests mit Code-Coverage-Bericht aus
• lint:scripts – lint .ts-Dateien mit eslint
• lint:styles – Lint .css- und .scss-Dateien mit stylelint
• format:scripts – Formatieren Sie .ts-, .html- und .json-Dateien mit Prettier
• format:styles – Formatieren Sie .cs- und .scss-Dateien mit stylelint
• Format – Formatieren Sie alles mit Prettier und Stylelint
• Prepare – Skript zum Einrichten des Husky-Pre-Commit-Hooks
• uninstall-husky – Skript zum Entfernen von Husky aus dem Repository