快捷導航

Vue3+Antd實現(xiàn)彈框顯示內(nèi)容并加入復(fù)制按鈕

更新時間：2023年12月11日 10:03:03 作者：依稀i123

這篇文章主要介紹了Vue3+Antd實現(xiàn)彈框顯示內(nèi)容并加入復(fù)制按鈕,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧

使用Vue3+antd實現(xiàn)點擊彈框出現(xiàn)內(nèi)容并可復(fù)制內(nèi)容的功能：

HTML部分：

<a-button type="primary" @click="showModel">
  打開彈框
</a-button>
<!-- @ok 是彈框中確定按鈕的操作，@cancel 是彈框中取消按鈕的操作 -->
<a-modal
    title="內(nèi)容如下"
    :visible="isModalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
>
  <div  style="display: flex; flex-direction: column; align-items: center;">
    <p>彈框內(nèi)容</p>
    <a-button type="primary" @click="copyContent">復(fù)制</a-button>
  </div>
</a-modal>

JS部分：

  import {message} from "ant-design-vue";
  const isModalVisible = ref(false)
  // 打開彈框
  const showModel = () => {
    isModalVisible.value = true
  }
  // 彈框中取消按鈕
  const handleCancel = () => {
    isModalVisible.value = false;
  }
  // 彈框中復(fù)制按鈕
  const copyContent = () => {
    const textToCopy = '彈框內(nèi)容';    // 彈框內(nèi)容，即<p>中的內(nèi)容
    navigator.clipboard.writeText(textToCopy).then(() => {
      message.success("復(fù)制成功")
      console.log('Text copied to clipboard');
    }).catch((err) => {
      message.warning("復(fù)制失敗")
      console.error('Unable to copy text to clipboard', err);
    });
  }
  // 彈框中確定按鈕
  const handleOk = () => {
    isModalVisible.value = false;
  };

以上代碼彈框是有兩個按鈕：取消、確認。

如何實現(xiàn)只有一個取消/確認按鈕

新增：:footer="null" 即可取消掉兩個按鈕，但是要手動加入按鈕：

<a-modal
    title="內(nèi)容如下"
    :visible="isModalVisible"
    :footer="null"
>
  <div  style="display: flex; flex-direction: column; align-items: center;">
    <p>彈框內(nèi)容</p>
    <a-button type="primary" @click="copyContent">復(fù)制</a-button>
  </div>
  <div align="right">
    <a-button type="default" align="right" @click="handleCancel">取消</a-button>
  </div>
</a-modal>

修改確認/取消按鈕位置樣式等

<a-button type="primary" @click="showModel">
  打開彈框
</a-button>
<!-- @ok 是彈框中確定按鈕的操作，@cancel 是彈框中取消按鈕的操作 -->
<a-modal
    title="內(nèi)容如下"
    :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>彈框內(nèi)容</p>
    <a-button type="primary" @click="copyContent">復(fù)制</a-button>
  </div>
</a-modal>

到此這篇關(guān)于Vue3+Antd實現(xiàn)彈框顯示內(nèi)容并加入復(fù)制按鈕的文章就介紹到這了,更多相關(guān)Vue3 Antd彈框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: