欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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)
  }
}

// ...
相关标签: 个人技术分享