小小千想和您聊一聊

当前位置: 首页> 技术分享> Electron使用指南之删除信息

Electron使用指南之删除信息

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

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)

  }

}

 

// ...

上一篇:Electron使用指南之打开网站窗口

下一篇:Electron使用指南之搜索信息

QQ技术交流群

HTML5/Web前端锋迷群
712051083

加入群聊

用户登录

手机号:

密码:

图形验证码:

点击切换

用户注册

手机号:

登录密码:

图形验证码:

点击切换

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

手机号:

图形验证码:

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

新密码:

确认新密码:

获取课程

添加小千老师微信,获取课程信息

如何获取课程?

一、需拥有此本教材

如没有,可点击下方入口购买当当购买入口京东购买入口

二、添加小千老师,发送拥有凭证,解锁课程资源

1.购买该教材的订单信息
2.拥有的实体书信息等

更换手机号

新手机号:

图形验证码:

短信验证码:

获取验证码