Electron使用指南 - [15] 删除信息

在打开的窗口里注入按钮，点击按钮关闭窗口，同时删除相应的条目。

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

// ...