vue实现css一键复制

（与复制相关的JS代码在文末有详解，直接给代码，有用的话点点赞哈）

简介

navigator.clipboard
使用说明：

1. 确保你的网页在 HTTPS 下运行，因为出于安全原因，navigator.clipboard API 可能在 HTTP 环境下不可用。
2. 确保 cssCode 这个对象以及其 value 属性已经被正确定义和初始化。
3. 调用 copyCssCode() 函数时，它会尝试将 cssCode.value 的内容复制到剪贴板。
4. 如果复制成功，用户会看到一个弹窗提示“CSS代码已复制到剪贴板！”。
5. 如果复制失败，用户会看到一个弹窗提示“复制失败，请手动复制。”，并且在浏览器的控制台中会显示具体的错误信息。

为了使这段代码正常工作，你需要确保 cssCode 对象以及其 value 属性存在并包含了你想要复制的内容。如果 cssCode 还没有定义，你可能需要先定义它，例如：

const cssCode = {
  value: '你要复制的CSS代码内容'
};

之后，每当你想要复制 cssCode.value 的内容时，只需调用 copyCssCode() 函数即可。

实操

下面我将要使用VUE，编写一键复制的效果实例

<template>
  <div class="css-display">
    <h3>图形CSS:</h3>
    <pre>{{ cssCode }}</pre>
    <button @click="copyCssCode">复制CSS代码</button>
  </div>
</template>

写一下复制的算法，以及CSS显示的效果

<script setup>
import { computed } from 'vue';
import { useCounterStore } from '@/stores/counter';

const store = useCounterStore();

const cssCode = computed(() => {
  const insetStr = store.inset ? 'inset' : '';
  return `
.shape {
  width: 150px; /* 图形宽度 */
  height: 100px; /* 图形高度 */
  background-color: #3375a2; /* 背景颜色 */
  box-shadow: ${insetStr} ${store.hOffset}px ${store.vOffset}px ${store.blur}px ${store.spread}px ${store.color}; /* 阴影效果 */
}`;
});

// 复制CSS代码到剪贴板
const copyCssCode = async () => {
  try {
    await navigator.clipboard.writeText(cssCode.value);
    alert('CSS代码已复制到剪贴板！');
  } catch (err) {
    console.error('复制失败:', err);
    alert('复制失败，请手动复制。');
  }
};
</script>

下面写一个按钮

button {
  margin-top: 10px;
  padding: 5px 10px;
  background-color: #d9d9d9;
  color: #d5d5d5;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
button:hover {
  background-color: #888888;
}

这段代码定义了一个名为 copyCssCode 的异步函数，它的主要目的是将某个变量 cssCode.value 中的内容复制到用户的剪贴板，并给用户一个提示。以下是对这段代码的详细解释：

// 定义一个异步函数名为 copyCssCode
const copyCssCode = async () => {
  // 使用 try...catch 语句来处理可能出现的异步错误
  try {
    // 调用浏览器的 clipboard API 的 writeText 方法，尝试将 cssCode.value 的内容复制到剪贴板
    // 注意：这里假设 cssCode 是一个已经定义的对象，且它有一个名为 value 的属性
    await navigator.clipboard.writeText(cssCode.value);
    
    // 如果复制成功，则显示一个弹窗提示用户 CSS 代码已经被复制到剪贴板
    alert('CSS代码已复制到剪贴板！');
  } catch (err) {
    // 如果复制过程中出现异常，则在控制台输出错误信息
    console.error('复制失败:', err);
    
    // 同时，也显示一个弹窗告诉用户复制失败
    alert('复制失败，请手动复制。');
  }
};