如何使用naive 做一個模態框的方式

1.我的問題使用了一個table 表格,在表格中設置倆個按鈕

最后做出來的效果

<template><div><h1>測試文件</h1><!-- 表格 --><n-data-table :columns="columns" :data="data" :pagination="pagination" :bordered="false" /><!-- 彈出框 --><n-modal v-model:show="showModal" :mask-closable="false" preset="dialog" title="確認" content="你確認"positive-text="確認" negative-text="算了" @positive-click="tanVerify" @negative-click="tanCancel" /></div>
</template><script>import {h,defineComponent,ref} from "vue";import {NButton,createDiscreteApi,NDataTable,NModal} from "naive-ui";const createColumns = ({updataPlay}) => {return [{title: "No",key: "no"},{title: "Title",key: "title"},{title: "Length",key: "length"},{title: "Action",key: "actions",render(row) {return [h(NButton, {strong: true,tertiary: true,size: "small",onClick: () => updataPlay(row)}, {default: () => "修改"}),h(NButton, {strong: true,tertiary: true,size: "small",onClick: () => deletePlay(row)}, {default: () => "刪除"})]}}];};const data = [{no: 3,title: "Wonderwall",length: "4:18"},{no: 4,title: "Don't Look Back in Anger",length: "4:48"},{no: 12,title: "Champagne Supernova",length: "7:27"}];export default defineComponent({components: {NDataTable,NButton,NModal},setup() {// 這里獲取參數的方式const showModalRef = ref(false);const message = createDiscreteApi(["message"]).message;return {// 彈出框showModal: showModalRef,		tanCancel() {message.success("Cancel");showModalRef.value = false;},tanVerify() {message.success("Submit");showModalRef.value = false;},data,columns: createColumns({updataPlay(row){message.info(`Play ${row.title}`);showModalRef.value = true;}}),pagination: false};}});
</script>

彈出框如何做的

需求這倆個出現這倆個按鈕

?

如何彈出內容

主要就是修改這倆個內容

我修改的時候,找不到彈出框的定義的變量,定義了變量總是出了問題

const  v = falsetest(){v = true // 這里出現的問題}

最后發現里面有一個定義的變量可以獲取到其中的內容

const message = ref(false);test(){message.value = true ; //可以獲取到其中的直,直可以修改
}

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/715162.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/715162.shtml
英文地址,請注明出處:http://en.pswp.cn/news/715162.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Linux內核隊列queue.h

文章目錄 一、簡介二、SLIST單向無尾鏈表2.1 介紹2.2 操作2.3 例子 三、STAILQ單向有尾鏈表四、LIST雙向無尾鏈表五、TAILQ雙向有尾鏈表六、CIRCLEQ循環鏈表七、queue源碼參考 一、簡介 queue.h是一個非常經典的文件&#xff0c;定義了一系列宏的操作&#xff0c;它定義了一系…

筆記72:關于IMU(慣性測量單元)傳感器的作用【不涉及公式推導】

一、IMU傳感器是什么&#xff1a; 慣性測量單元IMU&#xff08;Inertial Measurement Unit&#xff09;是一種使用【加速度計】和【陀螺儀】來測量【物體三軸姿態角&#xff08;空間姿態&#xff09;】的裝置&#xff1b;IMU在坐標系的每個坐標軸上&#xff0c;均安裝有1個陀螺…

90-子集2(回溯算法)

題目 給你一個整數數組 nums &#xff0c;其中可能包含重復元素&#xff0c;請你返回該數組所有可能的子集&#xff08;冪集&#xff09;。 解集 不能 包含重復的子集。返回的解集中&#xff0c;子集可以按 任意順序 排列。 示例 1&#xff1a; 輸入&#xff1a;nums [1,2,2] …

深入理解CSS常見選擇器

標題&#xff1a;深入理解CSS常見選擇器 在CSS中&#xff0c;選擇器是一種強大的工具&#xff0c;用于定位和樣式化HTML文檔中的元素。通過選擇器的靈活運用&#xff0c;我們能夠精準地選擇需要操作的元素&#xff0c;從而實現豐富多彩的頁面布局和設計。本文將重點介紹常見的…

Vue2:用node+express部署Vue項目

一、編譯項目 命令 npm run build執行命令后&#xff0c;我們會在項目文件夾中看到如下生成的文件 二、部署Vue項目 接上一篇&#xff0c;nodeexpress編寫輕量級服務 1、在demo中創建static文件夾 2、將dist目錄中的文件放入static中 3、修改server.js文件 關鍵配置&…

全量知識系統問題及SmartChat給出的答復 之13 解析器+DDD+文法型

Q32. DDD的領域概念和知識系統中設計的解析器之間的關系。 那下面&#xff0c;我們回到前面的問題上來。 前面說到了三種語法解析器&#xff0c;分別是 形式語言的&#xff08;機器或計算機語言&#xff09;、人工語言的和自然語言的。再前面&#xff0c;我們聊到了DDD設計思…

基于java的學生派遣信息管理系統設計開題報告

歡迎添加微信互相交流學習哦&#xff01; 項目源碼&#xff1a;biye2: 畢業設計源碼 一、項目名稱 Java基于學生派遣信息管理系統設計 二、項目背景 隨著科技的發展&#xff0c;互聯網在我國的應用越來越廣泛&#xff0c;尤其是在教育領域。為了能更好地管理學生派遣信息&am…

DayDreamInGIS 之 ArcGIS Pro二次開發 圖層屬性中換行符等特殊字符替換

具體參考ArcMap中類似的問題&#xff0c;本帖開發一個ArcGISPro版的工具 1.基礎庫部分 插件開發&#xff0c;經常需要處理圖層與界面的交互。基礎庫把常用的交互部分做了封裝&#xff0c;方便之后的重復使用。 &#xff08;1&#xff09;下述類定義了數據存儲結構&#xff0…

DFA還原白盒AES密鑰

本期內容是關于某app模擬登錄的,涉及的知識點比較多,有unidbg補環境及輔助還原算法,ida中的md5以及白盒aes,fart脫殼,frida反調試 本章所有樣本及資料均上傳到了123云盤 llb資料官方版下載丨最新版下載丨綠色版下載丨APP下載-123云盤 目錄 首先抓包 fart脫殼 加密位置定位…

0048__Unix傳奇

Unix傳奇 &#xff08;上篇&#xff09;_unix傳奇(上篇)-CSDN博客 Unix傳奇 &#xff08;下篇&#xff09;-CSDN博客 Unix現狀與未來——CSDN對我的采訪_nuix郵件系統行業地位-CSDN博客

win11安裝nodejs

一、下載安裝包 鏈接: https://pan.baidu.com/s/1_df8s1UlgNNaewWrWgI59A?pwdpsjm 提取碼: psjm 二、安裝步驟 1.雙擊安裝包 2.Next> 3.勾選之后&#xff0c;Next> 4.點擊Change&#xff0c;選擇你要安裝的路徑&#xff0c;然后Next> 5.點擊Install安裝 二、…

學生云服務器騰訊云_騰訊云學生學生_騰訊云學生云主機

2024年騰訊云學生服務器優惠活動「云校園」&#xff0c;學生服務器優惠價格&#xff1a;輕量應用服務器2核2G學生價30元3個月、58元6個月、112元一年&#xff0c;輕量應用服務器4核8G配置191.1元3個月、352.8元6個月、646.8元一年&#xff0c;CVM云服務器2核4G配置842.4元一年&…

基于擴散模型的圖像編輯:首篇綜述

AIGC 大模型最火熱的任務之一——基于 Diffusion Model 的圖像編輯(editing)領域的首篇綜述。長達 26 頁&#xff0c;涵蓋 297 篇文獻&#xff01;本文全面研究圖像編輯前沿方法&#xff0c;并根據技術路線精煉地劃分為 3 個大類、14 個子類&#xff0c;通過表格列明每個方法的…

查詢緩存-緩存更新-緩存穿透-緩存雪崩-緩存擊穿

1.查詢緩存 1.2.出現的原因 用戶高并發訪問帶來的服務器讀寫的壓力 1.3.解決方法 添加緩存 2.緩存更新 2.1.出現的原因 出現數據不一致的問題 2.2.解決方法 操作數據庫的時候 更新數據庫刪除緩存 查詢數據的時候設置過期時間 3.緩存穿透 3.1.出現的原因 在高并發訪…

LeetCode 熱題 100 | 圖論(一)

目錄 1 200. 島嶼數量 2 994. 腐爛的橘子 2.1 智障遍歷法 2.2 仿層序遍歷法 菜鳥做題&#xff0c;語言是 C 1 200. 島嶼數量 解題思路&#xff1a; 遍歷二維數組&#xff0c;尋找 “1”&#xff08;若找到則島嶼數量 1&#xff09;尋找與當前 “1” 直接或間接連接在…

Java輸入輸出流詳細解析

Java I/O&#xff08;輸入/輸出&#xff09;主要被用來處理輸入數據和輸出結果。 在Java中&#xff0c;輸入/輸出操作被當作流&#xff08;Stream&#xff09;進行處理。流是一個連續的數據流入或數據流出的通道。流操作在Java中主要可以分為兩種類型&#xff1a;字節流和字符…

基于ssm疫情期間高校防控系統+vue論文

摘 要 傳統信息的管理大部分依賴于管理人員的手工登記與管理&#xff0c;然而&#xff0c;隨著近些年信息技術的迅猛發展&#xff0c;讓許多比較老套的信息管理模式進行了更新迭代&#xff0c;學生信息因為其管理內容繁雜&#xff0c;管理數量繁多導致手工進行處理不能滿足廣大…

‘conda‘ 不是內部或外部命令,也不是可運行的程序 或批處理文件

如果你在運行 conda 命令時收到了 ‘conda’ 不是內部或外部命令&#xff0c;也不是可運行的程序或批處理文件。 的錯誤消息&#xff0c;這可能意味著 Anaconda 并沒有正確地添加到你的系統路徑中。 1.你可以嘗試手動添加 Anaconda 到系統路徑中。以下是在 Windows 系統上添加…

19.2 DeepMetricFi:基于深度度量學習改進Wi-Fi指紋定位

P. Chen and S. Zhang, "DeepMetricFi: Improving Wi-Fi Fingerprinting Localization by Deep Metric Learning," in IEEE Internet of Things Journal, vol. 11, no. 4, pp. 6961-6971, 15 Feb.15, 2024, doi: 10.1109/JIOT.2023.3315289. 摘要 Wi-Fi RSSI指紋定位…

C++內存泄漏:原因、預防、定位

內存泄漏是 C 中常見的問題之一&#xff0c;可能導致程序運行時資源消耗過大、性能下降&#xff0c;甚至程序崩潰。 內存泄漏的原因 1. 未釋放動態分配的內存 在 C 中&#xff0c;通過 new 操作符分配的內存需要手動使用 delete 操作符進行釋放。如果忘記或者由于某種原因未…