1.解决blur事件中使用alert和focus循环弹框问题
在alert后先移除onblur事件,再添加onfocus事件和onblur事件
<input v-model="current.options.xAxis.data[index]" class="ipt" type="text" @blur="insertContent($event)">
insertContent(e) { // 失去焦点事件
if (!e.target.value.trim()) {
alert('输入框内容不能为空')
e.target.onblur = ''
setTimeout(function() {
e.target.focus()
e.target.onblur = this.insertContent
}, 0)
}
},
2.父元素设置了min-height,子元素高度设置为100%不生效,无法根据父级的高度自适应，而是根据自身内部元素撑开高度，若子元素设置了确定的高度，则高度设置是生效的
可以将父元素设置为相对定位(relative),子元素设置为绝对定位(absolute)
3. vue 报错 Cannot read property ‘_wrapper‘ of undefined
多半是因为使用了未定义的 方法
4.echarts重绘除了使用 echarts.dispose()方法和echartsInstance.clear()方法,还可以手动删除_echarts_instance属性,dom.removeAttribue('_echarts_instance')
4.echarts图标显示暂无数据
1.通过判断是否有渲染需要的图表数据，给 DOM 插入文字
if(this.chartData.series[0].data.length > 0){
this.$nextTick(() => {
this.charts = this.$echarts.init(this.$refs.chart);
this.setOption();
var _this = this;
// 点击柱形图事件
this.charts.on("click", (params) => {
_this.$emit("getBar", params.name);
});
});
} else {
this.$nextTick(() => {
var dom = this.$refs.chart
dom.innerHTML = '暂无数据'
dom.removeAttribute('_echarts_instance_')
})
}
(2) 通过 showLoading API 来实现
myChart = this.$echarts.init(this.$refs.chart);
myChart.setOption(option)
if (!data.length) {
myChart.showLoading({
text: '暂无数据',
showSpinner: false,
textColor: 'black',
maskColor: 'rgba(255, 255, 255, 1)',
fontSize: '26px',
fontWeight: 'bold'
})
} else {
myChart.hideLoading()
}
(3)通过 给 options 增加 graphic 配置项来实现
graphic: {
type: 'text',
left: 'center',
top: 'middle',
silent: true,
invisible: data.length == 0, //是否可见，这里的意思是当没有数据时可见
style: {
fill: 'black',
fontWeight: 'bold',
text: '暂无数据',
fontSize: '26px'
}
}
// 实现原理是在图表上再增加一个图层，图层上写着暂无数据的提示。
5.父子组件生命周期,computed,watch执行顺序
一.加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
2.更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
3.销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
二.keep-alive的生命周期
- activated： 页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
- deactivated: 页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated
三.computed、watch
在created之前就会 就会进行初始化 computed 和 watch
看以下执行顺序图可以得出：
1.初始化时父元素 向 子元素传递数据分两个阶段，一为父元素父beforeMount及之前的一个阶段，包括data中定义的赋值；另一个阶段为，父元素mounted及其之后的阶段；在一个阶段中后面的赋值会替换前面的赋值；（如：父created 覆盖父data中定义的），所以watch 和 computed 会触发两次
2.watch有immediate属性： 首次绑定的时候，是否执行handler，为true时，在子元素的created之前执行;默认false 为false时 只有在父元素mounted之后值改变才会触发，否则是不会触发的；
3.computed 执行值computed被引用处（数据变更时 watch 在 computed 之前执行），然后继续执行computed代码；computed 最早在created之后执行；
四.路由守卫
原文:www.cnblogs.com/voxov/p/152…
6.如何监听vuex中的数据变化
1.在vue文件中监听vuex数据变化
通过computed获取到vuex中的数据,在通过watch监听获取到的数据,做相应的操作
2.在非vue文件中监听vuex数据变化
vue官网提供了解决思路
watch(fn: Function, callback: Function, options?: Object): Function
vuex的实例方法，接收两个参数：
第一个参数为fn，响应式地侦听 fn 的返回值，当值改变时调用回调函数。fn 接收 store 的 state 作为第一个参数，其 getter 作为第二个参数；
第二个参数为一个可选的对象参数表示 ，类似于vue的watch的回调函数，表示新旧值。
当我们不想监听时，可以通过定义变量接收该方法的返回值函数，调用该函数即可停止监听。
优点：我们可以监听某个特定需要的值，并非常方便的类似vue文件中那样拿到新旧变化值
弊端：当我们需要知道很多的值的变更情况时就得写大量的监听方法（可以考虑封装成方法或类）
/* eslint-disable */
import store from "../store/index";
const watchFun = store.watch(
state => state.pathName,
(newValue, oldValue) => {
console.log("search string is changing");
console.log("rd: newValue", newValue);
console.log("rd: oldValue", oldValue);
}
);
setTimeout(() => {
watchFun();
}, 10000);
- 在相应的js文件引入store
- 调用store的watch实例方法，第一个函数参数返回一个需要监听的state中的值（比如我想监听vuex中的pathName的变化情况，就返回该值）
- 第二个参数同vue的watch，接收2个参数代表新旧值
- 通过变量watchFun接收watch的返回值，调用该方法会停止监听
7.vue中通过this.$options.name获取到组件的name属性
