elm.animate([
    {
        transformOrigin: 'top left',
        transform: `
            translate(${deltaX}px, ${deltaY}px)
            scale(${deltaW}, ${deltaH})
        `
    }, 
    {
        transformOrigin: 'top left',
        transform: 'none'
    }], 
    {
        duration: 300,
        easing: 'ease-in-out',
        fill: 'both'
    }
);

element.animate(keyframes, options)

const box = document.querySelector('.box')

const animation = box.animate(
  [
    { transform: 'translateX(0px)', opacity: 1 },
    { transform: 'translateX(200px)', opacity: 0.5 }
  ],
  {
    duration: 1000, // 动画持续 1 秒
    easing: 'ease', // 缓动函数
    iterations: 1   // 播放次数，Infinity 表示无限循环
  }
)

animation.play()       // 播放
animation.pause()      // 暂停
animation.reverse()    // 反向播放
animation.cancel()     // 取消动画，恢复到初始状态
animation.finish()     // 跳到动画结束状态

animation.currentTime = 500   // 设置到第 500ms
animation.playbackRate = 2    // 两倍速播放

animation.onfinish = () => console.log('动画结束')

[
  { transform: 'translateX(0px)', opacity: 1 },
  { transform: 'translateX(100px)', opacity: 0.5 }
]

{
  0: { transform: 'translateX(0)' },
  1: { transform: 'translateX(100px)' }
}

[
  { transform: 'translateX(0)', offset: 0 },
  { transform: 'translateX(100px)', offset: 1 }
]

const box = document.querySelector('.box')

const move = box.animate(
  [{ transform: 'translateX(0)' }, { transform: 'translateX(200px)' }],
  { duration: 1000, fill: 'forwards' }
)

const fade = box.animate(
  [{ opacity: 1 }, { opacity: 0 }],
  { duration: 1000, fill: 'forwards' }
)

Promise.all([
  move.finished,
  fade.finished
]).then(() => console.log('所有动画结束'))

const timeline = new DocumentTimeline({ originTime: 0 })
const anim = element.animate(keyframes, { duration: 2000, timeline })

function handleClick3() {
  let el = elment.value
  el.style.transition = 'transform 2s ease'   // ① 告诉浏览器：transform 的变化要过渡
  el.style.transform = `translateX(200px)`   // ② 改变 transform 值
}

function handleClick2() {
  let el = elment.value
  el.style.transition = 'transform 2s ease'
  el.style.transform = `translateX(200px)`

  setTimeout(() => {
    el.style.transform = ''
  }, 2000)
}

function handleClick1(){
    let el = elment.value
    el.style.transition = ''
    el.style.transform = `translateX(200px)`
    requestAnimationFrame(() => {
        el.style.transition = 'transform 2s ease'
        el.style.transform = ''
    })
}

JS 执行 → 样式计算 → 布局 → 绘制 → 合成 → 下一帧

[JS 执行] → [样式计算] → [布局] → [绘制] → [合成显示]

这一帧执行完后 ↓
下一帧开始前 → 调用你的 callback → 然后计算样式 → 布局 → 绘制

var observer = new MutationObserver(callback);

function callback(mutationList, observer) {
  mutationList.forEach((mutation) => {
    switch (mutation.type) {
      case "childList":
        /* 从树上添加或移除一个或更多的子节点；参见 mutation.addedNodes 与
           mutation.removedNodes */
        break;
      case "attributes":
        /* mutation.target 中某节点的一个属性值被更改；该属性名称在 mutation.attributeName 中，
           该属性之前的值为 mutation.oldValue */
        break;
    }
  });
}

mutationObserver.observe(target[, options])

var targetNode = document.querySelector("#someElement");
var observerOptions = {
  childList: true,
  attributes: true,
};

var observer = new MutationObserver(callback);
observer.observe(targetNode, observerOptions);

// ... 运行中监听 DOM 变化 ...

// 停止监听前

var mutations = observer.takeRecords();

if (mutations) {
  callback(mutations);
}

observer.disconnect();

// 选择需要观察变动的节点
const targetNode = document.getElementById("some-id");

