大家好，我是1024小神，想进 技术群 / 私活群 / 股票群 或 交朋友都可以私信我，如果你觉得本文有用，一键三连 (点赞、评论、关注)，就是对我最大的支持~
官网文档：v2.tauri.app/learn/syste…
有两种方式可以添加系统托盘，一种是在js中，一种是在rust中，官方都有使用案例，其中要注意：
要记得在配置文件中添加这个特性。
这里我记录一下在js中添加托盘后，图标不显示问题：
可能是因为我使用了defaultWindowIcon图标作为托盘图标？但是官方说是可以的：
后来我重启了项目就显示了，我这里是通过js添加的托盘，这里的图标路径是相对于src-tauri的：
我的案例代码：
<template>
<h1
class="cardTitle"
@click="openUrl('https://v2.tauri.app/learn/system-tray/')"
>
tray
</h1>
<p>
The tray module provides utilities for working with the system tray.
This package is also accessible
</p>
<div class="cardBox">
<el-tooltip content="create tray" placement="bottom">
<el-button>{{ t('waitDev') }}</el-button>
</el-tooltip>
</div>
<div class="codeDemo">
<h2>发送通知</h2>
<p class="description">调用系统通知API发送消息通知</p>
<CodeEdit
lang="javascript"
:code="Codes.notification.trim()"
:disabled="true"
/>
</div>
</template>
<script setup lang="ts">
import { openUrl } from '@/utils/common'
import { TrayIcon } from '@tauri-apps/api/tray'
import { Menu } from '@tauri-apps/api/menu'
import { useI18n } from 'vue-i18n'
import Codes from '@/utils/codes'
// import ppIcon from '@/assets/images/pakeplus.png'
import { onMounted } from 'vue'
const { t } = useI18n()
const textarea = defineModel('textarea', {
type: String,
default: '',
})
let tray: any = null
const createTray = async () => {
const menu = await Menu.new({
items: [
{
id: 'quit',
text: 'Quit',
action: () => {
console.log('quit pressed')
},
},
],
})
const options = {
menu,
menuOnLeftClick: true,
icon: 'icons/icon.png',
}
tray = await TrayIcon.new(options)
}
onMounted(async () => {
createTray()
})
</script>
<style scoped lang="scss"></style>
