Svelte入門——Web Components實現跨框架組件複用(二)

在上節中,我們一起了解了如何使用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中方式相同,這裏就不贅述了。

大家如果有其他想法、實現思路,也歡迎評論交流。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章