element china area data

Элемент пользовательского интерфейса Данные китайской провинции и города каскада

Демонстрационный эффект gif

Установить

npm install element-china-area-data -S

Онлайн-пример

импортное использование

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

1. provinceAndCityData Данные вторичной связи провинции и города, китайские иероглифы + код
2. regionData данные трехуровневой связи провинций и муниципалитетов
3. pcTextArr данные о связи провинций и городов, чисто китайские иероглифы
4. pcaTextArr данные о связи провинций и городов, чисто китайские иероглифы
5. codeToText — это большой объект, атрибут — это код города, а значение атрибута — китайские иероглифы. Например: codeToText['110000'] выводит北京市.

• Связь второго уровня провинций и муниципалитетов:

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

• Связь второго уровня провинции и города, чисто китайские иероглифы:

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

• Трехуровневая связь между провинциями и муниципалитетами

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

• Трехуровневая связь между провинциями и муниципалитетами, чисто китайские иероглифы

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

введение в сценарий

 < 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

0. Перейдите к сборке с помощью новых строительных лесов, поддерживающих модули CommonJS и ESM.
1. ПровинцияAndCityDataPlus/regionDataPlus/TextToCode была удалена. Используйте собственную функцию каскадного компонента, чтобы выбрать все.
2. CodeToText изменен на codeToText.
3. Добавлены объекты данных чисто китайских символов pcTextArr и pcaTextArr.
4. Гонконг, Макао и Тайвань больше не поддерживаются, используя новый источник данных https://github.com/modood/Administrative-divisions-of-China.

Старая версия v5.0.2

Адрес документа

Источник данных

Административное деление Китая

Разработать тестовые команды

• dev — запускает сервер разработки
• build — генерирует следующие пакеты: CommonJS (.cjs), ESM (.mjs) и IIFE (.iife.js). Имя пакета автоматически берется из свойства имени package.json.
• test — запускает vitest и запускает все тесты
• test:coverage — запускает vitest и запускает все тесты с отчетом о покрытии кода.
• lint:scripts — файлы lint .ts с eslint
• lint:styles — lint файлы .css и .scss со стилем
• format:scripts — форматирование файлов .ts, .html и .json с более красивыми
• format:styles — форматирование файлов .cs и .scss с помощью stylelint.
• format — отформатируйте все с помощью prettier и stylelint
• подготовить — скрипт для настройки хаски pre-commit Хука
• uninstall-husky — скрипт для удаления хаски из репозитория