v1.0.2 更新内容
This commit is contained in:
浅念
@@ -0,0 +1,286 @@
|
||||
<template>
|
||||
<div class="system-notification-demo">
|
||||
<h2>浏览器原生Notification API测试Demo</h2>
|
||||
<div class="permission-status">
|
||||
<p
|
||||
>当前通知权限状态: <strong>{{ permissionStatus }}</strong></p
|
||||
>
|
||||
<el-button v-if="permissionStatus !== 'granted'" @click="requestPermission" type="primary">
|
||||
请求通知权限
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<el-button @click="showBasicNotification">基本通知</el-button>
|
||||
<el-button @click="showIconNotification">带图标通知</el-button>
|
||||
<el-button @click="showPersistentNotification">持久化通知</el-button>
|
||||
<el-button @click="showDataNotification">带数据的通知</el-button>
|
||||
<el-button @click="showEventNotification">带事件监听的通知</el-button>
|
||||
<el-button @click="checkSupport">检查浏览器支持</el-button>
|
||||
</div>
|
||||
<div class="log-area">
|
||||
<h3>操作日志</h3>
|
||||
<ul>
|
||||
<li v-for="(log, index) in logs" :key="index">{{ log }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
// import { ElButton } from 'element-plus'
|
||||
|
||||
// 状态变量
|
||||
const permissionStatus = ref('default')
|
||||
const logs = ref([])
|
||||
const isSupported = ref(false)
|
||||
|
||||
// 添加日志
|
||||
const addLog = (message) => {
|
||||
const timestamp = new Date().toLocaleTimeString()
|
||||
logs.value.unshift(`[${timestamp}] ${message}`)
|
||||
// 限制日志数量
|
||||
if (logs.value.length > 10) {
|
||||
logs.value.pop()
|
||||
}
|
||||
}
|
||||
|
||||
// 检查浏览器支持情况
|
||||
const checkSupport = () => {
|
||||
if ('Notification' in window) {
|
||||
isSupported.value = true
|
||||
addLog('浏览器支持原生Notification API')
|
||||
addLog(`当前权限状态: ${Notification.permission}`)
|
||||
} else {
|
||||
isSupported.value = false
|
||||
addLog('⚠️ 浏览器不支持原生Notification API')
|
||||
}
|
||||
}
|
||||
|
||||
// 请求通知权限
|
||||
const requestPermission = async () => {
|
||||
if (!('Notification' in window)) {
|
||||
addLog('浏览器不支持原生Notification API')
|
||||
return
|
||||
}
|
||||
try {
|
||||
const permission = await Notification.requestPermission()
|
||||
permissionStatus.value = permission
|
||||
if (permission === 'granted') {
|
||||
addLog('用户已授予通知权限')
|
||||
} else if (permission === 'denied') {
|
||||
addLog('用户拒绝了通知权限')
|
||||
} else {
|
||||
addLog('用户暂时未授予通知权限')
|
||||
}
|
||||
} catch (error) {
|
||||
addLog(`请求权限时出错: ${error.message}`)
|
||||
}
|
||||
}
|
||||
|
||||
// 显示基本通知
|
||||
const showBasicNotification = () => {
|
||||
if (!('Notification' in window)) {
|
||||
addLog('浏览器不支持原生Notification API')
|
||||
return
|
||||
}
|
||||
if (Notification.permission !== 'granted') {
|
||||
addLog('请先授予通知权限')
|
||||
return
|
||||
}
|
||||
try {
|
||||
const notification = new Notification('基本通知', {
|
||||
body: '这是一个使用浏览器原生API的系统通知'
|
||||
})
|
||||
notification.onclick = () => {
|
||||
addLog('用户点击了基本通知')
|
||||
notification.close()
|
||||
}
|
||||
addLog('已发送基本通知')
|
||||
} catch (error) {
|
||||
addLog(`发送通知失败: ${error.message}`)
|
||||
}
|
||||
}
|
||||
|
||||
// 显示带图标通知
|
||||
const showIconNotification = () => {
|
||||
if (Notification.permission !== 'granted') {
|
||||
addLog('请先授予通知权限')
|
||||
return
|
||||
}
|
||||
try {
|
||||
const notification = new Notification('带图标通知', {
|
||||
body: '这个通知包含自定义图标',
|
||||
icon: 'https://element-plus.org/images/element-plus-logo.svg', // 替换为实际图标URL
|
||||
badge: 'https://element-plus.org/images/element-plus-logo.svg' // 小图标（移动端）
|
||||
})
|
||||
addLog('已发送带图标通知')
|
||||
} catch (error) {
|
||||
addLog(`发送通知失败: ${error.message}`)
|
||||
}
|
||||
}
|
||||
|
||||
// 显示持久化通知
|
||||
const showPersistentNotification = () => {
|
||||
if (Notification.permission !== 'granted') {
|
||||
addLog('请先授予通知权限')
|
||||
return
|
||||
}
|
||||
try {
|
||||
const notification = new Notification('持久化通知', {
|
||||
body: '这个通知需要用户手动关闭',
|
||||
requireInteraction: true, // 持久化显示，直到用户交互
|
||||
icon: 'https://element-plus.org/images/element-plus-logo.svg'
|
||||
})
|
||||
notification.onclose = () => {
|
||||
addLog('用户关闭了持久化通知')
|
||||
}
|
||||
|
||||
addLog('已发送持久化通知')
|
||||
} catch (error) {
|
||||
addLog(`发送通知失败: ${error.message}`)
|
||||
}
|
||||
}
|
||||
|
||||
// 显示带数据的通知
|
||||
const showDataNotification = () => {
|
||||
if (Notification.permission !== 'granted') {
|
||||
addLog('请先授予通知权限')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const notification = new Notification('带数据的通知', {
|
||||
body: '这个通知包含自定义数据',
|
||||
data: {
|
||||
url: 'https://example.com',
|
||||
id: 12345,
|
||||
message: '这是附加数据'
|
||||
},
|
||||
icon: 'https://element-plus.org/images/element-plus-logo.svg'
|
||||
})
|
||||
|
||||
notification.onclick = () => {
|
||||
addLog(`通知数据: ${JSON.stringify(notification.data)}`)
|
||||
window.open(notification.data.url)
|
||||
notification.close()
|
||||
}
|
||||
|
||||
addLog('已发送带数据的通知')
|
||||
} catch (error) {
|
||||
addLog(`发送通知失败: ${error.message}`)
|
||||
}
|
||||
}
|
||||
|
||||
// 显示带事件监听的通知
|
||||
const showEventNotification = () => {
|
||||
if (Notification.permission !== 'granted') {
|
||||
addLog('请先授予通知权限')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const notification = new Notification('带事件监听的通知', {
|
||||
body: '这个通知演示各种事件监听',
|
||||
icon: 'https://element-plus.org/images/element-plus-logo.svg'
|
||||
})
|
||||
|
||||
notification.onshow = () => {
|
||||
addLog('通知显示事件触发')
|
||||
}
|
||||
|
||||
notification.onclick = () => {
|
||||
addLog('通知点击事件触发')
|
||||
notification.close()
|
||||
}
|
||||
|
||||
notification.onclose = () => {
|
||||
addLog('通知关闭事件触发')
|
||||
}
|
||||
|
||||
notification.onerror = (error) => {
|
||||
addLog(`通知错误事件: ${error.message}`)
|
||||
}
|
||||
|
||||
addLog('已发送带事件监听的通知')
|
||||
} catch (error) {
|
||||
addLog(`发送通知失败: ${error.message}`)
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载时检查权限状态
|
||||
onMounted(() => {
|
||||
addLog('页面加载完成，初始化Demo')
|
||||
|
||||
// 检查浏览器支持
|
||||
checkSupport()
|
||||
|
||||
// 检查当前权限状态
|
||||
if ('Notification' in window) {
|
||||
permissionStatus.value = Notification.permission
|
||||
addLog(`初始化权限状态: ${Notification.permission}`)
|
||||
|
||||
// 监听权限变化
|
||||
if (Notification.permissionChange) {
|
||||
Notification.permissionChange.then((permission) => {
|
||||
permissionStatus.value = permission
|
||||
addLog(`通知权限已变更为: ${permission}`)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.system-notification-demo {
|
||||
max-width: 800px;
|
||||
margin: 20px auto;
|
||||
padding: 20px;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
h2, h3 {
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.permission-status {
|
||||
margin: 20px 0;
|
||||
padding: 15px;
|
||||
background-color: #f5f7fa;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.log-area {
|
||||
margin-top: 30px;
|
||||
padding: 15px;
|
||||
background-color: #f5f7fa;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.log-area ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.log-area li {
|
||||
padding: 5px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.log-area li:first-child {
|
||||
color: #409eff;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user