Svelte入门——Web Components实现跨框架组件复用（二）

在上节中，我们一起了解了如何使用Svelte封装Web Component，从而实现在不同页面间使用电子表格组件。

Svelte封装组件跨框架复用，带来的好处也十分明显：

1、使用框架开发，更容易维护

2、发布后没有框架依赖，其他任何场景都可以使用

3、发布的WebComponent体积小

                                                                                                                                                                                                                                这些得天独厚的优势，使得Svelte进行组件封装有着格外优势。之前我们了解了如何在不同页面间，自由使用电子表格组件。那如果要真正实现跨越不同的框架，使用相同的表格组件，该怎么做呢？

我们接着上节内容，继续为大家介绍，封装完成电子表格组件后，如何跨框架让电子表格组件在原生环境和各种框架中都可以使用。

跨框架组件开发

一、使用Svelte开发AutoComplete Web Component

Svelte如今的生态很丰富，通过搜索我们可以找到一款Svelte开发的AutoComplete的组件，地址：https://github.com/pstanoev/simple-svelte-autocomplete。

我们一起来fork这个项目，做一些简单修改，让他生成一个Web Component出来（这里大家需要注意三方组建协议内容中，是否包含运行修改发布）。

1、修改src/SimpleAutocomplete.svelte

在头部添加：

1. <svelte:options tag="auto-complete" />

复制代码

同时在代码中修改items添加一些默认信息：

1.   //the list of items  the user can select from
   
2.   exportlet items = [];
   
3.   items= ["White", "Red", "Yellow", "Green","Blue", "Black"];

复制代码

2、修改rollup.config.js

在plugins中配置customElement

设置后的结果为：               

1. import commonjsfrom '@rollup/plugin-commonjs';
   
2. import resolvefrom '@rollup/plugin-node-resolve';
   
3. import sveltefrom 'rollup-plugin-svelte';
   
4. import pkg from'./package.json';
   
5. export default [
   
6.   {
   
7.     input:'src/SimpleAutocomplete.svelte',
   
8.    output: [
   
9.      { file: pkg.module, format: 'es' },
   
10.      { file: pkg.main, format: 'umd', name: 'Autocomplete' }
    
11.     ],
    
12.    plugins: [svelte({
    
13.                       customElement: true,
    
14.   }
    
15. ];

复制代码

3、运行npm run build打包生成WebComponent

运行后会在根目录生成index.js和index.mjs两个文件，js是umd的支持，mjs是ES版本，后面我们直接使用UMD支持的index.js文件。

二、无框架页面测试

1.    <div id="ss" style="height:600px;"></div>
   
2.     <script type="text/javascript" src="index.js"></script>
   
3.     <script type="text/javascript">
   
4.      window.onload = function(){
   
5.        var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
   
6.        var sheet = spread.getActiveSheet();
   
7.        sheet.setCellType(1, 1, new AutoComplateCellType())
   
8.      }
   
9.      function AutoComplateCellType() {
   
10.        }
    
11.        AutoComplateCellType.prototype = new GC.Spread.Sheets.CellTypes.Base();
    
12.        AutoComplateCellType.prototype.createEditorElement = function () {
    
13.          var ac = document.createElement('auto-complete');
    
14.          ac.setAttribute("gcUIElement", "gcEditingInput");
    
15.          return ac;
    
16.        }
    
17.        AutoComplateCellType.prototype.updateEditor = function(editorContext, cellStyle, cellRect) {
    
18.            if (editorContext) {
    
19.                editorContext.style.width=cellRect.width;
    
20.                editorContext.style.height=32;
    
21.                editorContext.parentElement.parentElement.style.overflow = "visible";
    
22.                return {height: 32};
    
23.            }
    
24.        };
    
25.        AutoComplateCellType.prototype.getEditorValue = function (editorContext) {
    
26.            if (editorContext) {
    
27.                return editorContext.value;
    
28.            }
    
29.        };
    
30.        AutoComplateCellType.prototype.setEditorValue = function (editorContext, value) {
    
31.            if (editorContext) {
    
32.              editorContext.value = value
    
33.            }
    
34.        };
    
35.     </script>

复制代码

引入生成的index.js 创建AutoComplateCellType，设置到单于格中，效果如图：

三、Vue框架中使用
通过import的方式引入AutoComplate Web Component

1. <script>
   
2.   import  '@grapecity/spread-sheets-vue'
   
3.   import '../static/index' // 复制打包的index.js到static文件夹下
   
4.   import * as GC from "@grapecity/spread-sheets"
   
5.   
   
6.      function AutoComplateCellType() {
   
7.        }
   
8.        AutoComplateCellType.prototype = new GC.Spread.Sheets.CellTypes.Base();
   
9.        AutoComplateCellType.prototype.createEditorElement = function () {
   
10.          var ac = document.createElement('auto-complete');
    
11.          ac.setAttribute("gcUIElement", "gcEditingInput");
    
12.          return ac;
    
13.        }
    
14.        AutoComplateCellType.prototype.updateEditor = function(editorContext, cellStyle, cellRect) {
    
15.            if (editorContext) {
    
16.                editorContext.style.width=cellRect.width;
    
17.                editorContext.style.height=32;
    
18.                editorContext.parentElement.parentElement.style.overflow = "visible";
    
19.                return {height: 32};
    
20.            }
    
21.        };
    
22.        AutoComplateCellType.prototype.getEditorValue = function (editorContext) {
    
23.            if (editorContext) {
    
24.                return editorContext.value;
    
25.            }
    
26.        };
    
27.        AutoComplateCellType.prototype.setEditorValue = function (editorContext, value) {
    
28.            if (editorContext) {
    
29.              editorContext.value = value
    
30.            }
    
31.        };
    
32.   export default {
    
33. //   name: 'sample-header'
    
34.     methods:{
    
35.      workbookInitialized(spread){
    
36.        var sheet = spread.getActiveSheet();
    
37.        sheet.setCellType(1, 1, new AutoComplateCellType())
    
38.      }
    
39.     }
    
40.   }
    
41. </script>

复制代码

这里注意打包的index.js引入后会报一个关于TS的错误，删除文件中以下内容即可。

1. // eslint-disable-next-line@typescript-eslint/no-non-null-assertion

复制代码

在React中方式相同，这里就不赘述了。

大家如果有其他想法、实现思路，也欢迎评论交流。