这周学到了

ts装饰器

tsconfig.json文件中增加如下配置

{ "compilerOptions": { "target": "ES5", "experimentalDecorators": true } }

vuex的使用

import {namespace} from 'vuex-class'
import {BaseState} from '@/store/modules/base'
const baseModule = namespace('base')

@baseModule.State((state: BaseState) => state.tenant.role)
protected role!: string

vite区分环境

.env

VITE_HOME_URL=http://www.xxx.com/child/home

.env.development

VITE_HOME_URL=http://localhost:8080/child/home/

页面内使用 import.meta.env.VITE_HOME_URL进行区分 可以看到import.meta.env内的MODE为"development"

截取字符串的三种方法 slice(),substring(),substr()

三种方法都可以接收一个或者两个参数 接收一个参数表示开始的坐标，截取到最后 接收第二个参数slice(),sbustring()表示结尾位置坐标（不包含），substr()表示截取多少个

let a = '123456'.slice(-1) // '6'
let a = '123456'.substr(-1) // '6'
let a = '123456'.substring(-1) // '123456'

当第一个参数为负数时，slice()，substr()会当作str.length + 这个负数（相当于减法） sbustring()会认为为0，

let a = '123456'.slice(0, -1) // '12345'
let a = '123456'.substr(-2,-1) // ''
let a = '123456'.substring(1,-1) // '1' ， 相当于substring(1，0)会转化成substring(0,1) 
let a = '123456'.substring(-1,-1) // ‘’

当第二个参数为负数时，slice()会当作str.length + 这个附属（相当于减法）sbustr()会当作为0，返回“”,substring()还是会认为为0

modal 使用 promise

外层组件通过const result = this.$refs.moadalName.open() 来打开弹窗； 外层组件不关心modal里的逻辑，使用result来接受modal传出来的数据，

export type ResolveFn<T> = (value: T | PromiseLike<T>) => void
export type RejectFn = (err: Error) => void

export interface Deferred<T> {
    resolve: ResolveFn<T>
    reject: RejectFn
}
// 定义一个变量来存储控制弹窗返回值
protected deferred: Deferred<number> = {
        resolve: () => void null,
        reject: () => void null
    }
// 打开弹窗 
public open(): Promise<number> {
        this.visible = true
        return new Promise<number>((resolve, reject) => {
            this.deferred = {resolve, reject}
        })
    }
// 关闭弹窗
protected closeHandle(): void {
        this.deferred.resolve(0)
        this.visible = false
    }

index.ts定义返回的open

import Vue, {VueConstructor} from 'vue'
import component from './index.vue'

type AssignmentDialog = VueConstructor<Vue> & {
    open: () => Promise<number>
}

const AssignmentDialog = component

export default AssignmentDialog

1.使用:not(xxx)

遇到下面这种需要每个元素有一定间隔时使用排除选择器:not(),不要用自己用单独的类名控制

<div class="header-btn-box">
    <a-button class="btn-left">删除</a-button>
    <a-button>编辑</a-button>
</div>
//.btn-left {
//    margin-right: 24px;
// }
 .header-btn-box {
    .ant-btn:not(:last-child) {
        margin-right: 24px;
    }
}

2.宽高百分比

高度设置为宽度比例

.movie-card{
    width: 200px;
    position: relative;
    &::after{
        content: '';
        display: block;
        width: 100%;
        padding-bottom: 150%
    }
    img{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
    }

}