vue组件 iview_基于Vue和iView-UI组件的区域链接组件

vue组件 iview

iview区域 (iview-area)

An area-linkage-component bases on Vue and iView-UI components, data include China's provinces (municipalities), cities, counties and streets.

基于Vue和iView-UI组件的区域链接组件，数据包括中国的省(市)，市，县和街道。

View demo 查看演示 Download Source 下载源

安装 (install)

npm install iview-area --save

用 (use)

write follow code in main.js

在main.js中编写关注代码

import iviewArea from 'iview-area';
    import Vue from 'vue';
    Vue.use(iviewArea);

and then, you can use iview-area anywhere

然后，您可以在任何地方使用iview-area

<template>
    <al-selector v-model="res_s"/>
    <al-cascader v-model="res_c"/>
</template>
<script>
    export default {
        data () {
            return {
                res_s: [],
                res_c: []
            }
        }
    }
</script>

配置 (config)

选择器： (al-selector:)

props	note	type	default
value	Array for storing results, it is recommended to use the v-model	none	none
v-model	Array used to store the results, the data will update after selected	none	none
gutter	Set the distance between deferent level selectors, in px	String | Number	10
level	To show the level, if set to 2 shows the province, city and county, the level can be set to 0,1,2,3	String | Number	3
data-type	The type of the return value, 'all': city code and name, 'code': return only the code, 'name': only return the name	String	all
searchable	If it an search, add the attribute click the selector can enter the name search	Boolean	false
size	Selector size, the property with iview component select size attribute, optional small, large, default	String	default
default	The default display of data,please view the supplementary explanation under the table。	Array | null | undefined	none
placeholder	The text displayed when selector is not selected. if placeholder is a string, each selectors will use this placeholder text, if it is an array, set the selector placeholder according to the string of the corresponding position of the array. If the array element Less than the number of levels, it will use default array to set it.	Array | String	['请选择省', '请选择市', '请选择县区', '请选择街道']
not-found-text	The text displayed when there is no data, the rules is same as placeholder attributes	Array | String	['无匹配市', '无匹配县区', '无匹配街道']
disabled	Set to disable the entire cascade selector or a specific level，it can bedisabled，also be:disabled="true"or"false"，maybe an array just like[1, 3]，can also be a number about level	Boolean | Array | Number	false

