Coder Social home page Coder Social logo

qingwei-li / vue-region-picker Goto Github PK

View Code? Open in Web Editor NEW
158.0 8.0 34.0 259 KB

[DEPRECATED]

Home Page: http://qingwei-li.github.io/vue-region-picker/

License: Do What The F*ck You Want To Public License

JavaScript 91.45% Makefile 1.24% Smarty 7.31%

vue-region-picker's Issues

插件支持仅二级联动吗?

业务需求,可能有的地方需要三级联动,有的地方需要二级联动.
目前使用二级联动的话,我只能讲district一项隐藏掉,感觉代码不整洁

2.0 release

  • [refactor] 移除 init 直接通过 province/city/district 设置值，并支持 双向绑定
  • [feature] 支持二级联动 province / city #2
  • [feature] 自定义地区数据生成工具，可以选择指定的省市区，或者自己填数据，生成 json 文件 (辅助工具，慢慢做）

1.3.0

  • [feature] 支持二级联动 province / city 或者 city / district #2 移到 2.0 上
  • [feature] 自定义地区数据生成工具，可以选择指定的省市区，或者自己填数据，生成 json 文件 移到 2.0 上
  • [refactor] 移除 init 属性，直接通过 province/city/district 传入初始值，依旧保留 init 属性， 2.0 正式移除
  • [fix] 未设置的默认值应该默认不选中

select无法显示初始化的值

项目使用vue2, 注册插件,
Vue.use(RegionPicker, { region: CHINA_REGION, vueVersion: 2 });
使用并设置初始值

<region-picker 
	:province="params.recvProvince" 
	:city="params.recvCity" 
	:district="params.recvArea"
	@onchange="getRecvRegion">								
</region-picker>
***
params: {
    recvProvince: '福建省',
    recvCity: '厦门市',
    recvArea: '思明区',
}

最后页面中无法显示已设置的值,显示的是"请选择",
而在页面select里则有<select value="350000,福建省" class="province-select">

Vue2.0 warn

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "province"

3.0 plan

1. 换成用 rollup
2. 兼容 vue1 和 vue2

vue2.0报了个警告

[Vuewarn]: Property or method "change" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
但是定义了change这个方法，就无法实现这个插件本身的方法了。。

请教一个问题

我也在做一个三级联动的组件，遇到一个问题。就是给3级联动组件根据给定值进行初始化的问题。

比如你这个省市区三级联动，如果我给省市区3个值分别一个值对其进行初始化。那么这3个值会传入组件并先后赋给3个select，假设我先给省赋值，再给市复制，再给区复制，那么问题就来了，给省复制给触发联动的逻辑，省改变会取清空市和区的值。。。。。

所以您是如何解决这个问题的呢？看了代码，没整明白

样式问题

里面的select这么修改样式？我在style里面写入select样式，无效。是不是select是后面渲染出来的问题？

vue2 bug~ 

Uncaught TypeError: Cannot read property 'indexOf' of undefined
    at VueComponent._searchIndex (eval at <anonymous> (app.js:2514), <anonymous>:1:3097)
    at VueComponent.boundFn [as _searchIndex] (eval at <anonymous> (app.js:600), <anonymous>:125:14)
    at VueComponent._selected (eval at <anonymous> (app.js:2514), <anonymous>:1:3249)
    at VueComponent.boundFn [as _selected] (eval at <anonymous> (app.js:600), <anonymous>:125:14)
    at VueComponent.get (eval at <anonymous> (app.js:2514), <anonymous>:1:3888)
    at Watcher.get (eval at <anonymous> (app.js:600), <anonymous>:2934:27)
    at Watcher.evaluate (eval at <anonymous> (app.js:600), <anonymous>:3042:21)
    at VueComponent.computedGetter [as citySelected] (eval at <anonymous> (app.js:600), <anonymous>:3240:15)
    at VueComponent.change (eval at <anonymous> (app.js:2514), <anonymous>:1:2854)
    at Proxy.boundFn (eval at <anonymous> (app.js:600), <anonymous>:125:14)
_searchIndex @ app.js?016e:1
boundFn @ vue.common.js?caed:125
_selected @ app.js?016e:1
boundFn @ vue.common.js?caed:125
get @ app.js?016e:1
get @ vue.common.js?caed:2934
evaluate @ vue.common.js?caed:3042
computedGetter @ vue.common.js?caed:3240
change @ app.js?016e:1
boundFn @ vue.common.js?caed:125
change @ VM1594:2
invoker @ vue.common.js?caed:1944
vue.common.js?caed:521 [Vue warn]: Error when rendering component <RegionPicker>: 
warn @ vue.common.js?caed:521
Vue._render @ vue.common.js?caed:2223
updateComponent @ vue.common.js?caed:2609
get @ vue.common.js?caed:2934
run @ vue.common.js?caed:3003
flushSchedulerQueue @ vue.common.js?caed:2807
(anonymous) @ vue.common.js?caed:473
nextTickHandler @ vue.common.js?caed:422
vue.common.js?caed:435 TypeError: Cannot read property 'indexOf' of undefined
    at VueComponent._searchIndex (eval at <anonymous> (app.js:2514), <anonymous>:1:3097)
    at VueComponent.boundFn [as _searchIndex] (eval at <anonymous> (app.js:600), <anonymous>:125:14)
    at VueComponent._selected (eval at <anonymous> (app.js:2514), <anonymous>:1:3249)
    at VueComponent.boundFn [as _selected] (eval at <anonymous> (app.js:600), <anonymous>:125:14)
    at VueComponent.get (eval at <anonymous> (app.js:2514), <anonymous>:1:3888)
    at Watcher.get (eval at <anonymous> (app.js:600), <anonymous>:2934:27)
    at Watcher.evaluate (eval at <anonymous> (app.js:600), <anonymous>:3042:21)
    at Proxy.computedGetter (eval at <anonymous> (app.js:600), <anonymous>:3240:15)
    at Proxy.eval (eval at makeFunction (eval at <anonymous> (app.js:600)), <anonymous>:2:829)
    at VueComponent.Vue._render (eval at <anonymous> (app.js:600), <anonymous>:2216:22)
logError @ vue.common.js?caed:435
app.js?016e:1 Uncaught TypeError: Cannot read property 'indexOf' of undefined
    at VueComponent._searchIndex (eval at <anonymous> (app.js:2514), <anonymous>:1:3097)
    at VueComponent.boundFn [as _searchIndex] (eval at <anonymous> (app.js:600), <anonymous>:125:14)
    at VueComponent._selected (eval at <anonymous> (app.js:2514), <anonymous>:1:3249)
    at VueComponent.boundFn [as _selected] (eval at <anonymous> (app.js:600), <anonymous>:125:14)
    at VueComponent.get (eval at <anonymous> (app.js:2514), <anonymous>:1:4084)
    at Watcher.get (eval at <anonymous> (app.js:600), <anonymous>:2934:27)
    at Watcher.evaluate (eval at <anonymous> (app.js:600), <anonymous>:3042:21)
    at VueComponent.computedGetter [as districtSelected] (eval at <anonymous> (app.js:600), <anonymous>:3240:15)
    at VueComponent.change (eval at <anonymous> (app.js:2514), <anonymous>:1:2884)
    at Proxy.boundFn (eval at <anonymous> (app.js:600), <anonymous>:125:14)

remove data option 

import Vue from 'vue'
import RegionPicker from 'vue-region-picker'
import REGION_DATA from 'vue-region-picker/data'

Vue.use(RegionPicker, {
  region: REGION_DATA
})

// or

RegionPicker.region = REGION_DATA
new Vue({
  components: { RegionPicker }
})

Vue2里警告 

[Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build. 
(found in component <RegionPicker>)

这个issue

改成 vue 的插件

原来的组件引用的方式不变，支持通过插件的方式注册

import Vue from 'vue'
import VueRegionPicker from 'vue-region-picker'
import RegionData from 'vue-region-picker/data'

Vue.use(VueRegionPicker, {
  data: RegionData
})

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.