「CSS」利用flex设置字体大小不一的文字水平垂直居中，并且文字以字体底部对齐 align-items: baseline;

应用场景比如：价格与划线价

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        background-color: #4773dc;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
      }
      .content {
        display: flex;
        align-items: baseline;
      }
      .num {
        font-size: 50px;
      }
      .unit {
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="content">
        <div class="num">8</div>
        <div class="unit">折</div>
      </div>
    </div>
    <div class="box">
      <div class="content">
        <div class="num">8000</div>
        <div
          class="unit"
          style="text-decoration: line-through; color: rgb(190, 190, 189)"
        >
          500000
        </div>
      </div>
    </div>
  </body>
</html>

动态路由

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function filterAsyncRoutes(routes, roles) {
        console.log("最外层");
        const res = [];
        routes.forEach((route, index) => {
          const tmp = { ...route };
          // console.log("route", tmp);
          if (hasPermission(roles, tmp)) {
            // console.log("执行");
            if (tmp.children) {
              // filterAsyncRoutes 返回的是一个数组 【 {路由对象} ， {路由对象}】
              tmp.children = filterAsyncRoutes(tmp.children, roles);
              console.log("内层", index);
            }
            // 里层的递归执行完成才到这里 xxxx 不是的
            console.log("外层", index);
            res.push(tmp);
            console.log("res", index, res);
          }
        });

        return res;
      }
      //roles : ["admin"]
      function hasPermission(roles, route) {
        // console.log("hasPermission", roles, route);
        if (route.meta && route.meta.roles) {
          // some 没有找到是返回什么的  some: 方法返回的是布尔值， 如果可以查到这个元素，就会返回true;  如果查找不到就会返回false;
          return roles.some((role) => route.meta.roles.includes(role));
        } else {
          return true;
        }
      }

      const asyncRoutes = [
        {
          path: "/example",
          redirect: "/example/table",
          name: "Example",
          meta: { title: "Example", icon: "el-icon-s-help" },
          children: [
            {
              path: "aaa",
              name: "aaa",
              component: () => import("@/views/table/index"),
              meta: { title: "aaa", icon: "aaa" }, //大家都要有的
              children: [
                {
                  path: "bbb",
                  name: "bbb",
                  component: () => import("@/views/table/index"),
                  meta: { title: "bbb", icon: "bbb" }, //大家都要有的
                },
              ],
            },
            {
              path: "table",
              name: "Table",
              component: () => import("@/views/table/index"),
              meta: { title: "Table", icon: "table", roles: ["admin"] }, //admin
            },
            {
              path: "list",
              name: "ExportExcel",
              component: () => import("@/views/article/index"),
              meta: { title: "article", icon: "table", roles: ["editor"] }, //editor
            },
          ],
        },
        {
          path: "external-link",
          children: [
            {
              path: "https://panjiachen.github.io/vue-element-admin-site/#/",
              meta: { title: "External Link", icon: "link" }, //大家都要有的
            },
          ],
        },

        // 404
        { path: "*", redirect: "/404", hidden: true }, //大家都要有的
      ];

      console.log(filterAsyncRoutes(asyncRoutes, ["admin"]));
    </script>
  </body>
</html>

进入递归方法上一个的方法会等待 www.cnblogs.com/yuerdong/p/…

js中递归与for循环同时发生的时候，代码的执行顺序是怎样的？

你的递归是在for循环里面。所以当你进入到for循环后。是先执行递归的，直到这个递归有结果返回，你才回到for循环继续执行。

关于Vue在二次封装UI组件时，处理ref的问题

blog.csdn.net/Ag_wenbi/ar…

this.$refs.xx为undefined问题如何解决？

起因是子啊mounted中拿到this.$refs.xx为undefined 子组件加了v-if的条件判断

也尝试了 methods: {}可以使用this.$nextTick(_ => {})，等页面渲染好再调用

www.freesion.com/article/881… woaidaogu.com/web_ui/713.… 获取的是设置了v-if/v-show的元素：

如果在DOM结构中的某个DOM节点使用了v-if、v-show或v-for（根据后台数据动态操作DOM），那么这些DOM 在mounted阶段是不存在的。

在mounted钩子中加载回来的数据不会在这个阶段更新到DOM中。所以在mounted钩子中使用$refs获取有v-if、v-for、v-show 的DOM节点，返回来的会是undefined。

解决方法

不在munted中获取元素，在updated中获取。

使用$nextTick:

$nextTick是在下次DOM更新循环结束之后执行延迟回调，在修改数据之后使用$ nextTick，则可以在回调中获取更新后的DOM。

或者 watch 加

ref不是响应式的，所有动态加载的模板更新它都无法相应的变化

解决：更换为 v-show 即可

vue 返回上一页时滚动到离开时的位置

当前的table拉到最底部有40条数据
最后一条进入了详情-返回上一页
应该得滚到最底部 www.jianshu.com/p/f0eab1424… 有时候会有这种情况。从列表页面进入详情页面，然后点击返回的时候，我们的接口会重新调用，页面也会跑到顶部，这样用户体验是很不好的，每次用户都得从上往下从新翻，下面就给大家介绍如何解决这种问题

但是我点击的是浏览器的返回按钮？？

const scrollBehavior = function scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    // savedPosition 会在你使用浏览器前进或后退按钮时候生效
    // savedPosition: 会记录滚动条的坐标，点击"后退/前进" 时的记录值(x:?,y:?)
    return savedPosition;
  }else {
      return { x: 0, y: 0 }; // 期望滚动的位置
   }
};
const router = new Router({
  routes,
  scrollBehavior,
});