// 观察器的配置（需要观察什么变动）
const config = { attributes: true, childList: true, subtree: true };

// 当观察到变动时执行的回调函数
const callback = function (mutationsList, observer) {
  // Use traditional 'for loops' for IE 11
  for (let mutation of mutationsList) {
    if (mutation.type === "childList") {
      console.log("A child node has been added or removed.");
    } else if (mutation.type === "attributes") {
      console.log("The " + mutation.attributeName + " attribute was modified.");
    }
  }
};

// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(callback);

// 以上述配置开始观察目标节点
observer.observe(targetNode, config);

// 之后，可停止观察
observer.disconnect();

new ResizeObserver(callback)

`entries`

	一个 `ResizeObserverEntry` 对象数组，可以用于获取每个元素改变后的新尺寸。

`observer`

	对 `ResizeObserver` 自身的引用，因此需要它的时候，你要从回调函数的内部访问。例如，这可用于在达到特定的情况时，自动取消对观察者的监听，但如果你不需要它，可以省略它。回调通常遵循以下模式：

function callback(entries, observer) {
  for (const entry of entries) {
    // Do something to each entry
    // and possibly something to the observer itself
  }
}

observe(target)
observe(target, options)

unobserve(target)

const h1Elem = document.querySelector("h1");
const pElem = document.querySelector("p");
const divElem = document.querySelector("body > div");
const slider = document.querySelector('input[type="range"]');
const checkbox = document.querySelector('input[type="checkbox"]');

divElem.style.width = "600px";

slider.addEventListener("input", () => {
  divElem.style.width = `${slider.value}px`;
});

const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      // Firefox implements `contentBoxSize` as a single content rect, rather than an array
      const contentBoxSize = Array.isArray(entry.contentBoxSize)
        ? entry.contentBoxSize[0]
        : entry.contentBoxSize;

      h1Elem.style.fontSize = `${Math.max(
        1.5,
        contentBoxSize.inlineSize / 200,
      )}rem`;
      pElem.style.fontSize = `${Math.max(
        1,
        contentBoxSize.inlineSize / 600,
      )}rem`;
    } else {
      h1Elem.style.fontSize = `${Math.max(
        1.5,
        entry.contentRect.width / 200,
      )}rem`;
      pElem.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
    }
  }

  console.log("Size changed");
});

resizeObserver.observe(divElem);

checkbox.addEventListener("change", () => {
  if (checkbox.checked) {
    resizeObserver.observe(divElem);
  } else {
    resizeObserver.unobserve(divElem);
  }
});

const divElem = document.querySelector("body > div");

const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    entry.target.style.width = `${entry.contentBoxSize[0].inlineSize + 10}px`;
  }
});

resizeObserver.observe(divElem);

window.addEventListener("error", (e) => {
  console.error(e.message);
});

const divElem = document.querySelector("body > div");

const resizeObserver = new ResizeObserver((entries) => {
  requestAnimationFrame(() => {
    for (const entry of entries) {
      entry.target.style.width = `${entry.contentBoxSize[0].inlineSize + 10}px`;
    }
  });
});

resizeObserver.observe(divElem);

window.addEventListener("error", (e) => {
  console.error(e.message);
});

const divElem = document.querySelector("body > div");
const expectedSizes = new WeakMap();

const resizeObserver = new ResizeObserver((entries) => {
  requestAnimationFrame(() => {
    for (const entry of entries) {
      const expectedSize = expectedSizes.get(entry.target);
      if (entry.contentBoxSize[0].inlineSize === expectedSize) {
        continue;
      }
      const newSize = entry.contentBoxSize[0].inlineSize + 10;
      entry.target.style.width = `${newSize}px`;
      expectedSizes.set(entry.target, newSize);
    }
  });
});

resizeObserver.observe(divElem);

window.addEventListener("error", (e) => {
  console.error(e.message);
});

new IntersectionObserver(callback)
new IntersectionObserver(callback, options)

const intersectionObserver = new IntersectionObserver((entries) => {
  // 如果 intersectionRatio 为 0，则目标在视野外，
  // 我们不需要做任何事情。
  if (entries[0].intersectionRatio <= 0) return;

  loadItems(10);
  console.log("Loaded new items");
});
// 开始监听
intersectionObserver.observe(document.querySelector(".scrollerFooter"));

