使用mint

网友投稿 265 2023-02-18


使用mint

引用插件:饿了么的mint-ui组件中的picker功能,具体API可参照官网说明:http://mint-ui.github.io/docs/#/zh-cn2/picker

背景:项目需要做一个省份-城市-地区的选择级联效果,我从gayhub上找了一下,决定使用mint-ui的组件,因为各个功能都很全而且设计跟我们的项目风格类似。

具体实现:

通过阅读官网的实例,大概就能知道这个组件的用法:

在vue中写入组件:

我们可以看到,这个组件中传入的数据slots和当其改变是触发的事件:onValuesChange(),所以只要在使用该组件的父组件内注册slots和onValuesChange就可以实现了

以下是官网上的实例:

export default {

methods: {

onValuesChange(picker, values) {

if (values[0] > values[1]) {

picker.setSlotValue(1, values[0]);

}

}

},

data() {

return {

slots: [

{

flex: 1,

values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-0qxHUKE5', '2015-06'],

className: 'slot1',

textAlign: 'right'

}, {

divider: true,

content: '-',

className: 'slot2'

}, {

flex: 1,

values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],

className: 'slot3',

textAlign: 'left'

}

]

};

}

};

在实际操作中当我想使用picker来进行省份、城市、地区的选择时,发现最大的问题是搞不到符合该插件数据格式的数据,于是从百度上扒了一份省份、城市、地区数据之后写了一个函数对其进行了处理,在这里,共享给大家:

onProvinceChange(picker, values) {

this.province = picker.getValues()[0]

var cityArr = [];

for(var key in provinceCity[this.province]) {

cityArr.push(key);

}

this.slots2[0].values = cityArr;

},

onCityChange(picker, values) {

this.city = picker.getValues()[0]

var countyArr = [];

for(var key in provinceCity[this.province][this.city]) {

countyArr.push(key);

}

this.slots3[0].values = countyArr;

},

onCountyChange(picker, values) {

this.county = picker.getValues()[0]

},

三组数据以及三个方法如上,当对省份进行选择时,动态匹配相应的城市,同理对城市进行选择时动态匹配相应的地区,如此就可以qxHUKE实现三级联动的效果了


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:api接口管理文档模板(api数据接口文档)
下一篇:从零开始搭建一个react项目开发
相关文章

 发表评论

暂时没有评论,来抢沙发吧~