【Tauri2.0教程(四)】对话框插件的使用

说明

安装

使用对话框首先要安装dialog插件。

bash 复制代码
npm run tauri add dialog
# 或者(如果上面的命令不生效,就用这个)
npx tauri add dialog

代码使用

导入需要的函数并使用。对话框总共分为问询、确认、消息提示、打开文件、保存文件五种,分别对应ask, confirm, message, open, save五个函数。

js 复制代码
<script setup>
import { ask, confirm, message, open, save} from '@tauri-apps/plugin-dialog';

async function myAsk(){
  const answer = await ask('This action cannot be reverted. Are you sure?', {
    title: 'Tauri',
    kind: 'warning',
  });

  console.log(answer);
}

async function myConfirm() {
// Creates a confirmation Ok/Cancel dialog
  const confirmation = await confirm(
      'This action cannot be reverted. Are you sure?',
      {title: 'Tauri', kind: 'warning'}
  );

  console.log(confirmation);
}

async function myMessage(){
// Shows message
  await message('File not found', { title: 'Tauri', kind: 'error' });
}

async function mySave(){
// Prompt to save a 'My Filter' with extension .png or .jpeg
  const path = await save({
    filters: [
      {
        name: 'My Filter',
        extensions: ['png', 'jpeg'],
      },
    ],
  });
  console.log(path);
}

async function myOpen() {
  const file = await open({
    multiple: false,
    directory: false,
  });
  console.log(file);
}

</script>

在html中使用这些函数

html 复制代码
<div class="img-panel">
  <button @click="myOpen">打开</button>
  <button @click="myAsk">yes or no</button>
  <button @click="myConfirm">确认</button>
  <button @click="myMessage">message</button>
  <button @click="mySave">保存</button>
</div>

使用效果

下面是五种对话框的使用效果。

相关推荐
小喷友1 天前
阶段三:进阶(Rust 高级特性)
前端·rust
Python私教1 天前
源滚滚Rust全栈班v1.02 无符号整数详解
开发语言·后端·rust
专注VB编程开发20年2 天前
CSS 的命名方式像是 PowerShell 的动词-名词结构,缺乏面向对象的层级关系
开发语言·后端·rust
伍哥的传说2 天前
Tailwind CSS v4 终极指南:体验 Rust 驱动的闪电般性能与现代化 CSS 工作流
前端·css·rust·tailwindcss·tailwind css v4·lightning css·utility-first
专注VB编程开发20年2 天前
rust语言-对象多级访问
服务器·前端·rust
编码浪子2 天前
趣味学RUST基础篇(构建一个命令行程序2重构)
开发语言·重构·rust
susnm2 天前
组件生命周期
rust·全栈
bruce541102 天前
Axum 最佳实践:如何构建优雅的 Rust 错误处理系统?(三)
rust
Source.Liu3 天前
【Python基础】 15 Rust 与 Python 基本类型对比笔记
笔记·python·rust
咸甜适中3 天前
rust语言 (1.88) egui (0.32.1) 学习笔记(逐行注释)(二十六)windows平台运行时隐藏控制台
笔记·学习·rust·egui