小知识点记录

键.

已于 2024-02-28 14:20:18 修改

阅读量460

点赞数

分类专栏： js 文章标签： javascript 前端 vue.js

于 2022-11-24 09:36:18 首次发布

本文链接：https://blog.csdn.net/beekim/article/details/128011867

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

2022.11.23 v-for倒叙遍历显示

<a-steps>
<a-step v-for="(j, index2) in item.allActs.slice().reverse()" :key="index2">
  <template #description>
 <div>{{j}}</div>
  </template>
</a-step>
<a-steps>

v-for="item in Array.slice().reverse()"

2022.11.24 获取某月中的第一天后最后一天的yyyy-mm-dd的值

 const computeMonth = (month) => {
    //获取指定日期所在月的第一天
    var firstDate = moment(month).startOf('month').format('YYYY-MM-DD');
    //获取指定日期所在月的第一天
    var lastDate = moment(month).endOf('month').format('YYYY-MM-DD');
    return (firstDate + ',' + lastDate).split(',');
  };
  
  computeMonth('2022-10')
  //输出：
  [
    "2022-10-01",
    "2022-10-31"
]

2022.11.25 vue3中watch的参数flush

watch(()=>data,()=>{
//操作
}，
{
deep:true,//深度监听
immediate:true,//立即执行一次
flush:'pre',//pre 组件更新之前调用  async 同步执行  post 组件更新之后调用
}
)

2022.11.28

1.在css中v-bind绑定变量

<script setup>
const color=ref('red')
</script>
<style>
.body{
background:v-bind(color)
}
</style>

2.用泛型解决ts推断的unkown类型

  import type { Ref } from 'vue';
  import { inject } from 'vue';
  const color = inject<Ref<string>>('color');

3.provide、inject，不让子组件修改父组件的值可以用readonly

//父
  import { provide, ref,readonly} from 'vue';
  const curVal=ref<string>('red')
  provide('color',readonly(curVal))

//子
  import type { Ref } from 'vue';
  import { inject } from 'vue';
  const color = inject<Ref<string>>('color');

2022.11.30 金额格式化

const filterMoney=(num)=>{
 let flag = false;
    if (num < 0) {
      num = num.toString().substring(1, num.length);
      flag = true;
    }
    if (/[^0-9\.]/.test(num)) return '0';
    if (num == null || num == '') return '0';
    num = num.toString().replace(/^(\d*)$/, '$1.');
    num = (num + '00').replace(/(\d*\.\d\d)\d*/, '$1');
    num = num.replace('.', ',');
    const re = /(\d)(\d{3},)/;
    while (re.test(num)) num = num.replace(re, '$1,$2');
    num = num.replace(/,(\d\d)$/, '.$1');
    if (flag) {
      return '-' + num;
    } else {
      return num;
    }
  },
}

2023.1.4 git不识别文件大小写，导致远程和本地的import的文件出错

git默认是不区分大小写的，解决办法是配置git能够检测到本地改动了文件的大小写名字。

git config core.ignorecase false

2023.1.11 计算超过js精度的两个数字和

//方法1：
const sum = (a, b) => {
    //判断两个数字的长度，以长度长的为基准
    const length = Math.max(a.length, b.length)
    //将短的数字前面填充0，以保证两个数字长度相等
    const aS = a.padStart(length, '0')
    const bS = b.padStart(length, '0')
    //定义进位
    let carry=0
    //定义返回结果
    let res=''
    //循环遍历两个数字从右向左依次相加
    for(let i=length-1;i>=0;i--){
        //按位相加
        const n=+aS[i] + +bS[i]+carry
        //取进位值
        carry=Math.floor(n/10)
        //返回结果前面凭借相加的值
        res=(n%10)+res
    }
    //如果进位里面还有值那还要加上
    if(carry){
        res=carry+res
    }
    return res
}
console.log(sum('3548418415142321', '724321'));

//方法2：
const sum2=(a,b)=>{
   return BigInt(a)+BigInt(b)
}

2023.2.20

1.文件上传

<input type="file"> <br/>
<img src="" id="preview" />
<script>
  const file=document.querySelector('input')
  file.onchange=function(){
      //创建流式读取器
      const reader=new FileReader();
      reader.readAsDataURL(this.files[0])

      //input读取完成后自动执行onload函数
      reader.onload=function(e){
          preview.src=e.target.result
          console.log(e.target.result);
          //读取完成后将e.target.result传给服务器
          //ajax....
      }
  }
</script>

在这里插入图片描述

2. 判断一个值是否为Promise Like

Promise A+规范：https://promisesaplus.com/
在这里插入图片描述

//判断一个值是否为Promise Like
 const isPromiseLike=(val)=>{
  return (
      val !=null &&
      (typeof val==='object' || typeof val==="function") &&
      typeof val.then==="function"
  )
 }

3.判断传入的函数是否标记了async

在这里插入图片描述

//判断传入的函数是否标记了async
const isAsyncFun=(fun)=>{
    return fun[Symbol.toStringTag]==='AsyncFunction'
}
isAsyncFun(()=>{})//expect:false
isAsyncFun(async ()=>{})//expect:true

2023.3.3 vue3中拿到v-for循环的子组件的函数

:ref="(el) => (child[index] = el)"

 <div style="width: 100%; border: 1px solid red">
      <div v-for="(item, index) in html" :key="index" class="cardOne" style="padding: 10px">
        <formvue :ref="(el) => (child[index] = el)" :index="index" />
      </div>
    </div>

  const child: any = ref([]);
  const getF = () => {
    console.log(child.value);
    // console.log(child.value[0].gethuo());
    if (child.value) {
      //获取所有的表单值
      child.value.forEach((val, index) => {
        console.log('第' + index, val.validate());
      });
    }
  };

