组件 defineModel 实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
const props = defineProps({
  propData: {
    type: null,
    default: null
  }
})

const emit = defineEmits(['update:propData'])

const internalData = ref(props.propData)
const data = computed({
  get: () => internalData.value,
  set: (val) => {
    internalData.value = val
    emit('update:propData', val)
  }
})

// 监听 props.propData 的变化，如果有变化则更新 internalData
watch(
  () => props.propData,
  (newVal) => {
    internalData.value = newVal
  },
  { deep: true }
)

// ------- 使用 defineModel -------
const data = defineModel('propData')
// 注意：如果为 defineModel prop 设置了一个 default 值且父组件没有为该 prop 提供任何值，
// 会导致父组件与子组件之间不同步。
data.value = xxx

拖拽宽度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<style>
    #box {
      display: flex;
      height: 500px;
      overflow: hidden;
    }

    #left {
      width: 250px;
      height: 100%;
      background: skyblue;
    }

    #resize {
      width: 1px;
      height: 100%;
      padding: 0 5px;
      margin: 0 -5px;
      cursor: w-resize;
    }

    #right {
      flex: 1;
      height: 100%;
      background: tomato;
    }
</style>

<div id="box">
    <div id="left"></div>
    <div id="resize"></div>
    <div id="right"></div>
</div>

<script>
  window.onload = function () {
    var resize = document.getElementById("resize");
    var left = document.getElementById("left");
    resize.onmousedown = function (e) {
      var startX = e.clientX;
      resize.left = resize.offsetLeft;
      document.onmousemove = function (ee) {
        var endX = ee.clientX;
        let leftWidth = resize.left + (endX - startX)
        let maxWidth = 400;
        if (leftWidth < 200) leftWidth = 200
        if (leftWidth > maxWidth) leftWidth = 400

        resize.style.left = leftWidth;
        left.style.width = leftWidth + 'px';
      }

      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
      }
      return false;
    }
  }
</script>

nvm 配置 settings.txt

1
2
node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/

node-sass 安装失败

1
2
3
4
// 设置代理
npm config set proxy http://127.0.0.1:7890
// 下载完成后删除 http 代理
npm config delete proxy

nvm 安装不上node npm

csdn 方案一 csdn 方案二

1
2
3
// 原因：nvm 版本为 1.2.2 安装不上 node 14
// 需要配置镜像
// 解决：安装 1.1.12，或者手动安装 node

vue router 覆盖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// vue3 router 4 中 路由覆盖
// 在第一个路由有 name 时候才会出现被覆盖的情况，如果没有则不会
// 第二个也必须要有 name 且和第一个相同（动态路由添加同理）
const routes = [
  {
    path: "/index",
    name: "index",
    component: () => import("@/views/index.vue"),
  },
  {
    path: "/index",
    name: "index",
    component: () => import("@/views/index1.vue"),
  }
];

// vue2 router 3 中覆盖
// 不会被覆盖，出现相同名称，会有警告

git 文件大小写

1
2
3
4
5
6
7
8
9
10
11
12
// 文件名称 file/tset.vue 添加后，修改为Test.vue 后 git 还是无效
git config core.ignorecase false
// 提交后线上有两份文件，之前的小写还在
git rm --cached file/tset.vue
git rm --cached file -r
git rm -r --cached .
// 其他方案：直接网上仓库原小写删除文件，
// git pull 后大写文件可能会被删除，放弃取消更改


// 注意：最好使用 git 命令修改文件大小写名称
git mv -f a.js A.js