【笔记1】记录前端常用方法笔记

//监听窗口的滚动需要加上true才会起效

window.addEventListener(‘scroll’, ()=>{
console.log(‘我开始滚啦啦啦啦啦’);
}, true);

//使props转化为.value
let { msg, selfID, curCve, mutilSelect, audio, msgList, index, clickId } = toRefs(props);

//@mixin、@include，css样式引用
@mixin button{
xxx
}
.button-red{
@include button
}

//实时获取div的高宽

   <template>
  <div ref="resizeRef" class="test"></div>
</template>
const resizeRef = ref()
let resizeObserver = null
const openMonitor = ()=>{
	//获取监听元素 id class ref
		const resizeTarget = resizeRef.value
	// 创建 ResizeObserver 实例
	 resizeObserver = new ResizeObserver(entries => {
	   // entries 是一个 ResizeObserverEntry 对象数组，包含目标元素的信息
	     entries.forEach(item =>{
		const { width,  height } = item.contentRect;
		//获取 监听元素的宽高
		console.log('Width', width)
		console.log('Height', height)
 // 触发自定义的处理逻辑，
        handleResize(width, height);
	  })
    });
     // 开始监听目标元素的大小变化
    resizeObserver.observe((resizeTarget);
    const handleResize = (width, height)=>{
	//执行相关内容
onMounted(() => {
  //dom加载完成时，触发监听事件
  openMonitor()
}

onBeforeUnmount(() => {
  // 关闭ResizeObserver监听器
  if(resizeObserver){
   	resizeObserver.disconnect()
  }
});

//修改表格指定行、列颜色颜色

 :header-cell-style="headerStyleFun"  //针对表头
 :row-class-name="tableRowClassName" ///针对单元格
 :cell-class-name="tableCellClassName" ///针对行
 
//改变表格行颜色
const tableRowClassName = ({ row, column
  if (rowIndex % 2 === 0) {
    return 'success-row'
    }
  }
// 设置点击单元格字体颜色
const tableCellClassName = ({ row,column, rowIndex, columnIndex }) =>{
  if (column.label==='xxxx') {
     return 'cell-color' // 返回样式类名
  }
}
const headerStyleFun = ({ row, column, rowIndex, columnIndex }) => {
    if (rowIndex == 1) {
          return { background: "white" };
    }
}
:deep(.el-table) {
    .success-row {
       --el-table-tr-bg-color: #f1f7fe;
    }
   .cell-color {
      .cell {
        color: #409eff;
        cursor: pointer;
     }
   }
 }

//watch：一次监听多个属性

watch(
  () => [props.date, props.brand],
 () => {
    getData()
  }
)

//实现文字滚动样式效果

HTML：
   <div @mouseenter="changeAnimation(Object.values(text文字)"  @mouseleave="removeClass">
  		 <div class="text_animation"> {{ text文字}}</div>
   </div>

js：
const changeAnimation = (name) => {
const parentElement = event.target;//获取当前鼠标移入的父元素
  let dom = parentElement.getElementsByClassName('text_animation')[0];
  let w = dom.offsetWidth;
    if (w > 111) {
     dom.classList.add('text_animation2');
    }
}
const removeClass = () => { 
const parentElement = event.target;//获取当前鼠标移入的父元素
let dom = parentElement.getElementsByClassName('text_animation')[0];
 dom.classList.remove('text_animation2');
 }

css：  
.text_animation {
    width: 450px;
   word-wrap: normal;
    text-overflow: ellipsis; 
    white-space: nowrap;
    overflow: hidden; 
    }

.text_animation2 {  
overflow: visible !important;
    animation: textAnimation 3.4s infinite linear;
    }
@keyframes textAnimation {
    0% { 
      transform: translateX(0);
    } 
       75% { 
       transform: translateX(-100%);
    } 
       76% { 
      transform: translateX(0);
    } 
       100% { 
      transform: translateX(0);
    } 

// 匹配最后一个 . 之前的字符串
const reg = /([.][^.]+)$/

// 创建独立的vue项目：
npm create vite@latest XXX – --template vue

// 应用element-plus组件
1、先安装；npm install element-plus --save
2、再引用：
import ElementPlus from ‘element-plus’
import * as Icons from ‘@element-plus/icons-vue’
import ‘element-plus/dist/index.css’
app.use(ElementPlus)

// 判断标签内容是否超出标签宽度，超出则显示tooltip

const mouseenterChange = (event, id, row) => {
   const node = event.target;
 const nodeContentWidth = getNodeContentWidth(node);
  const nodeWidth = node.children[0].offsetWidth;
  if (nodeContentWidth > nodeWidth) {
    // 文字溢出
    row.isShowTooltip = true;
     } else {
    row.isShowTooltip = false;
  } 
 }

//计算字符串（包含空格、符号、中英文字母等）占位长度大小

   function getNodeContentWidth(node) {
  // 创建临时元素
  const tempElement = document.createElement('span')
  tempElement.style.visibility = 'hidden' // 确保元素不可见
  tempElement.style.position = 'absolute' // 确保元素脱离文档流
   // 将div内容复制到临时元素
  tempElement.textContent = node.textContent
  // 将临时元素添加到传入元素的父元素中
   node.parentNode.appendChild(tempElement)
  // 获取宽度
  const width = tempElement.clientWidth
  // 移除临时元素
  node.parentNode.removeChild(tempElement)
    return width
}

//合并表格指定列—dimension4

import { orderBy } from 'lodash' 
//获取表格数据
tableData const getData=()=>{ tableData.value = mergeDataByKey('dimension4', orderBy(res.data, ['dimension4', 'desc'])) } 
const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {   
//第二列 if (columnIndex === 1) {
    if (column.property === 'dimension4') {
      return {
     row.rowspan,
        colspan: 1
            }
    }   } }

export const mergeDataByKey = (key, arr) => {  
const list = cloneDeep(arr)    
// 先给所有的数据都加一个v.rowspan = 1
     list.forEach((item) => {
      item.rowspan = 1
      })   // 双层循环    for (let i = 0; i < list.length; i++) {
      for (let j = i + 1; j < list.length; j++) {
      //此处可根据相同字段进行合并，此处是根据的id
          if (list[i]?.[key] === list[j]?.[key]) {
         list[i].rowspan++
              list[j].rowspan--
                   }
      }
      // 这里跳过已经重复的数据
      i = i + list[i].rowspan - 1
       }   return list   }