npm组件库开发系列
文章平均质量分 54
npm 组件库开发,发布到使用以及问题
渔倒到
返璞归真(人-> 猿)
展开
-
基于Vue的下拉select选择区间组件
业务场景 选择职级范围,ant-design-vue的适用的组件是两个select并用,前值后值充当区间范围,这样会比较麻烦,对用户不友好,与是开发一个 模拟下拉select,但是可选择区间,回显样式类似于 A -B看图:这样一个select就可以完成区间选择了。下面看代码:首先基于antdv的基础组件 dropdown、input、icon、menutemplate部分:这个ant基础组件的使用就不在这里解释了<template> <a-dropdown cla原创 2021-06-15 17:04:04 · 1131 阅读 · 7 评论 -
ant-desing-vue table 可伸缩列在固定列、多级表头情况下的实现以及问题解决
这个东西本来以为手到擒来,因为在官网中已经给出了例子,但是果然还是不能太信任官方,官方给出来的只能是最基础的,然后我们正常的使用场景往往要复杂很多,比如固定列, 比如固定表头,比如自带checkbox列,比如多级表头的情况。要想满足这些情况往往需要自行开发。1.首先蒋官方的例子copy下来,居然拖不动。对照了一下官方,css居然都不一样,于是增加了第一个改动因为style内联样式自带了 translate属性,所以直接去掉right:0;只留left -5.height设置100%就可以。...原创 2021-05-26 10:28:22 · 4293 阅读 · 20 评论 -
vue通过mock(json-server)实现前端数据模拟
当前开发模式基本都是前后端分离,那么在写vue或者react(数据驱动)时前端页面的展现,以及一些交互逻辑往往是需要数据驱动的,但是后端要建表,写逻辑接口没有那么快交给前端。这时就需要mock一些假数据,好让前端可以无障碍的做下去。json-server就是一种前端mock工具在node环境下通过npm安装npm install json-server -g然后在跟目录下创建db.json的目录,然后写入信息{ "api": [ { "text": "数据统计",原创 2021-05-08 14:26:44 · 318 阅读 · 0 评论 -
npm publish 组件流程以及报错总结
想要在npm 上publish 自己的组件。1.注册账号可以在npm官网上注册,可以在命令行: npm adduser 之后输入 username password email(注意email 注册后需要打开邮箱确认,之后publish才不会报错)2.创建一个项目:配置packege.json“name”: 组件名称,“version”: “1.9.70”, 版本号“private”: false, 一定要 false“main”: “src/index/packages/index.js原创 2021-04-16 09:19:45 · 1495 阅读 · 3 评论 -
vue进阶,组件化必备
vue 隐秘的角落1. this.$attrs2. this.$scopedSlots,3. this.$slots4. this.$nexttick()5. this.$forceUpdate()原创 2021-01-28 15:50:06 · 338 阅读 · 3 评论 -
基于vant 移动端动态表单实现
大锅饭原创 2021-01-28 15:22:03 · 2739 阅读 · 0 评论 -
antdv a-timeline自定义流程节点、审批节点,历史节点
ant 的时间节点组件支持自定义节点内容, 以及节点状态。下面封装了几个业务组件,供应不同业务场景。流程审批节点的设置,查看历史节点信息,代办已办审批流程的状态查看。如下图所示:...原创 2021-01-28 15:10:30 · 5522 阅读 · 4 评论 -
antdv a-datepicker 日期组件设置禁用时间区间, 区间外等总结
日期组件 经常会出现要求某段时间内不可选, 或者某个时间节点前、后不可选。每次都写很麻烦。于是就总结了一下可能出现的情况。首先 vue部分 <a-date-picker :key="key" v-model="dateValue" :value="moment(dateValue, attrBute.format)" @change="onChange" @openChange="openChange" :format=原创 2020-10-20 16:04:43 · 5604 阅读 · 4 评论 -
nrm 快速切换npm 源地址
切换npm 源地址, 我们可以这样 npm set registry=https://registry.npm.taobao.org/切换到淘宝镜像这样切换需要记忆的东西比较复杂,而且不方便管理因此需要引入nrmnrm 是一个 npm 源镜像管理器,快速切换npm 源地址安装npm install -g nrm 必须全局安装 -g检查 nrm -V 查看版本,以及是否安装成功安装成功一些指令:1.nrm ls 查看所有源地址, *表示当前使用的镜像地址。2.nrm add 名称原创 2020-10-09 15:05:33 · 291 阅读 · 0 评论 -
npm之babel-plugin-import,按需引入
通过后原创 2020-10-09 14:43:43 · 3162 阅读 · 0 评论 -
如何在js 中使用 css 预处理语言中的 样式变量
上一篇文章中讲到,如何在vue 项目中移入全局sass变量,那么定义的变量是否只能在 css 中使用呢, 答案是不, 可以在js 中使用, 很厉害的。首先需要安装> npm install sass-loader node-sass webpack --save-dev在 vueconfig 中 module: { rules: [ { te...原创 2020-03-11 18:30:21 · 245 阅读 · 0 评论 -
vue 项目中 引入css sass less 全局变量的方式
当项目达到了一定规模时, 代码规范,组件化就成了重中之重, 之前已经写了几篇组件化的文章, 接下来说一下css 的规范,css 使用sass 的全局变量定义样式, 好处是 更换主题, 主色调的变更时, 不用一个页面一个页面的去找, 只需要改一个变量值就ok了。如果有不明白或者没用过 sass 的可以去看我之前的文章 sass 入门全局的sass 文件内容大致是这样的$nav-6: #0B316...原创 2020-03-11 18:23:23 · 1846 阅读 · 0 评论 -
美化ant-design vue 组件滚动条样式,hover时滚动条样式变化
a-modal:.ant-modal-body { &::-webkit-scrollbar { width: 6px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } &::-webkit-scrollbar-thumb { border-radius: 6px; // -webkit-...原创 2020-02-27 15:22:31 · 9339 阅读 · 3 评论 -
antdesign vue组件问题(二)table 组件错位问题,滚动加载,行选中问题,树表格自定义节点图标
table 组件错位导致问题出现的原因很多;1. 内容区超过td范围, ant 组件并不像ele 提供了 tool-tip展示,解决办法:在每个单元格外包一层div 设置宽度 css 样式 处理成 文本溢出 省略号 代替显示当然你回发现这样处理过后文本是不会超出了,但是错位问题还是没有解决。2. index 列 和 check 列同时出现 会存在错位。index 列 ant 是不支持 ...原创 2020-02-27 10:56:53 · 6143 阅读 · 0 评论 -
antdesign vue组件问题(一)select下拉列表跟随滚动条滚动
本文为二次封装ant组件库中遇到问题的记录:对于select的问题::getPopupContainer=" triggerNode => { return triggerNode.parentNode || document.body; } "...原创 2020-02-27 10:20:00 · 6313 阅读 · 0 评论 -
npm link组件包频繁发布问题
项目组件库开发问题:项目和组件库同时开发带来了很多问题和不便,主要是业务初期版本号快速增长导致的:版本号过多,版本号传递过程中的繁琐以及组件库反复安装的痛苦npm包版本号的快速增长带来了以下几个问题:调试变得不方便之前真机测试只要发布测试环境即可,但是现在要先发布npm包,安装npm包,然后再发布测试环境,从一个步骤变成了三个步骤。联调困难版本号的快速更新导致每次都要通知相关同学新...转载 2020-01-13 10:42:18 · 1603 阅读 · 0 评论 -
对于封装 adapter 层的思考
更换ui库的问题由于项目变更的业务需求需要更换ui组件库(由element ==》antdesign vue)。由于之前项目开发时没有考虑到这种情况,element 组件都是分布在项目的各个模块和组件内,想要快速的替换成 ant 工作量基本和重新开发一套前端的成本是一样的。基于以上问题决定自己动手做一套adapter, 也就是对ui 库(element, 或者ant)进行二次封装,完全解耦原...原创 2019-12-19 17:39:13 · 549 阅读 · 0 评论