function perf_observer(list, observer) {
  // Process the "measure" event
  // 处理 "measure" 事件
}
var observer2 = new PerformanceObserver(perf_observer);
observer2.observe({ entryTypes: ["measure"] });

new CustomEvent(type, options);

// 1. 创建自定义事件
const myEvent = new CustomEvent('userLogin', {
  detail: {
    username: 'alice',
    timestamp: Date.now(),
    role: 'admin'
  },
  bubbles: true,
  cancelable: true
});

// 2. 触发事件（在某个 DOM 元素上）
document.getElementById('loginBtn').dispatchEvent(myEvent);
// 或者在 window 上
// window.dispatchEvent(myEvent);

// 使用 addEventListener 监听
document.getElementById('loginBtn').addEventListener('userLogin', function(e) {
  console.log('用户登录了:', e.detail.username);
  console.log('角色:', e.detail.role);
});

// 或监听 window
window.addEventListener('userLogin', (e) => {
  console.log('全局监听到登录:', e.detail);
});

// 创建自定义事件
const catFound = new CustomEvent("animalfound", {
  detail: {
    name: "猫",
  },
});
const dogFound = new CustomEvent("animalfound", {
  detail: {
    name: "狗",
  },
});

// 添加合适的事件监听器
obj.addEventListener("animalfound", (e) => console.log(e.detail.name));

// 触发事件
obj.dispatchEvent(catFound);
obj.dispatchEvent(dogFound);

// 控制台中输出“猫”和“狗”

const Row = ({ index, style, forwardRef }) => {
  return (
    <div className={index % 2 ? 'list-item-odd' : 'list-item-even'} style={style} ref={forwardRef}>
      {`Row ${index}`}
    </div>
  )
}
 
const App = () => {
  return (
    <FixedSizeList
      className="list"
      height={200}
      width={200}
      itemSize={50}
      itemCount={1000}
    >
      {Row}
    </FixedSizeList>
  );
}

const rowSizes = new Array(1000).fill(true).map(() => 25 + Math.round(Math.random() * 55))
const getItemSize = (index) => rowSizes[index];
 
const Row = ({ index, style }) => {
  return (
    <div className={index % 2 ? 'list-item-odd' : 'list-item-even'} style={style} >
      Row {index}
    </div>
  )
}

const App = () => {
  return (
    <VariableSizeList
      className="list"
      height={200}
      width={200}
      itemSize={getItemSize}
      itemCount={1000}
    >
      {Row}
    </VariableSizeList>
  );
}

<div id="box" style="width:100px;height:100px;background:red;margin-top:50px;"></div>
<script>
  const box = document.getElementById('box');
  console.log('offsetTop:', box.offsetTop);
  console.log('getBoundingClientRect:', box.getBoundingClientRect());
  console.log('窗口滚动距离:', window.scrollX, window.scrollY);
  window.addEventListener('click', e => {
    console.log('clientX/Y:', e.clientX, e.clientY);
    console.log('pageX/Y:', e.pageX, e.pageY);
    console.log('offsetX/Y:', e.offsetX, e.offsetY);
  });
</script>

<div id="box" style="position:absolute;width:100px;height:100px;background:red;"></div>

<script>
const box = document.getElementById('box');
box.style.left = '200px';
box.style.top = '100px';
</script>

box.style.transform = 'translate(200px, 100px)';

// 设置某个元素的滚动条
element.scrollTop = 100;
element.scrollLeft = 50;

// 设置整个页面滚动条
window.scrollTo({ top: 300, left: 0, behavior: 'smooth' }); // 平滑滚动

rect.setAttribute('x', 100);
rect.setAttribute('y', 200);

const targetRect = target.getBoundingClientRect();
box.style.left = targetRect.left + window.scrollX + 'px';
box.style.top  = targetRect.bottom + window.scrollY + 'px';

const box = document.querySelector('.box');

box.addEventListener('scroll', (e) => {
  console.log('滚动位置：', box.scrollTop);
});

