说明
安装
使用对话框首先要安装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>
使用效果
下面是五种对话框的使用效果。