vue 更换element版本_element-ui中升级版本遇到一些兼容问题解决办法之一

写最近项目(vuejs+element-ui)中遇到的一个问题 升级版本过程中处理兼容问题

因为业务的需要，需要提前升级前端框架(element-ui) 相信一些人用过的话应该就了解，框架从v1.*跌倒到v2.* 难免都会存在一些非兼容性的问题；

主要非兼容问题如下

TimePicker

· 注意:

· 当 is-range 为true 表示日期范围组件 change事件处理函数的参数为一个数组

1.4版本 事件参数值 10:00:00 - 12:00:00

2.0版本上 事件参数值 ["10:00:00", "12:00:00"]

DatePicker

· change 事件参数现在为组件的绑定值，格式由 value-format 控制

· 注意:

· 在选择时间范围组件时(type=daterange)，change事件处理函数的参数为一个数组

1.4版本 事件参数值 2000-11-15 00:00:00 - 2000-12-21 00:00:00

2.0版本上 事件参数值 ["2000-11-17 00:00:00", "2000-12-20 00:00:00"]

Input

· change 事件现在仅在输入框失去焦点或用户按下回车时触发，与原生 input 元素一致。如果需要实时响应用户的输入，可以使用 input 事

因为datepicker以及timepicker 相对于复杂点，不过理解input解决方式应该就没问题解决思路是一样的 这里举例说下V2版本中 Input组件中的问题(包含 type = checkbox type = radio )

先说说我遇到了什么问题？

由于V1版本默认支持当改变手动改变变量 “v”值得时，默认会触发change事件(如下代码)

1

2

3

export default {

data () {

return {

v: ''

}

},

methods:{

'handleChange':function(){

// do something ... console.log('组件加载执行我 哈哈哈哈哈哈哈');

}

},

mounted(){

this.v = 6

}

}

升级V2以后就不在支持这种方式,可能一般人想法就是那去改写法把 比如用watch方式去替代监听等等之类的

由于系统依赖change的地方比较多，其次系统正处于线上运行客户量也比较大而且要求迭代速度也比较快 显然这不是一种稳妥的办法！ 说下我的解决方式

运用到了两个知识点：设计模式- 适配器模式

举一个贴近生活的例子 家里装修的时候安装插座可能木有考虑大功率电器，有一天网上买了电烤炉发现插座用不了 一般大功率的电器插头都比正常的宽。 那怎么办嘞？换个插座

买个适应这种插头的插板回来

买个转换头

其中“3”更贴切描述适配器作用理解 v-model -

首先要解决问题那么先理解问题出在哪里？ 系统部分业务代码依赖了change事件，那么是不是只需要V2版本模拟V1版本提供的change触发时机是不是就可以解决这个问题了？

这是自定义的一个组件，其实很简单 直接看代码吧！！！

ak-radio-group.vue

v-model="v"

:disabled="disabled"

:min = "min"

:max = "min"

:size = "size"

:fill = "fill"

:textColor = "textColor"

@change="handleChange">

import {RadioGroup} from 'element-ui'

export default {

name: 'AkRadioGroup',

model: {

prop: 'value',

event: 'input'

},

components: {

RadioGroup

},

data: function() {

return {

v: ''

}

},

props: {

value: {},

disabled: Boolean,

min: Number,

max: Number,

size: String,

fill: String,

textColor: String

},

methods: {

handleChange (value) {

this.$emit('input',value);

}

},

watch: {

value (o) {

this.v = o;

this.$emit('change',o);

}

},

created () {

this.v = this.value;

}

}

写完之后替换下组件名就平稳解决这个问题 这只是个人的解决思路欢迎讨论