1上午有个BUG 在vue3 中 引入 vue2 子组件 传值 传不过去， 解决办法 是用wath 深度监听； 数据存入实例的data中 就OK了； vu父组件v3 用ref 定义数组， 不用 reactive 2023.3.2
2
3在datav中 定位。应该封装成组件 或者 用弹性盒子
4可视化 用vh vw % 流式布局 弹性盒布局
5 为什么 父子组件嵌套 vue3引入vue2 父子传值 vue2 子组件 的props 打印出来有值，但是是个空数组Array；打印具体的值 是空
6背景色 透明度：
background-color: rgb(0 0 0 / 16%);
7动画 播放一页（有点像轮播）
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 = "的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事的事"
}
},
效果：
8 封装时间组件：
<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 pc端 大屏展示，布局最优方案之一；弹性盒子； 或者grid；
在2K下显示 没有问题， 在1K下显示 布局乱了！ 原因是定位的问题；应该用流式布局 和弹性盒子！！！
10因布局原因 要全部都改成 弹性盒子
](https://img-blog.csdnimg.cn/1cdce6a59c314ceeb39c31f08cf2df6e.png)
先调 同一个方向的全部， 先竖再横 先横再竖 都可；
11伪元素生成背景：
.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 响应式页面 高度用百分比；我最先考虑用弹性盒子。但后面觉得还是百分比香；vh用了，但是在退出全屏的时候 会变形。最终选择了百分比；
响应式大屏可视化，布局思路:横向用弹性盒子，竖向用flex 或者百分比； 方案2 用grid！
13 竖向的 可以做成动画 展示 我做 复杂了， 做成轮播了；
14,比！impotant 更强的修改样式方式；修改了字体大小
14 封装成组件后引入 echaets 初始化的那个dom 不报错
15 js 表示空格\xa0
console.log(${levelArray[0]}${personArray[0]}\xa0\xa0${levelArray[1]}${personArray[1]});
16 递归 处理狗币的垃圾数据
后端返回的json：
{
"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 组件当中的样式，只写在组件本身的css中！ 不要写在父组件中！
