In the morning, there was a BUG introduced in vue3, and the vue2 subcomponent could not pass the value. The solution is to use wath to monitor in depth; the data is stored in the data of the instance and it is OK; the vu parent component v3 uses ref to define the array, not reactive 2023.3. 2
2
src\view\party-branch\Index copy.vue3 locate in datav. Should be packaged as a component or with flexbox
4Visualization with vh vw% flow layout elastic box layout
5 Why is parent-child component nested vue3 introduces vue2 parent-child pass value vue2 sub-component props print out a value, but it is an empty array Array; the printed specific value is empty
6 background color transparency:
background-color: rgb(0 0 0 / 16 %);
7 animation to play a page (sort of like a carousel)
html
<div class="public" style="display: flex; flex-direction: column">
<div class="scrollboxF">
<div ref="scrollboxC" class="anmi"></div>
</div>
</div>
css
.public {
position: absolute;
left: 20px;
top: 45px;
width: 390px;
height: 546px;
.scrollboxF {
// margin-top: 10vh;
margin-left: 10px;
display: flex;
width: 93%;
height: 63vh;
color: white;
font-size: 20px;
// background-color: rgb(0, 0, 0);
word-break: break-all;
overflow-y: hidden;
.anmi {
-webkit-animation: 30s rowup linear infinite normal;
animation: 30s rowup linear infinite normal;
position: relative;
}
@keyframes rowup {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
// margin-top: -25vh;
}
100% {
-webkit-transform: translate3d(0, -100px, 0);
transform: translate3d(0, -100vh, 0);
margin-top: 0vh;
}
}
/* 动画关键帧 */
.anmi:hover {
/* 设置动画是否暂停*/
animation-play-state: paused;
}
}
}
js
async infoCenter1 () {
let res = await infoCenter({
})
if (res.success) {
const {
data } = res
// scrollboxC.value.innerHTML="的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事" 这是VUE3 的
this.$refs.scrollboxC.innerHTML = "的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事"
}
},
Effect:
8 Package time components:
<template>
<div class="timer">
<span>{
{
date }}</span>
<span>{
{
time }}</span>
<span> {
{
week }}</span>
</div>
</template>
<script>
export default {
data() {
return {
timer: null,
time: "",
date: "",
week: "",
};
},
mounted() {
this.dateFormat();
this.timer = setInterval(() => {
this.dateFormat();
}, 1000);
},
methods: {
// 时钟逻辑
dataDestroy() {
if (this.timer) {
clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
}
},
dateShow() {
},
dateFormat() {
let date = new Date();
let year = date.getFullYear();
let month =
date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1;
let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
let hours =
date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
let minutes =
date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
let seconds =
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
this.date = year + "年" + month + "月" + day + "日";
this.time = hours + ":" + minutes + ":" + seconds;
this.week = "星期" + "日一二三四五六".charAt(date.getDay());
}
},
};
</script>
<style scoped>
.timer{
color:white;
font-size:22px;
margin-right: 20px;
cursor: pointer;
}
span{
margin:1vh
}
</style>
9 Large-screen display on the PC side, one of the best layout solutions; flexible box; or grid;
There is no problem with the display under 2K, but the display layout is messed up under 1K! The reason is positioning; should use fluid layout and flexbox! ! !
10 Due to layout reasons, all should be changed to elastic boxes
](https://img-blog.csdnimg.cn/1cdce6a59c314ceeb39c31f08cf2df6e.png)
First adjust all of the same direction, first vertical, then horizontal, first horizontal and then vertical;
11 Pseudo-element generation background:
.img-withdR::before {
position: absolute;
left: 0;
top:0;
content: "";
width: 99%;
height: 100%;
display: block;
background: url("../../assets/12月绩效公示bg.png") no-repeat center;
background-size: 100% 100%;
}
12 Responsive page heights use percentages; my first consideration is flexbox. But later I feel that the percentage is still delicious; vh is used, but it will be deformed when exiting full screen. In the end, I chose percentage;
responsive large-screen visualization, layout idea: use elastic box horizontally, flex or percentage vertically; plan 2 uses grid!
13 The vertical one can be made into an animation display. I made it complicated and made it into a carousel;
14, than! impotant A stronger way to modify the style; modify the font size
14 Package it into a component and introduce the dom initialized by echaets without reporting an error
15 js means a space \xa0
console.log( ${levelArray[0]}${personArray[0]}\xa0\xa0${levelArray[1]}${personArray[1]});
16 Recursively process the garbage data of Dogecoin
The json returned by the backend :
{
"code": "00000",
"data": {
"children": [
{
"children": [
{
"children": [
{
"children": [],
"count": "1",
"fid": "10201",
"groupId": "",
"groupMajor": "",
"id": "1020101",
"name": "业务运营组",
"remark": "负责支撑市公司人财物、生产营销及综合类业务系统建设运营"
}
],
"count": "1",
"fid": "102",
"groupId": "",
"groupMajor": "",
"id": "10201",
"name": "业务专责",
"remark": ""
}
],
"count": "5-7",
"fid": "1",
"groupId": "zhu",
"groupMajor": "1",
"id": "102",
"name": "副主任-主任",
"remark": ""
},
{
"children": [
{
"children": [
{
"children": [
{
"children": [],
"count": "0",
"fid": "1030201",
"groupId": "",
"groupMajor": "",
"id": "103020101",
"name": "系统运维组",
"remark": "负责中心所辖信息系统运行维护"
},
{
"children": [],
"count": "0",
"fid": "1030201",
"groupId": "",
"groupMajor": "",
"id": "103020102",
"name": "客户服务组",
"remark": "负责全重庆公司信息系统客户应用服务，市公司桌面及无纸化 会议服务"
}
],
"count": "1",
"fid": "10302",
"groupId": "",
"groupMajor": "",
"id": "1030201",
"name": "系统工程师",
"remark": ""
}
],
"count": "0-0",
"fid": "103",
"groupId": "ren",
"groupMajor": "1",
"id": "10302",
"name": "副主任-主任",
"remark": ""
}
],
"count": "1",
"fid": "1",
"groupId": "",
"groupMajor": "",
"id": "103",
"name": "客户服务中心",
"remark": ""
}
],
"count": "16",
"fid": "0",
"groupId": "",
"groupMajor": "",
"id": "1",
"name": "业务中心",
"remark": ""
},
"message": "成功",
"success": true
}
function dispose (firstArray) {
1定义一个函数
firstArray.map((item) => {
遍历每一个item{
}
if (item.children.length == 0) {
判断是否有children
item.name = `${
item.name}${
item.count}(人)`
} else {
有children 中 分2中情况 有n-n的和 无n-n的
if (item.count.length === 1) {
let personArray = item.count.split('-')
let levelArray = item.name.split('-')
item.name = `${
levelArray[0]}${
personArray[0]}(人)`
} else {
let personArray = item.count.split('-')
let levelArray = item.name.split('-')
item.name = `${
levelArray[0]}${
personArray[0]}(人)\xa0\xa0${
levelArray[1]}${
personArray[1]}(人)`
}
}
dispose(item.children) 递归调用 并传参 把每个item{
}的children传入；
return
})
}
dispose(firstArray)调用函数传参 []
17 The style in the component is only written in the css of the component itself! Do not write in the parent component!
