Vue3+Antd实现弹框显示内容并加入复制按钮_antdesign vue 复制

JS部分：

  import {message} from "ant-design-vue";
  const isModalVisible = ref(false)
  // 打开弹框
  const showModel = () => {
    isModalVisible.value = true
  // 弹框中取消按钮
  const handleCancel = () => {
    isModalVisible.value = false;
  // 弹框中复制按钮
  const copyContent = () => {
    const textToCopy = '弹框内容';    // 弹框内容，即<p>中的内容
    navigator.clipboard.writeText(textToCopy).then(() => {
      message.success("复制成功")
      console.log('Text copied to clipboard');
    }).catch((err) => {
      message.warning("复制失败")
      console.error('Unable to copy text to clipboard', err);
  // 弹框中确定按钮
  const handleOk = () => {
    isModalVisible.value = false;
以上代码弹框是有两个按钮：取消、确认。 
如何实现只有一个取消/确认按钮 
新增：:footer="null" 即可取消掉两个按钮，但是要手动加入按钮： 
<a-modal
    title="内容如下"
    :visible="isModalVisible"
    :footer="null"
  <div  style="display: flex; flex-direction: column; align-items: center;">
    <p>弹框内容</p>
    <a-button type="primary" @click="copyContent">复制</a-button>
  <div align="right">
    <a-button type="default" align="right" @click="handleCancel">取消</a-button>
</a-modal> 
修改确认/取消按钮位置样式等 
<a-button type="primary" @click="showModel">
</a-button>
<!-- @ok 是弹框中确定按钮的操作，@cancel 是弹框中取消按钮的操作 -->
<a-modal
    title="内容如下"
    :visible="isModalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
  <template #okText>
    修改'确认'按钮中的文本
  </template>
  <template #cancelText>
    修改'取消'按钮中的文本
  </template>
  <template #footer>
    自定义按钮位置样式等
  </template>
  <template #closeIcon>
    修改弹框右上角'x'的样式
  </template>
  <div  style="display: flex; flex-direction: column; align-items: center;">
    <p>弹框内容</p>
    <a-button type="primary" @click="copyContent">复制</a-button>
</a-modal> 
  <div class="c-data-table">
    <a-spin :spinning="spinning">
      <a-card :title="title" :bordered="false">
        <div class="dt-search" v-if="$s
				记录一下工作中学习，需求背景：用户在上传项目中遇到的问题图片时，需要先用截图工具保存图片到本地，然后再点击上传按钮来上传图片，操作繁琐，能不能像聊天工具一样支持复制粘贴上传。需求描述：支持用户粘贴上传图片。
先展示一下项目中使用上传组件的逻辑，展示不了公司代码，就自己写的小demo，代码有待优化。
import React, { useEffect, useState } from 'react';
import { Upload, Modal } from 'antd';
import * as _
import { message } from 'ant-design-vue';
export const clipBoard = (value: string) => {
  const textarea: HTMLTextAreaElement = document.createElement('textarea');
  textarea.setAttribute('readonly', 'readonly');
  textarea.value = value;
  document
将basedir/old/old.txt文件拷贝到{basedir}/old/old.txt文件拷贝到{basedir}/new下
拷贝一批文件到指定目录下 
例：<copy todir="${basedir}/new"> 
       <fileset dir="${basedir}/old">
				今天实现的是，树形控件右键点击会出现操作菜单，增加、修改、删除按钮会弹出相应的操作弹窗。
根据ant design vue 的右键点击事件rightClick 来控制菜单的显示和隐藏就简单了
效果如下：（样式还没写，所以比较简单）
//树结构
<a-directory-tree
    :tree-data="filetreeData"
    @rightClick="onRightClick" 
</a-directory-tree>
//功能菜单
document.execCommand("copy")
如果是输入框，可以通过select()方法，选中输入框的文本，然后调用 copy 命令，将文本复制到剪切板。但是 select() 方法只对 <input> 和 <textarea> 有效，对于 <p> 就不好用了
functioncopyUrl() {
$("#copyinput").select();// 选择对象...
private copy(): void {
const content = document.getElementsByClassName(‘page-new-link-src’)[0].innerHTML;
navigator.clipboard.writeText(content);
结合antd的复制文本
import {Typography } from ...
				需求：页面做了禁止复制，要求鼠标移动到部分内容上可以出现快捷复制的按钮。
为该列添加一个插槽，在这一列的columns写，
scopedSlots: { customRender: 'sparePartsNum' },
sparePartsNum为插槽名。
<template slot="sparePartsNum" slot-scope="text">
          <a-popover :getPopupContainer="getPopupContainer" placeme
				好的，针对你的问题，我们可以通过以下步骤实现：
1. 在Vue3项目中引入Antd和Axios：在Vue3项目中，可以通过npm或yarn安装Antd和Axios，并在main.js中引入。
2. 定义章节列表和当前章节索引：在Vue3组件中，我们可以使用data属性定义章节列表和当前章节索引。
3. 通过Axios获取小说章节列表：在mounted钩子中，使用Axios发送请求获取小说章节列表，并将结果存储在章节列表中。
4. 实现切换章节的方法：在Vue3组件中定义一个方法，通过修改当前章节索引实现切换小说章节。
5. 实现按钮点击事件：在Vue3组件中，可以使用Antd的Button组件实现按钮，并绑定点击事件调用切换章节的方法。
下面是具体实现代码示例：
```vue
<template>
    <h2>{{ chapter.title }}</h2>
    <p>{{ chapter.content }}</p>
      <a-button type="primary" @click="prevChapter">上一章</a-button>
      <a-button type="primary" @click="nextChapter">下一章</a-button>
</template>
<script>
import axios from 'axios';
import { Button } from 'ant-design-vue';
export default {
  components: {
    'a-button': Button,
  data() {
    return {
      chapters: [], // 章节列表
      currentChapterIndex: 0, // 当前章节索引
  mounted() {
    // 获取小说章节列表
    axios.get('/api/chapters').then(res => {
      this.chapters = res.data;
  computed: {
    chapter() {
      return this.chapters[this.currentChapterIndex];
  methods: {
    prevChapter() {
      if (this.currentChapterIndex > 0) {
        this.currentChapterIndex--;
    nextChapter() {
      if (this.currentChapterIndex < this.chapters.length - 1) {
        this.currentChapterIndex++;
</script>
以上就是一个简单的实现小说章节切换的示例代码。需要注意的是，这只是一个简单的示例，实际项目中可能需要更复杂的逻辑和交互效果。
				has been blocked by CORS policy: The ‘Access-Control-Allow-Origin‘ header contains multiple values ‘