前言

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

ref

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

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

Vue3的插件是valor

安装之后重启vs code

【React工作记录一百肆拾陆】记录初步写vue3的一些问题和解决思路_Time

对象和基本数据类型都用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;
}

前言

大家好 我是歌谣 今天继续给大家带来vue3第三天遇到的问题

ant design 3vue的样式基本都是可以调试的

第一步 解除scope

<style lang="less" ></style>

第二步 控制台找类名 用div包裹

.BaseForm-scanner {
  margin: 1vh 0 1vh 0;
  .ant-form-item-required {
    font-size: 10vh;
  }
  .ant-input {
    height: 10vh;
    line-height: 10vh;
  }
}

常规的左右布局flex

.layout {
  display: flex;
}

.layout-left {
  width: 100px;
}

.layout-right {
  flex: 1;
}