element china area data

Element UI 中国の省と都市のカスケード データ

デモンストレーションエフェクトGIF

インストール

npm install element-china-area-data -S

オンラインの例

輸入使用

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

1. 州と市provinceAndCityData町村二次連携データ、漢字＋コード
2. regionData都道府県・市区町村の3階層連携データ
3. pcTextArr省市連携データ、純漢字
4. pcaTextArr省市連携データ、純漢字
5. codeToTextは大きなオブジェクトで、属性は市外局番、属性値は中国語の文字です。たとえば、 codeToText['110000']北京市を出力します。

• 州と市の第 2 レベルの連携:

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

• 省と市のレベル 2 のリンク、純粋な中国語の文字:

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

• 都道府県・市区町村間の3階層連携、純漢字

   < 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. すべてを選択するには、カスケード コンポーネントの独自の関数を使用してください。
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 name プロパティから自動的に取得されます。
• test - vitest を開始し、すべてのテストを実行します
• test:coverage - vitest を開始し、コード カバレッジ レポートを使用してすべてのテストを実行します。
• lint:scripts - eslint を使用した lint .ts ファイル
• lint:styles - stylelint を含む lint .css および .scss ファイル
• format:scripts - .ts、.html、.json ファイルをよりきれいにフォーマットします
• format:styles - stylelint を使用して .cs および .scss ファイルをフォーマットします
• format - すべてを Prettyer と stylelint でフォーマットします
• prepare - ハスキーなコミット前フックをセットアップするためのスクリプト
• uninstall-husky - リポジトリから husky を削除するためのスクリプト