一. 样式

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使用路由

使用：

1. 配置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'),
                   },
               ],
           },
   

2. 新建一个文件放 <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 }
   );
   

3. 点击列表按钮跳转到详情

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

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