组件介绍 Editor组件是对Summernote 组件的二次封装. 组件分为div模式和editor模式. 默认状态下editor模式的组件样子如下: 其代码如下: <Editor @bind-Value="@EditorValue" IsEditor="true"></Editor> 我们可以通过@bind-Value来绑定到字段中. 组件的其他属性 IsEditor:是否默认显示为编辑器,默认为false,即显示为一个div,只有在di…

组件解决的问题 由于Blazor在与服务器连接时使用了Websocket,仅在第一次连接时会走原MVC的连接逻辑.所以,我们无法在这个过程中完成例如身份认证.cookie处理等操作. 此组件即为解决此类问题准备的. 组件用法 官网文档可以直接查阅 这里给出一部分代码: 在页面上添加<Ajax></Ajax>的组件引用 @inject AjaxService AjaxService注入AjaxService var option = new AjaxOption { Url = &q…

上文创建了一堆 utils.component-info,并实现了新组件模块相关目录和文件的创建.本文继续实现后面的内容. 1 组件样式文件并导入 在 src/service 目录中创建 init-scss.ts 文件,该文件导出 initScss 函数. 由于 .vue 类型的组件的样式就直接写在了 style 中,故首先判断组件类型是否是 tsx,tsx 类型的组件才进行这一步的操作: 在 scss/components/ 目录下创建组件的 scss 文件 _xxx.module.scss:…

当前工作中,前端的主要技术栈用是vue. 那React怎么办呢?总不至于把他扔在墙角吧! 只能在一些很小的项目上,也只有自己一个前端的时候,悄悄的上React. 当然,React项目UI组件还是最喜欢的Antd了. 近期的一个项目,就这么上了React和Antd,然后当中有一棵树组件. 简单看一下树组件的设计图吧! 看了设计图,就发现一个小问题. Antd组件库当中的Tree组件子节点的向右缩进是通过父节点的padding-left实现的.那么就这么尴尬了,子节点的选中状态背景色没办法占满整行.…

前文已经初始化了 workspace-root,从本文开始就需要依次搭建组件库.example.文档.cli.本文内容是搭建 组件库的开发环境. 1 packages 目录 前面在项目根目录下创建了 packages 目录,该目录存放组件库的所有组件及组件库的入口.该目录中已经创建了两个子目录 foo 和 yyg-demo-ui.这两个目录是干嘛用的呢? 1.1 foo 目录 foo 目录代表一个示例组件,后面咱们会使用该组件来测试组件库在 example 和组件库文档中是否能正常运行.后续要开…

[Angular]关于angular引用第三方组件库无法改变其组件样式 :host ::ng-deep css修改:无效 .ant-input-affix-wrapper .ant-input:not(:first-child){ padding-left: 30px; } 修改上面就正常了 :host ::ng-deep .ant-input-affix-wrapper .ant-input:not(:first-child){ padding-left: 30px; }…

eleme写的基于vue2.0的前端组件库: http://element.eleme.io 我在平时使用过程中,遇到的问题. 自定义表单验证出坑: 1: validate/resetFields 未定义. 原因: 1:要验证的DOM,还没有加载出来. 2:有可能this.$refs[ruleForm].validate() 方式不识别.需要使用: this.$refs.ruleForm.validate(); 解决方法 1: 要验证的DOM,还没有加载出来. this.ticketDialog…

前面的文章分享了组件库的开发.example.组件库文档,本文分享组件库 cli 开发. 1 为什么要开发组件库 cli 回顾一个新组件的完整开发步骤: 1 在 packages 目录下创建组件目录 xxx: 1.1 使用 pnpm 初始化 package.json,修改 name 属性: 1.2 在该目录中创建 src 目录和 index.ts 文件: 1.3 在 src 目录下创建 types.ts 文件和 index.tsx / index.vue 文件: 2 在组件库的入口模块 pack…

上文搭建了组件库 cli 的基础架子,实现了创建组件时的用户交互,但遗留了 cli/src/command/create-component.ts 中的 createNewComponent 函数,该函数要实现的功能就是上文开篇提到的 -- 创建一个组件的完整步骤.本文咱们就依次实现那些步骤.(友情提示:本文内容较多,如果你能耐心看完.写完,一定会有提升) 1 创建工具类 在实现 cli 的过程中会涉及到组件名称命名方式的转换.执行cmd命令等操作,所以在开始实现创建组件前,先准备一些工具类.…

在Blazor 组件库 BootstrapBlazor 中Card组件介绍中我们说过,如果我们使用了Card组件的IsCollapsible属性设置了可伸缩的话,就只能使用Text属性来设置标题文本,不能自己定义了. 但是我们在widget组件设置的时候希望在CardHeader里放一个按钮或者一个下拉按钮,来完成一些事情,样子如下: 这里右边的添加到部分,在原始的Card中实现不了,所以我们需要改造一下. 这里我们可以在BootstrapBlazor的源码中发现,Card组件实际上是继承了Ca…