关于javascript:Svelte入门Web-Components实现跨框架组件复用二

45次阅读

共计 3680 个字符，预计需要花费 10 分钟才能阅读完成。

应用 Svelte 开发 VUE 和 React 都反对的自定义单元格组件

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

Svelte 封装组件跨框架复用，带来的益处也非常显著：

1、应用框架开发，更容易保护

2、公布后没有框架依赖，其余任何场景都能够应用

3、公布的 Web Component 体积小

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

接着咱们接着上节内容，持续为大家介绍，封装实现电子表格组件后，如何跨框架让电子表格组件在原生环境和各种框架中都能够应用。

一、应用 Svelte 开发 AutoComplete Web Component

Svelte 现在的生态很丰盛，通过搜寻咱们能够找到一款 Svelte 开发的 AutoComplete 的组件，地址：https://github.com/pstanoev/simple-svelte-autocomplete。

咱们一起来 fork 这个我的项目，做一些简略批改，让他生成一个 Web Component 进去（这里大家须要留神三方组建协定内容中，是否蕴含运行批改公布）。

1、批改 src/SimpleAutocomplete.svelte

在头部增加：

<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、批改 rollup.config.js

在 plugins 中配置 customElement

设置后的后果为：

import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import svelte from 'rollup-plugin-svelte';
import pkg from './package.json';

export default [
  {
    input: 'src/SimpleAutocomplete.svelte',
    output: [{ file: pkg.module, format: 'es'},
      {file: pkg.main, format: 'umd', name: 'Autocomplete'}
    ],
    plugins: [svelte({customElement: true,}), commonjs(), resolve()]
  }
];

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

运行后会在根目录生成 index.js 和 index.mjs 两个文件，js 是 umd 的反对，mjs 是 ES 版本，前面咱们间接应用 UMD 反对的 index.js 文件。

二、无框架页面测试


  <div id="ss" style="height: 600px;"></div>
  <script type="text/javascript" src="index.js"></script>

  <script type="text/javascript">
    window.onload = function(){var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
      var sheet = spread.getActiveSheet();
      sheet.setCellType(1, 1, new AutoComplateCellType())
    }

    function AutoComplateCellType() {}
      AutoComplateCellType.prototype = new GC.Spread.Sheets.CellTypes.Base();
      AutoComplateCellType.prototype.createEditorElement = function () {var ac = document.createElement('auto-complete');
        ac.setAttribute("gcUIElement", "gcEditingInput");
        return ac;
      }
      AutoComplateCellType.prototype.updateEditor = function(editorContext, cellStyle, cellRect) {if (editorContext) {
              editorContext.style.width=cellRect.width;
              editorContext.style.height=32;
              editorContext.parentElement.parentElement.style.overflow = "visible";
              return {height: 32};
          }
      };
      AutoComplateCellType.prototype.getEditorValue = function (editorContext) {if (editorContext) {return editorContext.value;}
      };
      AutoComplateCellType.prototype.setEditorValue = function (editorContext, value) {if (editorContext) {editorContext.value = value}
      };
  </script>

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

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

<script>
  import  '@grapecity/spread-sheets-vue'
  import '../static/index' // 复制打包的 index.js 到 static 文件夹下
  import * as GC from "@grapecity/spread-sheets"
  
      function AutoComplateCellType() {}
        AutoComplateCellType.prototype = new GC.Spread.Sheets.CellTypes.Base();
        AutoComplateCellType.prototype.createEditorElement = function () {var ac = document.createElement('auto-complete');
          ac.setAttribute("gcUIElement", "gcEditingInput");
          return ac;
        }
        AutoComplateCellType.prototype.updateEditor = function(editorContext, cellStyle, cellRect) {if (editorContext) {
                editorContext.style.width=cellRect.width;
                editorContext.style.height=32;
                editorContext.parentElement.parentElement.style.overflow = "visible";
                return {height: 32};
            }
        };
        AutoComplateCellType.prototype.getEditorValue = function (editorContext) {if (editorContext) {return editorContext.value;}
        };
        AutoComplateCellType.prototype.setEditorValue = function (editorContext, value) {if (editorContext) {editorContext.value = value}
        };

  export default {
//    name: 'sample-header'
    methods:{workbookInitialized(spread){var sheet = spread.getActiveSheet();
        sheet.setCellType(1, 1, new AutoComplateCellType())
      }
    }
  }

</script>

这里留神打包的 index.js 引入后会报一个对于 TS 的谬误，删除文件中以下内容即可。

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

在 React 中形式雷同，这里就不赘述了。

大家如果有其余想法、实现思路，也欢送评论交换。

正文完