const isBottom = box.scrollTop + box.clientHeight >= box.scrollHeight;

// 滚动到顶部
box.scrollTo({ top: 0, behavior: 'smooth' });

// 向下滚动100px
box.scrollBy({ top: 100, behavior: 'smooth' });

// 滚动让目标元素可见
document.querySelector('#target').scrollIntoView({ behavior: 'smooth' });

.cursor-ew-resize {
    cursor: ew-resize;
}

<template>
  <div class="p-[40px]">
    <div class=" h-[200px] bg-pink-500 inline-block" :style="{ width: leftWidth + 'px' }"></div><div class="h-[200px] w-1 [cursor:ew-resize] bg-gray-700 inline-block" @mousedown="handleMouseDown"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
const leftWidth = ref(100) // 初始宽度
const isDragging = ref(false)
const handleMouseDown = () => {
  console.log('down');
  isDragging.value = true
  document.body.style.userSelect = 'none'
}
const handleMouseUp = () => {
  console.log('up');
  isDragging.value = false
  document.body.style.userSelect = ''
}
function onMouseMove(e) {
  if (!isDragging.value) return
  // 限制最小宽度 100px，最大宽度 600px
  leftWidth.value = Math.min(Math.max(e.clientX, 100), 600)-40
}
onMounted(() => {
  document.addEventListener('mousemove', onMouseMove)
  document.addEventListener('mouseup', handleMouseUp)
})
</script>

document.addEventListener('mouseup', handleMouseUp)

//恢复浏览器默认行为（通常是**允许用户选择文字**，除非外部 CSS 有覆盖）
document.body.style.userSelect = ''
//显式禁止用户选择 `body` 里的任何文字或元素。
document.body.style.userSelect = 'none'

<template>
  <div class="p-[40px]">
    <div style="resize:both; overflow: auto; width: 300px; border: 1px solid #ccc;">2  可拖动改变宽度3</div>
  </div>
</template>

npm install --save vue-draggable-resizable

import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'

// 可选择导入默认样式
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'

Vue.component('vue-draggable-resizable', VueDraggableResizable)

import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'

// 获取当前元素的边界
const first = el.getBoundingClientRect() 

// 通过给元素添加一个类名，设置元素最后状态的位置和大小 （在.totes-at-the-end中添加相应的样式规则）
// 布局发生了变化
el.classList.add('totes-at-the-end')

// 记录元素最后状态的位置和尺寸大小
const last = el.getBoundingClientRect()

const deltaX = first.left - last.left
const deltaY = first.top - last.top
const deltaW = first.width / last.width
const deltaH = first.height / last.height

elm.animate([
    {
        transformOrigin: 'top left',
        transform: `
            translate(${deltaX}px, ${deltaY}px)
            scale(${deltaW}, ${deltaH})
        `
    }, 
    {
        transformOrigin: 'top left',
        transform: 'none'
    }], 
    {
        duration: 300,
        easing: 'ease-in-out',
        fill: 'both'
    }
);

// 获取当前元素的边界
const first = el.getBoundingClientRect() 

// 通过给元素添加一个类名，设置元素最后状态的位置和大小 （在.totes-at-the-end中添加相应的样式规则）
// 布局发生了变化
el.classList.add('totes-at-the-end')

// 记录元素最后状态的位置和尺寸大小
const last = el.getBoundingClientRect()

const deltaX = first.left - last.left
const deltaY = first.top - last.top
const deltaW = first.width / last.width
const deltaH = first.height / last.height

elm.animate([
    {
        transformOrigin: 'top left',
        transform: `
            translate(${deltaX}px, ${deltaY}px)
            scale(${deltaW}, ${deltaH})
        `
    }, 
    {
        transformOrigin: 'top left',
        transform: 'none'
    }], 
    {
        duration: 300,
        easing: 'ease-in-out',
        fill: 'both'
    }
);

// 获取父元素
const parentElm = document.querySelector('.parent');

// 获取子元素
const childElm = document.querySelector('.parent > .child');

// First: 父元素和子元素的初始位置和尺寸
const parentFirst = parentElm.getBoundingClientRect();
const childFirst = childElm.getBoundingClientRect();

