需求 与 功能
该功能实现了中国内的省市区的三级联动,基于 antd-vue 中的 Cascader 做的组件,支持原有的所有功能
效果展示
支持联想搜索
支持显示部分省份
例子(本例子是基于 antd 做的,在 element-ui,或者是 iview 中,同样适用)
<template><AreaCascader v-model="data1" /></template>
API
下面只列出了在本插件中二次封装添加的新字段,和部分原有 antd-vue 中 Cascader 部分默认的配置
具体的 antd-vue 中 Cascader api 配置请点击下面链接,查看官方文档
/components/cascader-cn/
注:
本插件相当于是对 antd-vue 组件 Cascader 的二次封装,支持 Cascader 原生组件的所有 api 功能适用于在表格中展示,或者是正常的页面循环但是如果想要调用原生 ui 组件的实例方法,通知 ref 绑定获取到的并不是 antd 的 Cascader 组件,如果想要调用 Cascader 的原生方法,需要传递 forward-ref 参数绑定<template><AreaCascader @forward-ref="Cascader"></AreaCascader></template><script>// 即可调用原生方法this.$refs.Cascader.blur();</script>
如 demo 例子可下载代码 执行 npm run demo:dev
npm 插件地址
/package/vue-area-cascader
源码 觉得不错的 动动小手点个 star 三克油
/li1164267803/vue-area-cascader
CSDN 博客
/weixin_44309374/article/details/112365552
demo 地址
/li1164267803/vue-area-cascader/tree/master/docs-src
编译 vue 插件的模板
想要自己编译 vue 插件的,可以直接使用我这个模板
vue 编译组件模板
package.json
修改 name 为你的组件名字
{"name": "组件名字"}
组件运行
npm installnpm run dev // 实时编译
组件打包发布
npm run buildnpm publish
查看 demo 例子
npm run demo:dev