不生效原因：

要注意页面布局，不要限制页面滚动位置在使用了 keep-alive 做路由级缓存的页面，不要限定页面的滚动位置，让页面能够自然滚动就行，不要给滚动区域设置固定高度。设置了固定高度的话，记录滚动位置的功能就会不起作用，缓存功能是还在，但是并不会自动记住滚动位置。

在孙组件调用爷组件方法

1、在爷组件定义getSheetOneData()方法；

2、在爷组件methods同级定义 provide()方法定义要传递的爷组件方法

provide() { return { getSheetOneData: this.getSheetOneData } },

3、在孙组件中定义inject: ['getSheetTwoData'] 接收爷组件传递的方法，

inject: ['getSheetTwoData'],

4、在孙组件中直接调用爷组件传递的方法

getData(){
    this.getSheetTwoData();
}

el-table 鼠标移动到某一行 hover改变样式

.el-table {
		flex: 1;
		:deep(tbody tr:hover>td ){ 
			color:var(--el-color-primary) !important;
		} 
        XXXX.....其他样式
}

el-table 禁用勾选还能显示打钩吗

全网都是隐藏掉全选按钮如果我需要选中复选框加上禁用的样式呢？

pointer-events:none;可以禁用按钮的点击事件 但是那个禁用框的样式也是没有的了

  cursor: not-allowed; 不允许光标，通常是一个圆圈和一个斜杠（ / ）。

uniapp中onLaunch异步方法与onLoad执行顺序问题（登录获取token等）

www.lervor.com/archives/12… blog.csdn.net/weixin_3915…

手写叉号

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .close {
        position: relative;
        width: 40px;
        height: 40px;
        border: 1px solid #333333;
        border-radius: 50%;
      }
      .close::before,
      .close::after {
        position: absolute;
        content: " ";
        background-color: red;
        top: 6px;
        left: 20px;
        width: 1px;
        /* height: 40px; */
        height: 28px;
      }
      .close::before {
        transform: rotate(45deg);
      }
      .close::after {
        transform: rotate(-45deg);
      }
    </style>
  </head>
  <body>
    <div class="close"></div>
  </body>
</html>

随笔（随时更新）