doSomething();

// Last: 父元素和子元素最后位置和尺寸
const parentLast = parentElm.getBoundingClientRect();
const childLast = childElm.getBoundingClientRect();

// Invert: 父元素开始和结束位置
const parentDeltaX = parentFirst.left - parentLast.left;
const parentDeltaY = parentFirst.top - parentLast.top;

// Invert: 子元素相对于父元素位置 
const childDeltaX = (childFirst.left - parentFirst.left) - (childLast.left - parentLast.left);
const childDeltaY = (childFirst.top - parentFirst.top) - (childLast.top - parentLast.top);

// Play: 使用 WAAPI 设置动效
parentElm.animate([
    { 
        transform: `translate(${parentDeltaX}px, ${parentDeltaY}px)` 
    },
    { 
        transform: 'none' 
    }
], { 
        duration: 300, easing: 'ease-in-out' 
    }
);

childElm.animate([
    { 
        transform: `translate(${childDeltaX}px, ${childDeltaY}px)` 
    },
    { 
        transform: 'none' 
    }
], { 
        duration: 300, easing: 'ease-in-out' 
    }
);

/* 禁止选中文本 */
.no-select {
  user-select: none;
}

/* 可以正常选中（默认值） */
.select {
  user-select: text;
}

/* 只允许双击或拖动选择整个块 */
.block-select {
  user-select: all;
}

::selection {
  background: #ff9800; /* 选中文字背景色 */
  color: white;        /* 选中文字颜色 */
}

function selectText(el) {
  const range = document.createRange();
  range.selectNodeContents(el);
  const sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
}

// 用法：传入 DOM 节点
selectText(document.getElementById("target"));

const input = document.querySelector("#myInput");
input.select(); // 选中输入框内容

const text = window.getSelection().toString();
console.log("当前选中的文本：", text);

<input id="myInput" value="Hello, 复制我！">
<button id="copyBtn">复制</button>

<script>
document.getElementById("copyBtn").addEventListener("click", async () => {
  const input = document.getElementById("myInput");
  try {
    // 方法一：直接复制 input 的 value
    await navigator.clipboard.writeText(input.value);
    alert("已复制到剪贴板：" + input.value);
  } catch (err) {
    console.error("复制失败：", err);
  }
});
</script>

await navigator.clipboard.writeText("任意内容也能复制");

document.addEventListener("copy", (e) => {
  e.preventDefault(); // 阻止默认复制
  e.clipboardData.setData("text/plain", "这是我指定的复制内容！");
});

function oldCopy(text) {
  const textarea = document.createElement("textarea");
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  document.body.removeChild(textarea);
}

// 检查当前周是否可见
const checkCurrentWeekVisibility = (container) => {
  const currentWeekElement = document.querySelector(`.timeline-item:nth-child(${currentWeekIndex.value + 1})`);
  if (currentWeekElement) {
    const elementRect = currentWeekElement.getBoundingClientRect();
    const containerRect = container.getBoundingClientRect();
      //计算坐标
    const isVisible = elementRect.left >= containerRect.left && elementRect.right <= containerRect.right;
    showBackToCurrentWeek.value = !isVisible;
  }
}

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('元素可见', entry.intersectionRatio);
    } else {
      console.log('元素不可见');
    }
  });
}, {
  root: null, // 默认为视口
  threshold: [0, 0.5, 1] // 可见比例阈值
});

observer.observe(document.querySelector('#target'));

function isFullyVisible(el) {
  const rect = el.getBoundingClientRect();
  const cx = rect.left + rect.width / 2;
  const cy = rect.top + rect.height / 2;
  return document.elementFromPoint(cx, cy) === el;
}

<template>
  <div
    class="absolute w-32 h-32 bg-blue-400 cursor-grab"
    :style="{ transform: `translate(${x}px, ${y}px)` }"
    @mousedown="startDrag"
  ></div>
</template>

<script setup>
import { ref } from 'vue'
const x = ref(0)
const y = ref(0)
let startX, startY, originX, originY

