应用 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中形式雷同，这里就不赘述了。
大家如果有其余想法、实现思路，也欢送评论交换。
发表回复