Svelte入门——Web Components实现跨框架组件复用(二)
使用** 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中方式相同,这里就不赘述了。
大家如果有其他想法、实现思路,也欢迎评论交流。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
基于知识图谱的PostgreSQL深度分析
本文是老白在1月16日PG中国大会上的演讲内容,全文有4500多字,阅读时间可能超过10分钟,请慎重阅读。 各位PG Funs下午好,我是老白。在疫情下2021 PG大会能够顺利进行十分不易。看到第二天下午的四点多钟,会场的上座率这么高,看得出PGer的热情十分高涨。可能认识老白的人会觉得奇怪,你不是混Oracle圈子的吗?怎么到PG大会来演讲了。这也充分说明了PG社区的红火,越来越多的Oracle DBA开始参与PG社区了。开源社区中对MYSQL和PostgreSQL到底谁更好的讨论一直存在,甚至对二者的开源协议也多有议论。Mysql的支持者认为GPL开源更注重代码贡献者的权益,并在约束用开源代码去卖钱,而BSD开源协议往往会让大企业从开源社区吸血。实际上也不尽然,BSD开源协议有着更宽松的限制,虽然大企业可以从开源社区吸血,对于小企业和用户来说,也是有利的。 现在用PG的用户越来越多,不过PG数据库的运维就面临了很大的困难,今天老白和大家分享的题目就是“基于知识图谱的PostgreSQL数据库深度分析”,希望通过我们团队的一些工作成果,给大家一些PG运维工作上的新启示。 首先我们来...
- 下一篇
「Spark从精通到重新入门(二)」Spark中不可不知的动态资源分配
前言 资源是影响 Spark 应用执行效率的一个重要因素。Spark 应用中真正执行 task 的组件是 Executor,可以通过spark.executor.instances 指定 Spark 应用的 Executor 的数量。在运行过程中,无论 Executor上是否有 task 在执行,都会被一直占有直到此 Spark 应用结束。 上篇我们从动态优化的角度讲述了 Spark 3.0 版本中的自适应查询特性,它主要是在一条 SQL 执行过程中不断优化执行逻辑,选择更好的执行策略,从而达到提升性能的目的。本篇我们将从整个 Spark 集群资源的角度讨论一个常见痛点:资源不足。 在 Spark 集群中的一个常见场景是,随着业务的不断发展,需要运行的 Spark 应用数和数据量越来越大,靠资源堆砌的优化方式也越来越显得捉襟见肘。当一个长期运行的 Spark 应用,若分配给它多个 Executor,可是却没有任何 task 分配到这些 Executor 上,而此时有其他的 Spark 应用却资源紧张,这就造成了资源浪费和调度不合理。 要是每个 Spark 应用的 Executor 数也...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- Docker安装Oracle12C,快速搭建Oracle学习环境
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- Windows10,CentOS7,CentOS8安装Nodejs环境
- CentOS7,CentOS8安装Elasticsearch6.8.6
- CentOS8安装Docker,最新的服务器搭配容器使用
- 设置Eclipse缩进为4个空格,增强代码规范
- CentOS7安装Docker,走上虚拟化容器引擎之路
- SpringBoot2初体验,简单认识spring boot2并且搭建基础工程
- CentOS7设置SWAP分区,小内存服务器的救世主