Electron使用指南——删除信息
程序员文章站
2022-06-04 14:49:37
...
在打开的窗口里注入按钮,点击按钮关闭窗口,同时删除相应的条目。
1、在打开的窗口中注入按钮
修改 /src/components/button.js
,编写创建的按钮 JS
代码,同时修改注入语句,将被点击条目的index
值传递到窗口的按钮上。
1.1 button.js
export default `
let readitClose = document.createElement('div')
readitClose.innerText = '关闭窗口'
readitClose.style.position = 'fixed'
readitClose.style.bottom = '100px'
readitClose.style.right = '30px'
readitClose.style.padding = '5px 10px'
readitClose.style.fontSize = '14px'
readitClose.style.background = 'dodgerblue'
readitClose.style.fontWeight = 'bold'
readitClose.style.color = 'white'
readitClose.style.borderRadius = '5px'
readitClose.style.cursor = 'default'
readitClose.style.boxShadow = '2px 2px 2px rgba(0, 0, 0, 0.2)'
readitClose.onclick = e => {
window.opener.postMessage({
action: 'delete-reader-item',
itemIndex: {{index}}
}, '*')
}
document.querySelector('body').appendChild(readitClose)
`
1.2 修改 Main.vue
<script>
export default {
// ...
methods: {
// ...
...mapActions(['initItems', 'removeItem']),
open(url, index) {
// ...
readerWin.eval(buttonJS.replace('{{index}}', index))
}
},
}
</script>
2、删除条目
介绍到用户点击打开的按钮消息后,执行关闭窗口和删除条目的操作。
2.1 编辑 /src/components/Main.vue
:
<script>
export default {
// ...
created() {
// ...
window.addEventListener('message', e => {
if (e.data.action === 'delete-reader-item') {
// 删除条目
this.removeItem(e.data.itemIndex)
// 更新当前高亮的 currentIndex
if (this.currentIndex > 0) this.currentIndex--
// 关闭打开的窗口
e.source.close()
}
})
}
}
</script>
2.2 修改 Store
修改 /src/store/modules/main.js
, 添加删除数据的功能:
// ...
const mutations = {
// ...
removeItem(state, index) {
state.items.splice(index, 1)
store.set('items', state.items)
}
}
const actions = {
// ...
removeItem({commit}, index) {
commit('removeItem', index)
}
}
// ...