【项目复盘——新知识】宣城0913迭代

宣城0913迭代——新知识点

01 tsx

• Vue 类组件官方文档：https://class-component.vuejs.org/guide/class-component.html#data
• vue-property-decorator 用法介绍：https://www.jianshu.com/p/03bfb12da141

02 链式判断

• JS 新特性—可选链运算符操作：https://juejin.cn/post/7107629035764580365
• 语法
  • 可选链的运算符拼写是 ?. 它可能出现在三个位置
  • 注意：为了能够将 foo?.3:0 解析为 foo ? .3 : 0 ，规定如果 ?. 紧跟的是十进制数字，那么 ?. 不会被解析为单一的运算符，而是按照三元运算符进行处理。因此，要使用 ?. 运算符，其后不能紧跟十进制数字

obj?.prop // 访问静态属性
obj?.[expr] // 访问动态属性
func?.(...args) // 方法调用

• 应用
  • 基础案例
  • 短路机制：如果 ?. 左边表达式的值为 null/undefined，其右边的表达式就不会执行
  • 叠加使用：一个可选链后面可能会跟着其他的可选链
  • 边界情形—分组：使用圆弧括号限制短路的作用范围
  • delete 操作符：当尝试使用 delete 删除一个不存在的属性时，通常会返回一个 true

// 基础案例
a?.b // 等同
a == null ? undefined :a.b
a?.[b] // 等同
a == null ? undefined :a.[b]
a?.b() // 等同
a == null ? undefined :a.b() // 如果a.b是一个函数,执行a.b()
a?.() // 等同
a == null ? undefined :a()

// 短路机制：如果 ?. 左边表达式的值为 null/undefined，其右边的表达式就不会执行
a?.b.c(++x).d // 如果a是null/undefined,变量x不会执行自增

// 叠加使用：一个可选链后面可能会跟着其他的可选链
// 当a和a.b[3].c同时为真时执行表达式
a?.b[3].c?.(x).d // 等同
a == null ? undefined : a.b[3].c == null ? undefined : a.b[3].c(x).d

// 边界情形—分组：使用圆弧括号限制短路的作用范围
(a?.b).c // 等同
(a == null ? undefined : a.b).c

// delete 操作符：当尝试使用 delete 删除一个不存在的属性时，通常会返回一个 true
delete a?.b // 等同
a == null ? true : delete a.b

03 vue-clipboard2

• 用途：复制粘贴功能
• 用法

// main.js中引入
import VueClipboard from 'vue-clipboard2'

// 组件中使用
this.$copyText(copycontent)

04 vantUI

• dialog函数式写法
  • 用途：反馈组件—弹框
  • 用法

// 定义一个方法，通过return将Dialog.confirm({})返回
dialogconfirm() {
  return Dialog.confirm({
    message: `弹框内容`,
    confirmButtonText: '确认按钮内容,
    cancelButtonText: '取消按钮内容',
    confirmButtonColor: '#1989fa', // 确认按钮颜色
    cancelButtonColor: '#1989fa', // 取消按钮颜色
  })
    .then(() => {
      // 点击确认之后的操作
    })
    .catch(() => {
     // 点击取消之后的操作
    })
}

// 渲染页面
protected render() {
  return (
    <div>
      {this.ukRender()}
    </div>
  )
}

05 less

• :global{}
  • 阮一峰—CSS Modules 用法教程：http://www.ruanyifeng.com/blog/2016/06/css_modules.html
  • 在项目中，样式语言无论是用scss或less，如果想让样式仅作用在某个组件，而不影响全局，一般都会把样式文件进行模块化，即打包后每个class名都会被自动加上一串唯一的序列号。
    假如想让某个class不加序列号，可以作用到其他组件，那么就写到 :global { … } 中即可
  • 用法：可以看到，main 后面自动追加了一串唯一的序列号，而 ant-popover-title 则没有，这样在 main 元素中其他任何组件，只要用到 ant-popover-title 这个 class，字体都会变成红色

/* 在test.module.scss文件中 */
.main {
    width: 100px;
      :global {
        .ant-popover-title{
          color: red;
      }
    }
}

/* 打包完结果 */
.main__3D0Xe{ width: 100px; }
.main__3D0Xe .ant-popover-title{
    color: red;
}

06 iconfront

• 使用方法：https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code
• icon 默认是一种字体，可以使用 font-size 进行大小的调节