目录
[一、Vue+Element ui](#一、Vue+Element ui)
[2、this.refs使用方法](#2、this.refs使用方法)
[Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'xxx')"](#Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘xxx‘)“)
一、Vue+Element ui
1、show-overflow-tooltip属性设置宽度
:show-overflow-tooltip="true",该属性可以让内容在一行显示,如果显示不下时,显示...,并且鼠标划过时显示全部文字。
现在需求是:调整显示全部文字的宽度。
样式代码如下:可以在全局添加这样全部生效,如果不想加在全局的话,可以单独加在页面当中,但是切记修改elementui自带样式的话,不能在<style scoped></style>中修改,因为不会生效。
<style lang="scss">
.el-tooltip__popper {
max-width: 800px;
//max-width: 60%;
}
</style>
2、this.$refs使用方法
this.$refs
在vue中ref可以以属性的形式添加给标签或者组件
ref 写在标签上时:this.$refs.editValue 获取的是添加了ref="editValue"标签对应的dom元素
ref 写在组件上时:this.$refs['component'] 获取到的是添加了ref="component"属性的这个组件
<template>
//给标签使用
<input type="text" ref="editValue"/>
//给组件使用
<comp-detail ref="component"></comp-detail>
<button @click="confirm">确定</button>
</template>
methods:{
confirm(){
console.log(this.$refs.editValue.value) //打印出输入框中的value值
this.$refs['component'].init() //调用组件comp-detail中的init()方法
}
}
-----使用过程我报错如下
Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'xxx')"
翻译大概就是:
v-on处理程序中出现错误:"TypeError:无法读取未定义的属性(读取'xxx')"
但是,实际上我是调用自定义组件中的方法
解决方案:
原因是因为调用方法的时候,实际值虽然初始化了,但是实际上还没渲染到dom上,因此应该改使用nextTick,即等元素被初始化成功后才进行调用方法。
this.dialogVisible =true
this.$nextTick(()=>{
this.$refs.component.setValue('你好') //调用setValue方法
})
天下事有难易乎?为之,则难者亦易矣;不为,则易者亦难矣。