Table of contents
- bugs / knowledge points
-
- 1. After the el-dialog is opened, the page layout shifts
- 2. el-table mistakenly reused the previous table columns, resulting in wrong display of new table content
- 3. The method of monitoring the browser's local cache
- 4. Simple multi-system fast login through iframe (similar to single sign-on effect, support cross-domain)
- 5. The VS Code code prompt suddenly disappeared
- 6. Why is the component obtained through ref sometimes an object and sometimes an array? (Why can't the method in the component obtained through ref be called?)
- 7. Why does el-input-number become invalid after being manually emptied and assigned by code? (The assignment becomes invalid after clearing)
- 8. Realization of js rounding method
- 9. The Vue startup project reports an error. defineConfig is not a function
- 10. The width of flex: 1 will be enlarged by the content element
- 11. Text line break processing
- 12. echart chart update data
bugs / knowledge points
1. After the el-dialog is opened, the page layout shifts
Just set: lock-scroll="false"
<el-dialog
v-model="dialogVisible"
:title="dialogTitle"
:lock-scroll="false"
>
2. el-table mistakenly reused the previous table columns, resulting in wrong display of new table content
Scenario: A bug was found today. There are three tables on the right side of the interface. According to the location of the click, v-if judgments are made on all of them. Depending on the order of the clicks, if you click on the displayed table, the columns of the previous displayed table will be reused, resulting in errors in the display of some columns in the table (mainly because the operation columns of the previous table are reused, resulting in the newly displayed The table is at the position of the same column index, and an operation button appears [the content of the bound field of the column should have been displayed])
Solution: Add a unique key to el-table-column, so as to avoid wrong reuse,problem solved!
3. The method of monitoring the browser's local cache
mounted() {
window.addEventListener('storage', (e) => {
// e.key 为storage 里，你要监听的字段
if(e.key === 'xxxx') {
}
});
},
// 移除监听
beforeDestroy() {
window.removeEventListener("storage", () => {
});
}
4. Simple multi-system fast login through iframe (similar to single sign-on effect, support cross-domain)
System A address: http://localhost:8080
System B address: http://localhost:8081
A system
// A 系统登录成功过后
// 获取 token
var token= res.data.token;
// 动态创建一个不可见的iframe，在iframe中加载一个跨域HTML
var iframe = document.createElement("iframe");
// iframe的src为B系统的地址
iframe.src = "http://" + window.location.hostname + ":8081";
document.body.append(iframe);
iframe.style.display = "none";
// 使用postMessage()方法将token传递给iframe
const href = "http://" + window.location.hostname + ":8081";
setTimeout(() => {
// 把登录成功后获取的token和用户名传递给B系统
iframe.contentWindow.postMessage({
systemToken: token, username: res.data.username }, href);
}, 2000);
setTimeout(function () {
// 销毁iframe
iframe.remove();
}, 6000);
System B
// 接收A系统传递的token与用户名
window.addEventListener(
"message",
function (event) {
if (event.data && event.data.systemToken) {
if(localStorage.getItem("token") !== event.data.systemToken) {
localStorage.setItem("token", event.data.systemToken);
localStorage.setItem("username", event.data.username);
}
}
},
false
);
// 这里的监听是写在 App.vue 里的
// 同时，我们需要监听localStorage里的用户数据发生变化，让其回到登录页，选择最新的用户数据快速登录或手动登录
// A系统在传递的信息的时候，最后传递的是username。这里我们就监听username的变化
mounted() {
window.addEventListener('storage', (e) => {
if(e.key === 'username') {
this.$message({
type: 'warning',
message: '当前登录的账号已更新'
})
if(this.$route.name === 'Login') {
window.location.reload();
} else {
this.$router.replace({
name:'Login'
});
}
}
});
},
beforeDestroy() {
window.removeEventListener("storage", () => {
});
}
5. The VS Code code prompt suddenly disappeared
In the vue file, I found that the prompt of the code suddenly disappeared. I found a method on the Internet, but I tried it without success. Then I reinstalled the editor and all the plugins, but there is still no code prompt.
I tried one later, and there was a slight turning point:
first, convert the file type to html in the lower right corner. At this time, the code prompt comes out,
but then select the file type as automatic detection, and it will automatically convert to a .vue file. At this time, the code prompt is gone again
(at this time, I can think of something that may be related to .vue)
My workaround:
In this puzzling situation, I suddenly remembered that I saw an article saying that
the vetur plug-in and the Vue Language Features (Volar) plug-in cannot be used at the same time
(both support the syntax of vue)
But because these two plug-ins have always been in the editor before, and they have no effect, so I have never paid attention to them
Finally, uninstall the vetur plugin, leaving only one Vue Language Features (Volar) plugin. After restarting the editor, everyone celebrates! ! ! Dear code hints are finally out again! ! !
6. Why is the component obtained through ref sometimes an object and sometimes an array? (Why can't the method in the component obtained through ref be called?)
-
Principle: The component obtained through $refs can call the method in its own component.
-
Problem found: After the component obtained through $refs, calling its method is invalid, and its method is printed as undefined
-
Solution: At this time, print the obtained components, and it is not difficult to find that the printed one is an array, and you need to obtain the component object through the subscript first, and then you can call it successfully. As shown in the picture:
But most of the time, we can directly call this.$refs[xxx].fn(), which is the component obtained through $ref most of the timeis a component object, not an array of component objects。
Here is another question: Why is the component obtained through ref sometimes an object and sometimes an array? ? ?
Summarize:
- When using ref, if it is a directly defined constant, what is obtained through $ref is a component object . like:
<echartDashboard
ref="dashboard"
>
</echartDashboard>
- When using ref, if it is a component that is instantiated through a for loop, the value bound by ref is generated in a loop. At this time, what is obtained through $ref is an array of component objects . like:
<echartDashboard
v-for="(item, index) in detailData"
:key="item.devId"
:ref="`echart-dashboard-ref-${item.devId}`"
>
</echartDashboard>
7. Why does el-input-number become invalid after being manually emptied and assigned by code? (The assignment becomes invalid after clearing)
Use the $nextTick function
el-input-number is a component of element, not a simple label, and the change event listens to the entire component.
This involves the order of dom rendering and assignment, which can be solved by using the $nextTick function.
8. Realization of js rounding method
// 小数四舍五入转换
// number 值
// precision 保留的小数位
round(number, precision = 3) {
return Math.round(+number + 'e' + precision) / Math.pow(10, precision);
}
9. The Vue startup project reports an error. defineConfig is not a function
Reason: The relevant dependency version of the project is wrong, it can be upgraded through the vue upgrade command
10. The width of flex: 1 will be enlarged by the content element
Solution: Add overflow: hidden at the same time as flex:1
11. Text line break processing
word-wrap:break-word;
word-break:break-all;
12. echart chart update data
myChart.clear();
myChart.setOption(option);