Comments (3)
重构思路
Vue2 不再支持双绑后,整个代码逻辑都要改,原来的做法已经没办法改了。但是有一个新的特性:v-model
支持设置在组件上。
所以现在提供另外一种使用方式:提供 region-picker
和 region-picker-item
两个组件,其中 region-picker-item
本身是 select
标签,因此可以使用 v-model,那么新的使用方法如下
<region-picker :data="data">
<region-picker-item field="province" v-model="province" placeholder="fuck"></region-picker-item>
<region-picker-item field="city" v-model="city"></region-picker-item>
<region-picker-item field="district" v-model="district"></region-picker-item>
</region-picker>
只需要指定 field 是省市区的哪个部分,剩下的都与 select 标签属性一致。因此不再需要之前的 two-select 和 placeholder 属性,而且还能方便自定义模板、实现上的逻辑也会更加简单。
使用方法
与之前一致
import RegionPicker from 'vue-region-picker';
import RegionData from 'vue-region-picker/data';
import Vue from 'vue';
Vue.use(RegionPicker, {
region: RegionData
});
或者引入组件
import { RegionPicker, RegionPickerItem } from 'vue-region-picker';
// vue file
export default {
components: [ RegionPicker, RegionPickerItem ]
}
from vue-region-picker.
兼容 1 和 2 看起来不靠谱,两者折中就没法很好的发挥每个版本的特性,因此将维护两个版本。2.x 使用 vue1,3.x 使用 vue2 并用上面的新方式 🌚
from vue-region-picker.
地区数据用 https://github.com/airyland/china-area-data 本仓库里将不再维护地区数据
from vue-region-picker.
Related Issues (20)
- 直辖市的县没内容,内容都跑到市区里面去了 HOT 9
- 改成 vue 的插件
- remove data option
- 微信端选择'区'时的问题 HOT 5
- 可以输出地区的 id 吗? HOT 2
- 这个插件怎么在elementUI里使用? HOT 1
- 请教一个问题 HOT 24
- 请问一下,我想改变些选择框的样式,该如何修改呢 HOT 4
- Vue2里警告 HOT 1
- select无法显示初始化的值 HOT 1
- 如何使用自己 json 文件? HOT 5
- vue2 bug~
- 1.3.0
- 样式问题
- vue2.0报了个警告
- Vue2.0 warn
- 2.0 release HOT 2
- 如何让市区不自动选择? HOT 5
- 当设置了:completed="true"的时候,初始化省市不成功 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-region-picker.