function startDrag(e) {
  startX = e.clientX
  startY = e.clientY
  originX = x.value
  originY = y.value
  document.addEventListener('mousemove', onMove)
  document.addEventListener('mouseup', stopDrag)
}

function onMove(e) {
  x.value = originX + (e.clientX - startX)
  y.value = originY + (e.clientY - startY)
}

function stopDrag() {
  document.removeEventListener('mousemove', onMove)
  document.removeEventListener('mouseup', stopDrag)
}
</script>

<div draggable="true" @dragstart="onDragStart" @dragend="onDragEnd">
  拖动我
</div>

<template>
  <div class="container">
    <div
      class="draggable"
      draggable="true"
      :style="{ left: pos.x + 'px', top: pos.y + 'px' }"
      @dragstart="onDragStart"
      @dragend="onDragEnd"
    >
      拖我
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";

const pos = reactive({ x: 50, y: 50 });
let offset = { x: 0, y: 0 };

const onDragStart = (e) => {
  // 计算鼠标点击点相对元素左上角的偏移
  const rect = e.target.getBoundingClientRect();
  offset.x = e.clientX - rect.left;
  offset.y = e.clientY - rect.top;
  // 让浏览器不显示默认的拖拽影子
  const img = new Image();
  img.src =
    "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==";
  e.dataTransfer.setDragImage(img, 0, 0);
};

const onDragEnd = (e) => {
  // 松开时更新元素位置
  pos.x = e.clientX - offset.x;
  pos.y = e.clientY - offset.y;
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
  background: #f8f8f8;
  position: relative;
}
.draggable {
  width: 80px;
  height: 80px;
  background: #42b883;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: grab;
  position: absolute;
  user-select: none;
}
</style>

element.addEventListener('pointerdown', e => {
  element.setPointerCapture(e.pointerId)
})
element.addEventListener('pointermove', e => {
  // 更新位置
})
element.addEventListener('pointerup', e => {
  element.releasePointerCapture(e.pointerId)
})

<template>
  <div class="container">
    <div
      class="draggable"
      :style="{ left: pos.x + 'px', top: pos.y + 'px' }"
      ref="dragEl"
    >
      拖我
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";

const dragEl = ref(null);
const pos = reactive({ x: 50, y: 50 }); // 元素当前坐标
let start = { x: 0, y: 0 }; // pointerdown 时鼠标位置
let offset = { x: 0, y: 0 }; // pointerdown 时元素位置

onMounted(() => {
  const el = dragEl.value;

  el.addEventListener("pointerdown", (e) => {
    start.x = e.clientX;
    start.y = e.clientY;
    offset.x = pos.x;
    offset.y = pos.y;

    // 捕获指针，保证即使光标移出元素仍能接收 pointermove
    el.setPointerCapture(e.pointerId);
  });

  el.addEventListener("pointermove", (e) => {
    if (el.hasPointerCapture(e.pointerId)) {
      // 计算偏移量
      const dx = e.clientX - start.x;
      const dy = e.clientY - start.y;
      pos.x = offset.x + dx;
      pos.y = offset.y + dy;
    }
  });

  el.addEventListener("pointerup", (e) => {
    el.releasePointerCapture(e.pointerId);
  });
});
</script>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
  position: relative;
  background: #f5f5f5;
}

.draggable {
  width: 80px;
  height: 80px;
  background: #42b883;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  position: absolute;
  cursor: grab;
  user-select: none;
  touch-action: none; /* 防止触摸时触发页面滚动 */
}
</style>

.custom-button-class::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: inherit;   /* 继承父背景 */
  clip-path: polygon(50% 100%, 0 0, 100% 0); /* 裁剪成三角 */
}

<!--vue写法-->
<div class="custom-button-class" :style="{ '--bg-color': getGradientColor(classRate)}">

//原生写法
document.querySelector('.custom-button-class')
        .style.setProperty('--bg-color', '#37E19A');

.custom-button-class::before {
  content: "";
  border-color: var(--bg-color);
}

const sheet = document.styleSheets[0]; 
sheet.insertRule(
  ".custom-button-class::before { border-color: #37E19A transparent transparent transparent; }",
  sheet.cssRules.length
);