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

时间：2021-12-16 作者：powertoolsteam

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

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

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

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

3、发布的Web Component体积小

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

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

跨框架组件开发

一、使用Svelte开发AutoComplete Web Component

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

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

1、修改src/域名te

在头部添加：

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

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

  // the list of items  the user can select from
  export let items = [];
  items = ["White", "Red", "Yellow", "Green", "Blue", "Black"];

2、修改域名

在plugins中配置customElement

设置后的结果为：

import commonjs from \'@rollup/plugin-commonjs\';
import resolve from \'@rollup/plugin-node-resolve\';
import svelte from \'rollup-plugin-svelte\';
import pkg from \'./域名\';

export default [
  {
    input: \'src/域名te\',
    output: [
      { file: 域名le, format: \'es\' },
      { file: 域名, format: \'umd\', name: \'Autocomplete\' }
    ],
    plugins: [svelte({
                        customElement: true,
                }), commonjs(), resolve()]
  }
];

3、运行npm run build打包生成Web Component

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

二、无框架页面测试


  <div id="ss" style="height: 600px;"></div>
  <script type="text/javascript" src="域名"></script>

  <script type="text/javascript">
    域名ad = function(){
      var spread = new 域名域名book(域名lementById("ss"));
      var sheet = 域名ctiveSheet();
      域名ellType(1, 1, new AutoComplateCellType())
    }

    function AutoComplateCellType() {
      }
      域名otype = new 域名域名();
      域名teEditorElement = function () {
        var ac = 域名teElement(\'auto-complete\');
        域名ttribute("gcUIElement", "gcEditingInput");
        return ac;
      }
      域名teEditor = function(editorContext, cellStyle, cellRect) {
          if (editorContext) {
              域名h=域名h;
              域名ht=32;
              域名域名flow = "visible";
              return {height: 32};
          }
      };
      域名ditorValue = function (editorContext) {
          if (editorContext) {
              return 域名e;
          }
      };
      域名ditorValue = function (editorContext, value) {
          if (editorContext) {
            域名e = value
          }
      };
  </script>

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

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

<script>
  import  \'@grapecity/spread-sheets-vue\'
  import \'../static/index\' // 复制打包的域名到static文件夹下
  import * as GC from "@grapecity/spread-sheets"
  
      function AutoComplateCellType() {
        }
        域名otype = new 域名域名();
        域名teEditorElement = function () {
          var ac = 域名teElement(\'auto-complete\');
          域名ttribute("gcUIElement", "gcEditingInput");
          return ac;
        }
        域名teEditor = function(editorContext, cellStyle, cellRect) {
            if (editorContext) {
                域名h=域名h;
                域名ht=32;
                域名域名flow = "visible";
                return {height: 32};
            }
        };
        域名ditorValue = function (editorContext) {
            if (editorContext) {
                return 域名e;
            }
        };
        域名ditorValue = function (editorContext, value) {
            if (editorContext) {
              域名e = value
            }
        };

  export default {
//    name: \'sample-header\'
    methods:{
      workbookInitialized(spread){
        var sheet = 域名ctiveSheet();
        域名ellType(1, 1, new AutoComplateCellType())
      }
    }
  }

</script>

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

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

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

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