前端歌谣-第一百一十一课-记录初步写vue3的一些问题和解决思路

前言

大家好 我是歌谣 今天又是写vue3+ts的第二天 今天还是一如既往 说一说在前端项目中遇到的一些问题

ref

ref的取值和赋值都是采用xxx.value的写法
现在这个结论尚且不清楚是正确还是错误的

clickTime.value == 1
      ? `${res.value}`
      : `${formState.value.user[`${type.value}`]}${res}`;

Vue3的插件是valor

安装之后重启vs code

对象和基本数据类型都用ref了

//计算器弹框开启
const keyShow = ref(true)
//默认选中的输入框类型
const type = ref('')
//点击次数
const clickTime = ref(0)
const numberNew = ref(0)
const formState = ref({
  user: {
    planned: 0,
    qualified: 0,
    unqualified: 0,
    scrap: 0,
    teamcode:0
  },
});

文字很长设置省略号

 width: 60px;
      font-size: 16px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;

修改ant design vue3.0的样式

解除scope的限制 直接找类名即可

.BaseForm-header {
  width: 100%;
  height: 100px;

  .ant-steps {
    width: 100%;
    height: 100px;

    .ant-steps-item-icon {
      position: relative;
    }

    .ant-steps-item-title {
      position: absolute;
      top: 40px;
      left: 0;
      width: 60px;
      font-size: 16px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }
}

对于class绑定两个类名样式设置

<div class="box red">我是一个红色的盒子</div>
<div class="box blue">我是一个蓝色的盒子</div>
<div class="box yellow">我是一个黄色的盒子</div>
<div class="box green">我是一个绿色的盒子</div>

.box.red {
  background-color: red;
  color: white;
}