element ui area

منطقة عنصر واجهة المستخدم

محدد التقسيم الإداري في الصين يعتمد على Vue وElementUI

ثَبَّتَ

npm install element-ui-area -S

الاستخدام

يعتمد المشروع على Element-UI، عليك تقديمه أولاً

يقدم

 import AreaComponent from 'element-ui-area'
Vue . use ( AreaComponent , { } )

// or
import { Cascader , Select } from 'element-ui-area'
Vue . use ( Cascader , { } )
Vue . use ( Select , { } ) 

عناصر التكوين

ملكية	يكتب	يوضح	القيمة الافتراضية
مصدر البيانات	هدف	مصدر البيانات	-

يستخدم

المتتالية

< template >
    < area-cascader v-model = " value " :level = " 3 " @change = " onChange " />
</ template >
< script >
export default {
    data () {
        return {
            value : []
        }
    },
    methods : {
        onChange ( val , text ) {
            console . log (val)
            console . log (text) // 地区中文
        }
    }
}
</ script >

يختار

< template >
    < div style = " width : 600 px ; margin : 10 px auto ; " >
      < area-select v-model = " value " :level = " 1 " />
      < area-select v-model = " value1 " :level = " 2 " />
      < area-select v-model = " value2 " :level = " 3 " />
    </ div >
</ template >
< script >
export default {
    data () {
        return {
            value : [],
            value1 : [],
            value2 : []
        }
    }
}
</ script >

عناصر التكوين

المنطقة المتتالية

ملكية	يكتب	يوضح	القيمة الافتراضية
قيمة	خيط	قيمة ملزمة	[ ]
مستوى	رقم	المستوى، لأسباب تتعلق بالبيانات، يدعم حاليًا ما يصل إلى ثلاثة مستويات فقط	3
عاجز	منطقية	سواء لتعطيل	خطأ شنيع
مقاس	خيط	مقاس	صغير
noMatchText	خيط	النص الذي سيتم عرضه في حالة عدم وجود تطابق	لا توجد بيانات مطابقة
noDataText	خيط	يتم عرض النص في حالة عدم وجود بيانات	لا توجد بيانات
واضح	منطقية	سواء لدعم المقاصة	حقيقي
العنصر النائب	خيط	العنصر النائب	الرجاء تحديد المنطقة
مباشر	منطقية	ما إذا كان سيتم تشغيل حدث التغيير على الفور	حقيقي
مصدر البيانات	هدف	مصدر البيانات	رمز قصير مكون من 6 أرقام للتقسيم الإداري

تحديد المنطقة

ملكية	يكتب	يوضح	القيمة الافتراضية
قيمة	خيط	قيمة ملزمة	[ ]
مستوى	رقم	المستوى، لأسباب تتعلق بالبيانات، يدعم حاليًا ما يصل إلى ثلاثة مستويات فقط	3
عاجز	منطقية	سواء لتعطيل	خطأ شنيع
مقاس	خيط	مقاس	صغير
مزراب	رقم	تباعد	10
noMatchText	خيط	النص الذي سيتم عرضه في حالة عدم وجود تطابق	لا توجد بيانات مطابقة
noDataText	خيط	يتم عرض النص في حالة عدم وجود بيانات	لا توجد بيانات
واضح	منطقية	سواء لدعم المقاصة	حقيقي
العنصر النائب	صفيف	العنصر النائب	['يُرجى اختيار مقاطعة'، 'يُرجى اختيار مدينة'، 'يُرجى اختيار منطقة'، 'يُرجى اختيار شارع']
قابل للتصفية	منطقية	سواء لدعم البحث	خطأ شنيع
مباشر	منطقية	ما إذا كان سيتم تشغيل حدث التغيير على الفور	حقيقي
مصدر البيانات	هدف	مصدر البيانات	رمز قصير مكون من 6 أرقام للتقسيم الإداري

حدث

اسم	يوضح	المعلمة
يتغير	سيتم تشغيل حدث تغيير القيمة المحدد مرة واحدة أثناء التهيئة.	القيمة المتغيرة، الاسم الصيني
طمس	تفقد التركيز	كائن الحدث
ركز	ركز	كائن الحدث

مثال على تنسيق مصدر البيانات

{
	"86" : {
		"110000" : "北京市" ,
	},
	"110000" : {
		"110100" : "市辖区"
	},
	"110100" : {
		"110101" : "东城区" ,
		"110102" : "西城区" ,
		"110105" : "朝阳区" ,
		"110106" : "丰台区" ,
		"110107" : "石景山区" ,
		"110108" : "海淀区" ,
		"110109" : "门头沟区" ,
		"110111" : "房山区" ,
		"110112" : "通州区" ,
		"110113" : "顺义区" ,
		"110114" : "昌平区" ,
		"110115" : "大兴区" ,
		"110116" : "怀柔区" ,
		"110117" : "平谷区" ,
		"110118" : "密云区" ,
		"110119" : "延庆区"
    }
}