子组件

  const gethuo = () => {
    // console.log(validate());
    return validate();
  };

2023.5.31 让手机端显示的界面和pc端的一致

//1920 根据实际情况调整
 <meta name="viewport" content="width=device-width,initial-scale=window.innerWidth / 1920"/>

案例：https://cocafe.co/
在这里插入图片描述

2023.7.25 h函数循环遍历显示

h函数实现如图效果：
在这里插入图片描述

{
 field: 'tagName',
 label: '工程项目标签',
 labelMinWidth: 120,
 render: (text) => {
 //text值 '抖音,搜狗输入法'
   const str = text?.split(',');
   return h(
     'div',
     text?
	//这里用map来遍历，如果用forEach页面就显示不出来
	 str.map((val) => {
           return h(
             'span',
             {
               style: {
                 margin: '5px',
                 borderRadius: '5%',
                 fontSize: '12px',
                 background: 'rgba(219, 215, 215, 0.3)',
                 padding: '2px 5px',
               },
             },
             val
           );
         })
       : ''
   );
 },
},

2023.8.21 严格的ts类型规范问题

问题：
如下代码，当我需要去获取obj中的属性值时,不知道每一个属性的具体类型，严格的ts规范就会报错

const obj={
	id:'123456',
	name:'key',
	sex:'male'，
	age:16,
	arr:[{name:'child'}]
}

const fun=(key:string)=>{
	const res=obj[key]
}

解决办法一：

const obj={
	id:'123456',
	name:'key',
	sex:'male'，
	age:16,
	arr:[{name:'child'}]
}

const fun=(key:keyof type of obj)=>{
	const res=obj[key]
}

解决办法二：

const obj={
	id:'123456',
	name:'key',
	sex:'male'，
	age:16,
	arr:[{name:'child'}]
}

const fun=(key:string)=>{
	const res=obj[key as keyof type of obj]
}

解决办法三：
在ts.config中加入一个配置，临时忽略any类型的报错信息

{
	"compilerOptions":{
	"suppressImplicitAnyIndexErrors":true
}
}

解决办法四：用注释忽略

const obj={
	id:'123456',
	name:'key',
	sex:'male'，
	age:16,
	arr:[{name:'child'}]
}

const fun=(key:string)=>{
	// @ts-ignore
	const res=obj[key]
}

2023.10.26 外层盒子宽高导致svg图被本比例压缩问题

问题：
在这里插入图片描述
正常情况：

代码：

<span class="icon">
  <img :src="'assets/icon/capacityAccount/chart/' + color + '.svg'" />
</span>

   .icon {
      position: absolute;
      right: 0px;
      top: 2px;
      z-index: 10;
      img {
        width: 42px;
        height: 42px;
        max-width: 200%;//多加一个max-width就可以了
      }
    }

效果：
在这里插入图片描述

2024.2.28 用递归给现有树data增加层级code

数据源：

[
    {
      title: '开发集团',
      key: '0-1',
      children: [
        {
          title: '招聘总部',
          key: '0-1-0',
          children: [
            { title: '张三', key: '0-1-0-0' },
            { title: '李四', key: '0-1-0-1' },
            { title: '王五', key: '0-1-0-2' },
          ],
        },
        {
          title: '总裁办',
          key: '0-1-1',
          children: [
            { title: '王红', key: '0-1-1-0' },
            { title: '李九', key: '0-1-1-1' },
            { title: '陈爸', key: '0-1-1-2' },
          ],
        },
        { title: '研发中心', key: '0-1-2' },
      ],
    },
  ]

递归

 const formatTreeLevl=(data:any)=>{

   if(!data)return []
   const find = (arr, parentId = '') => {
     for (let i = 0; i < arr.length; i++) {
       if (Array.isArray(arr[i].children) && arr[i].children.length > 0) {
         const resParentId:string=parentId?`${parentId}-${i + 1}`:`${i+1}`
         arr[i].idCode =resParentId
         //递归调用
         find(arr[i].children, resParentId)
       } else {
         arr[i].idCode =parentId?`${parentId}-${i + 1}`:i+1
       }
     }
   }
   const authDataCopy = data
   find(authDataCopy)

   return  authDataCopy
 }

增加后的数据

[
    {
        "title": "开发集团",
        "key": "0-1",
        "children": [
            {
                "title": "招聘总部",
                "key": "0-1-0",
                "children": [
                    {
                        "title": "张三",
                        "key": "0-1-0-0",
                        "idCode": "1-1-1"
                    },
                    {
                        "title": "李四",
                        "key": "0-1-0-1",
                        "idCode": "1-1-2"
                    },
                    {
                        "title": "王五",
                        "key": "0-1-0-2",
                        "idCode": "1-1-3"
                    }
                ],
                "idCode": "1-1"
            },
            {
                "title": "总裁办",
                "key": "0-1-1",
                "children": [
                    {
                        "title": "王红",
                        "key": "0-1-1-0",
                        "idCode": "1-2-1"
                    },
                    {
                        "title": "李九",
                        "key": "0-1-1-1",
                        "idCode": "1-2-2"
                    },
                    {
                        "title": "陈爸",
                        "key": "0-1-1-2",
                        "idCode": "1-2-3"
                    }
                ],
                "idCode": "1-2"
            },
            {
                "title": "研发中心",
                "key": "0-1-2",
                "idCode": "1-3"
            }
        ],
        "idCode": "1"
    }
]