分享一个好用的Vue3下拉框组件

今天我们主要分享一个非常实用的下拉框组件

在平常的开发中, 我们经常会写到省市区的联动, 每回都得监听change事件非常的繁琐, 今天分享的组件可以帮助我们告别这样的痛苦

https://terryz.github.io/docs-vue3/cn/region/select.html
首先, 我们先来安装一下依赖

npm i v-region

安装完成之后, 我们引入下组件

就这样, 页面就会呈现4的下拉框

到这里组件呈现是没问题了, 接下来, 我们绑定响应式数据

很好奇了, 这个组件绑定的数据大概是什么样子的呢?

我们监听一下这个数据的变化, 我们看看返回的值是什么

返回的是这样数据结构的对象

province: 省
city: 市
area: 区/县
town: 村镇级别
该组件身上有一个change事件, 返回的数据结构是这样的

也是非常好组数据的, 如果有的需求说, 我们不需要显示村镇级别的, 那也好说, 可以使用3级的那个组件, 或者传一个布尔类型的props给组件即可

这样就剩3个了

该组件在平常的开发中用的地方还是非常多的

今天我们就分享到这里

我们下期见

声明:文中观点不代表本站立场。本文传送门:https://eyangzhen.com/422227.html

联系我们
联系我们
分享本页
返回顶部