道具	注意	类型	默认
值	用于存储结果的数组，建议使用v模型	没有	没有
模型	用于存储结果的数组，选择后数据将更新	没有	没有
排水沟	设置不同级别选择器之间的距离，以像素为单位	字串| 数	10
水平	要显示级别，如果设置为2表示省，市和县，则级别可以设置为0、1、2、3	字串| 数	3
数据类型	返回值的类型，“全部”：城市代码和名称，“代码”：仅返回代码，“名称”：仅返回名称	串	所有
可搜寻的	如果是搜索，则添加属性，单击选择器即可输入名称搜索	布尔型	假
尺寸	选择器大小，带有iview组件的属性选择大小属性，可选小，大，默认	串	默认
默认	数据的默认显示，请查看表下的补充说明。	数组| 空| 未定义	没有
占位符	未选择选择器时显示的文本。 如果占位符是字符串，则每个选择器都将使用该占位符文本；如果它是数组，则根据数组对应位置的字符串设置选择器占位符。 如果数组元素小于级别数，它将使用默认数组进行设置。	数组| 串	['请选择省'，'请选择市'，'请选择县区'，'请选择街道']
找不到文字	没有数据时显示的文本，规则与占位符属性相同	数组| 串	['无匹配市“，”无匹配县区“，”无匹配街道“]
残障人士	设置为禁用整个级联选择器或特定级别，可以disabled ，也可以是:disabled="true"或"false" ，也许是像[1, 3]的数组，也可以是有关级别的数字	布尔| 数组| 数	假

event	note	return value
on-change	Callback function after selection. value is the selected place array.	data

事件	注意	返回值
不断变化	选择后的回调功能。 value是选定的位置数组。	数据

提示： (tips：)

The data format of data-type:

数据类型的数据格式：

• data-type="all"：

  data-type =“ all”：

  [
      {
          code: '130000',
          name: '河北省'
      },
      {
          code: '130100',
          name: '石家庄市'
      }
  ]

  [
      {
          code: '130000',
          name: '河北省'
      },
      {
          code: '130100',
          name: '石家庄市'
      }
  ]

• data-type="name"：

  data-type =“ name”：

  ['河北省', '石家庄市']

• data-type="code"：

  data-type =“ code”：

  ['130000', '130100']

  ['130000', '130100']

default:

默认：

• Incoming name array, if the name of the place is not found or the local affiliation is wrong, then the first place in the level list is displayed. If the number of places in the array is less than the number of the level, it will display the first place in the list; and if the array is setted and it is not empty, it will always update the list of next level selector, and display the first place in the list.

  传入名称数组，如果找不到位置名称或本地隶属关系不正确，则会显示级别列表中的第一个位置。 如果数组中的位数少于级别数，它将显示列表中的第一位； 如果数组已设置且不为空，它将始终更新下一级选择器的列表，并在列表中显示第一位。

  ex: ['河北省', '长春市']  will show as  ['河北省', '石家庄市']

• Incoming code array, if the code was not find the corresponding place, or the place belongs to the wrong relationship, it will display the first place in the list, the same rules as name array.

  传入代码数组，如果找不到代码对应的位置，或者该位置属于错误的关系，它将显示列表中的第一位，其规则与名称数组相同。

  ex: ['130000', '120100']  will show as  ['河北省', '石家庄市']

  ex: ['130000', '120100']  will show as  ['河北省', '石家庄市']

• If incom an empty array[], orundefined, ornull，or no default，or setted default but there has no value, it will not show default value, and it will not update the list of next level after select a place, and will not set a default value.

  如果incom为空数组[]或undefined ，或者为null ，或者没有default ，或者设置了default但没有值，则不会显示默认值，并且不会在选择位置后更新下一级的列表，并且不会设置默认值。

  ex: :default="null"  :default="undefined"  :default="[]"

al-cascader： (al-cascader:)

props	note	type	default
value	Array for storing results, it is recommended to use the v-model	none	none
v-model	Array used to store the results, the data will update after selected	none	none
level	To show the level, if set to 2 shows the province, city and county, the level can be set to 0,1,2,3	String | Number	3
data-type	The type of the return value, 'all': city code and name, 'code': return only the code, 'name': only return the name	String	all
size	Selector size, the property with iview component select size attribute, optional small, large	String	none
placeholder	The text displayed when selector is not selected.	String	'请选择']
disabled	Set to disable the entire cascader	Boolean	false
render-format	Customize display format by sending a function to this property. It will be called after selection.	Function	label => label.join(' / ')
trigger	The way subset spreading. Optional value: click or hover	String	click

道具	注意	类型	默认
值	用于存储结果的数组，建议使用v模型	没有	没有
模型	用于存储结果的数组，选择后数据将更新	没有	没有
水平	要显示级别，如果设置为2表示省，市和县，则级别可以设置为0、1、2、3	字串| 数	3
数据类型	返回值的类型，“全部”：城市代码和名称，“代码”：仅返回代码，“名称”：仅返回名称	串	所有
尺寸	选择器大小，带有iview组件的属性选择大小属性，可选小，大	串	没有
占位符	未选择选择器时显示的文本。	串	'请选择']
残障人士	设置为禁用整个级联器	布尔型	假
渲染格式	通过向该属性发送函数来定制显示格式。 选择后将调用它。	功能	label => label.join(' / ')
触发	子集传播方式。 可选值： click或hover	串	点击

event	note	return value
on-change	Callback function after selection. value is the selected place array.	data

事件	注意	返回值
不断变化	选择后的回调功能。 value是选定的位置数组。	数据

翻译自: https://vuejsexamples.com/an-area-linkage-component-bases-on-vue-and-iview-ui-components/

vue组件 iview