vue 引用子组件，覆盖子组件样式等..

一. 样式

1. vue 引用子组件，覆盖子组件样式

使用deep 属性，找到子组件里的选择器直接修改即可生效。

:deep(.tag) {
    margin: 0px;
    display: inline-block;
}

2. 使用computed 动态改变img 的src不生效

url-loader将直接将:src=" '../../assets/images/'+item.url+'.jpg' "解析成字符串，因为是动态加载的，所有无法解析图片地址。

所以改为ref，同时import img

import editingImg from '@foundation/assets/img/editing.svg';

const toogleImg = ref(editImg);
const openPopover = function (type: string): void {
    popoverState[`popoverVisible-${type}`] = true;
    toogleImg.value = popoverState[`popoverVisible-${type}`] ? editingImg : editImg;
};

3. flex布局限制每行固定个数

对于表单项很多每个form-item 会根据条件展示，每行最对展示两个item的情况，需要使用flex 布局。当有item 项不展示，后面的可以自动填补空位。

 .form-flex {
        display: flex;
        flex-wrap: wrap; // 可以换行
    }
// 设置子item 的宽度
  :deep(.ks-input__inner),
    .ks-select .ks-input {
        width: 320px;
        height: 36px;
    }
// 设置间距
.ks-form-item {
    margin-right: 16px;
}
// 对于个别需要单独设置样式的input ，在form-item 上加类
   .big-input {
        :deep(.ks-input__inner) {
            width: 656px;
        }
    }

4. 文字超出自定义长度之后缩略展示...

.overflowText {
    display: inline-block;
    width: 184px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

二.语法

1.moment 的使用：

比手写处理时间方便多了。。。

moment.js 搜索栏获取最近一周，一个月，三个月，半年，一年时间

moment.js使用方法总结

在项目中使用，比如获取上上个月，最近三个月，最近一年：

获取上上个月第一天~最后一天的时间戳（日期维度）
- valueOf()转换为数字时间戳，还可以使用format('YYYY-MM')自定义展示格式
- subtract(2, 'months') :当前月减2，得到上上个月。
- startOf()/endOf() 分别设置开始/结束时间怎么结算的

 // 上上个月 第一天~最后一天
            if (checkTime.value[0] === 4) {
                const temp = [
                    moment(new Date()).subtract(2, 'months').startOf('month').valueOf(),
                    moment(new Date()).subtract(2, 'months').endOf('month').valueOf(),
                ];

                date.value = temp;
            }

获取最近三个月的时间戳（月维度）

当前月减2，注意结束时间是当月

  // 月维度-近三个月
 if (checkTime.value[0] === 5) {
const temp = [
 moment(new Date()).subtract(2, 'months').startOf('month').format('YYYY-MM'),
 moment(new Date()).endOf('month').format('YYYY-MM'),
                ];
                date.value = temp;
            }

获取最近一年

减去的单位改为years 即可

 // 月维度-近一年
 if (checkTime.value[0] === 7) {
 const temp = [moment(new Date()).subtract(1, 'years').startOf('month').format('YYYY-MM'),
moment(new Date()).endOf('month').format('YYYY-MM'),
                ];
                date.value = temp;

2.VUE使用路由

使用：

配置route.js , 定义路由名、路径、视图；

 {
            name: 'member',
            path: '/test/member',
            component: (): any => import('./views/member/route.vue'),
            children: [
                {
                    name: 'memberList',
                    path: '/test/member/:state?',
                    component: (): any => import('./views/member/index.vue'),
                },
                {
                    name: 'memberDetail',
                    path: 'detail/:memberId?',
                    component: (): any => import('./views/member/userDetail.vue'),
                },
            ],
        },

新建一个文件放 <router-view /> ,同时监听路由的变化设置默认子路由页面

import route from '../../router';
import { useRoute } from 'vue-router';
const statisticRoute = useRoute();
watch(
    () => statisticRoute.name,
    routerName => {
        if (routerName === 'member') {
            route.replace({ name: 'memberList' });
            return;
        }
    },
    { immediate: true }
);

点击列表按钮跳转到详情

VUE的两种跳转push和replace对比区别

 function handleDetail(mId: string): void {
            route.push({
                name: 'memberDetail',
                query: {
                    memberId: mId,                 
                },
            });
        }