该系列已更新文章: 分享一个实用的 vite + vue3 组件库脚手架工具,提升开发效率 开箱即用 yyg-cli 脚手架:快速创建 vue3 组件库和vue3 全家桶项目 Vue3 企业级优雅实战 - 组件库框架 - 1 搭建 pnpm monorepo Vue3 企业级优雅实战 - 组件库框架 - 2 初始化 workspace-root Vue3 企业级优雅实战 - 组件库框架 - 3 搭建组件库开发环境 Vue3 企业级优雅实战 - 组件库框架 - 4 组件库的 CSS 架构 Vue3…

效果图: npm run dev 编译项目之后,报错,要使用jsx语法需要先安装编译插件 1.安装下列安装包 npm install babel-plugin-syntax-jsx --save-dev npm install babel-plugin-transform-vue-jsx --save-dev npm install babel-helper-vue-jsx-merge-props --save-dev npm install babel-preset-es2015 --save…

该系列已更新文章: 分享一个实用的 vite + vue3 组件库脚手架工具,提升开发效率 开箱即用 yyg-cli 脚手架:快速创建 vue3 组件库和vue3 全家桶项目 Vue3 企业级优雅实战 - 组件库框架 - 1 搭建 pnpm monorepo Vue3 企业级优雅实战 - 组件库框架 - 2 初始化 workspace-root Vue3 企业级优雅实战 - 组件库框架 - 3 搭建组件库开发环境 Vue3 企业级优雅实战 - 组件库框架 - 4 组件库的 CSS 架构 本文继续…

表格内render函数渲染Select组件   { title: '属性值', key: 'values', render:(h,params)=>{ return h('Select',{           props:{           value:this.vmodel         }, on:{              'on-change':(e)=>{                   console.log(e)                   }       …

在前一篇文章中分享了搭建组件库的基本开发环境.创建了 foo 组件模块和组件库入口模块,本文分享组件库的样式架构设计. 1 常见的 CSS 架构模式 常见的 CSS 架构模式有很多:OOCSS.ACSS.BEM.SMACSS.ITCSS 等,其中 SMACSS 和 ITCSS 很相似.我在企业级项目中最常使用的是简化版的 ITCSS + BEM + ACSS,所以本文首先介绍这三种模式,其他模式大家自己上网查看. 1.1 ACSS ACSS 模式几乎是一个样式属性就对应了一个样式类.这种方式非常…

原文链接:https://www.cnblogs.com/ysmc/p/16133351.html 在 Bootstrap 中,栅格相信大家都很熟悉,简直就是布局神器啊,Bootstrap Blazor 组件库当然毫无意外地支持该功能,并且封装成了组件,使用更加方便,下面我们一起来看看吧! 首先,这是官网关于 Row 组件的文档链接:传送门 按照惯例,直接上代码! <div style="margin:10px"> <Row ItemsPerRow="Ite…

通知组件 通过浏览器API发送通知信息 , 桌面浏览器表现为右下角系统提示框弹出消息, 移动浏览器表现为弹窗或者到消息列表, blazor页面不在前台也可以通过本组件提醒用户. DEMO https://www.blazor.zone/notifications 小提示 注意: 出于安全考虑,当网页请求发送通知时,用户会被提示进行授权 使用 BrowserNotification 静态方法直接调用 Dispatch 方法 private NotificationItem Model { get;…

先看下效果 其实就是个抖动效果组件,实现起来也非常简单.之所以做这样一个组件是为了后面写Form表单的时候会用到它做一个规则校验,比如下面一个简单的登录页面,当点击登录会提示用户哪个信息没输入,当然这只是一个简陋的demo 接下来就开始我们的Shake组件实现 CSS样式 当你需要抖动的时候就给它添加个抖动的类名,不需要就移除这个类名即可.抖动效果就用CSS3中的transform的平移属性加动画实现 @keyframes shake { 10%, 90% { transform: transl…

回顾第一篇文章中谈到的组件库的几个方面,只剩下最后的.也是最重要的组件库的打包构建.本地发布.远程发布了. 1 组件库构建 组件库的入口是 packages/yyg-demo-ui,构建组件库有两个步骤: 添加 TypeScript 的配置文件: tsconfig.json 添加 vite.config.ts 配置文件,配置打包方式. 1.1 tsconfig.json 在 packages/yyg-demo-ui 中添加 tsconfig.json 文件: { "compilerOptions…

我们经常在使用 Element组件里面的 select多选 场景:添加账号的时候需要选择可见分公司(分公司为多选),添加成功之后可以编辑,需要回显添加时所提交的分公司 代码如下: 多选框: data(){ return{   oldSearchJobType: [], companyIds: "", //分公司数据id companyList: [], //分公司列表 companyListAll: { id: "", visibleCompany: "全…