有关Vue中引入Cefsharp

最新推荐文章于 2024-06-19 16:33:23 发布

是大姚姚呀

最新推荐文章于 2024-06-19 16:33:23 发布

阅读量2k

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_43607777/article/details/115759763

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

什么是CefSharp

CefSharp 是一款以 Chromium 为内核的开源的浏览器，提供了 WPF 和 WinForms Web 浏览器控件实现。我们可借用其提供的能力进行集成Web界面插件（即：Wpf插件）。

如何在Vue中引入cefsharp

首先，先介绍如何在原生JS中引入Cefsharp:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button id="click2" @click="click1">按钮</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    window.onload = function () {
        alert("1111！");
        // 新式注入
        CefSharp.BindObjectAsync("bound");
    }
</script>
</html>
<script>
    let app = new Vue({
        el: "#app",
        methods: {
            click1() {
                bound.ShowMessage("这是一个事件！");
            }
        }
    })
</script>

具体可参考：https://www.cnblogs.com/ZaraNet/p/11350071.html

接下来进入正题，开始介绍在Vue项目中引入Cefsharp:

在项目的index.html文件中引入Cefsharp

<script>
      window.onload = function () { 
          // 新式注入
          CefSharp.BindObjectAsync("bound"); 
          window.bound = bound;
      }
  </script>

在需要引入Web插件的.vue页面

<template>
  <div class="bg" id="bgMask">
    <img src="../assets/camera.png" @click="hidden"/>
  </div>
</template>
<script>
export default {
  methods: {
    hidden() {
      window.bound && window.bound.SwithPage("");
    }
  }
};
</script>

其中SwithPage()为后端的方法。

关于window的保存状态

踩坑的原因在于bound.SwithPage()在build时，编译报错
解决方法：挂载在window上保存状态。

欢迎批评指正！

是大姚姚呀

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
5
评论
有关Vue中引入Cefsharp

什么是CefSharpCefSharp 是一款以 Chromium 为内核的开源的浏览器，提供了 WPF 和 WinForms Web 浏览器控件实现。我们可借用其提供的能力进行集成Web界面插件（即：Wpf插件）。如何在Vue中引入cefsharp首先，先介绍如何在原生JS中引入Cefsharp: Title 具体可参考：https://www.cnblogs.com/ZaraNet/p/11350071.html接下来进入正题，开始介绍在Vue项目中引入Ce
复制链接

扫一扫

专栏目录