- Vue3+ts实现一个颜色选择器(可以自定义)
伊泽瑞尔.
前端开发实践vue.jsjavascript前端
Vue3+ts实现一个颜色选择器最近需求需要用到颜色选择器,但是选用的ant-design-vue种并没有颜色选择器这个组件,所以就想着自己实现以下效果图vue代码//ColorPicker.vueHEX-->RGB清空确认//ColorPicker.vueimport{ref,reactive,computed,nextTick,onMounted,watch}from'vue'import{r
- 通过函数创建 ant-design-vue 的 Drawer 组件和 Modal 组件
原由通常在业务中,写抽屉组件或者弹框组件的时候,都是用visible属性来控制是否显示:OpenModalwithasynclogic{{ModalText}}exportdefault{data(){return{ModalText:'Contentofthemodal',visible:false,confirmLoading:false,};},methods:{showModal(){th
- ant-design-vue, a-table, 自动生成序号列
四喜花露水
Antdvue前端linuxjavascriptanti-design-vuevue.js
通过customRender:(text,record,index)=>`${index+1}`,自动生成序号列,不用再写templatecolumns:[{title:'序号',dataIndex:'index',key:'index',width:50,fixed:'left',customRender:(text,record,index)=>`${index+1}`,//关键句},....
- 个人建站前端篇(五)插件unplugin-vue-components的使用
niech_cn
个人建站前端篇前端vue.jsjavascript
unplugin-vue-components是由Vue官方人员开发的一款自动引入插件,可以省去比如UI库的大量import语句。unplugin-vue-components插件可以在Vue文件中自动引入组件(包括项目自身的组件和各种组件库中的组件)使用此插件后,不需要手动编写import{Button}from'ant-design-vue’这样的代码了,插件会自动识别template中使用的
- 前端组件库自定义主题切换探索-01-方案借鉴与思路参考
东扯葫芦西扯瓜
探索原因背景首先自然是项目有需求,这是必须去做的原因其次,是我们项目没有直接使用市面上现成的基于element-ui或者ant-design的第三方UI框架,比如avue,而是有着自己的UI组件库第三,我们的组件库基于ant-design-vue,而ant-design-vue并没有很好的支持主题动态切换(主题总体模式仅支持深色和浅色,其他颜色只支持主色切换,不支持其他颜色和属性动态定制)第四,我
- antdesignvue中设置单独组件与所有组件颜色样式
闪电松鼠~
javascript前端vue.js
components中设置单独组件,token中所有组件,单独会覆盖所有组件样式import{ConfigProvider,message}from'ant-design-vue';importzhCNfrom'ant-design-vue/es/locale/zh_CN';message.config({top:'60px'});
- Ant-Design-Vue快速上手指南+排坑,操作详细步骤
liyy614
anti-design-vue
Ant-Design-Vue是一款基于Vue.js的UI组件库,它不仅提供了丰富的高质量组件,还支持灵活的配置选项,使得开发者能够快速构建出既美观又功能强大的前端应用。下面将详细介绍Ant-Design-Vue的快速上手指南和排坑操作,帮助开发者顺利使用这一框架:准备环境学习基础:推荐先学习Vue和ES2015的基础知识,确保对HTML、CSS和JavaScript有一定了解。安装Node.js:
- vite开发环境跳转页面卡住,加载慢,ant-design-vue 按需导入的新组件导致页面加载慢
vitevue.js
环境vite:2.9.9unplugin-vue-components:0.19.6参考issues:使用按需引入时,首次启动服务会依赖预构建style#361vite-plugin-ifdef(在vite中使用conditioncomplie)问题描述本地开发时,遇到跳转页面要等10s以上才能跳转成功,打包后没有这个问题问题分析发现跳转到的页面如果有新的antd组件,就会有这个问题问题原因项目中
- 【ant-design-vue】a-input、a-number、a-date在disabled时样式修改
Chx.zhang
vue.js前端ant-design
a-input、a-number、a-date在disabled时,颜色比较深,不宜查看。由于之前项目之前在对输入框禁用,不宜查看,故做此修改并记录。只是有一个疑问,为什么之气那项目的查看不用readOnly???不香吗?????/*覆盖ant-design-vue样式**/.ant-select-disabled.ant-select:not(.ant-select-customize-inpu
- Vue3+Ant-Design-Vue:报错Cannot read properties of null (reading ‘isCE‘)
是席木木啊
Vuevue.js前端javascript
问题描述在使用Ant-Design-Vue内置的Table表格组件,实现expand展开行功能时,报错:UncaughtTypeError:Cannotreadpropertiesofnull(reading‘isCE‘)。报错信息图示:在GitHub上找到如下描述,解决方案网上介绍的解决方案网上找到了几种解决方案,Vite+Vue3项目:修改配置文件修改vite.config.js配置文件,re
- ant-design-vue 快速避坑指南
wwf1225
ant-design-vue快速避坑指南ant-design-vue是蚂蚁金服AntDesign官方唯一推荐的Vue版UI组件库,它其实是AntDesign的Vue实现,组件的风格与AntDesign保持同步,组件的html结构和css样式也保持一致。用下来发现它的确称得上为数不多的完整的VUE组件库与开发方案集成项目。本文主要目的是总结一些开发过程中比较耗时间去查找,文档中没有具体说明的常见问题
- 上传文件发生跨域
走向架构师的小白
nginx前端
情景:后台使用ant-design-vue的upload组件上传文件时候,有时上传失败,控制台报跨域。解决:经排查是nginx配置中没有配置请求实体大小client_max_body_size1024m;
- Ant Design Vue上传多个图片
ᥬ 小月亮
UI框架vue.js前端javascript
模板代码:定义变量:文件限制的函数:上传的函数:样式函数:完整代码:上传图片tab:tab1:确定取消import{defineComponent,reactive,toRefs,watch,nextTick}from'vue'import{message}from'ant-design-vue'importGfrom'@/request/G'importaxiosfrom'axios'expor
- ant-design-vue 按需加载
skyZcc
1.创建js文件src/components/lazy_antd.js2.修改配置文件babel.config.js增加插件配置3.在main.js中引入配置文件src/components/lazy_antd.js4.package.json引入依赖babel-plugin-import"babel-plugin-import":"^1.13.0"
- 2024年1月Java项目开发指南15:vue3+AntDesignVue 设计页面
萌狼蓝天
javavue.js前端javascript开发语言
考虑到有的同学对vue3不熟悉,因此,我把ControlView.vue这个页面清空,我们从0开始写。搭建页面的基本框架展开代码后复制你需要的代码。比如我选择上中下这种结构,我就复制上中下这种结构的代码运行查看效果显然,这个样式依旧有一点问题,需要我们补充一点样式。我们希望他他占满整个页面(100vh)引用组件Header设计关于header的布局,我们使用ant-design-vue中的栅格组件
- ant-design-vue table 合并表格
哼_
参考文章:https://www.csdn.net/tags/MtTaEg3sMTc3OTk5LWJsb2cO0O0O.html最后效果图:image.png
- 【无标题】vue自定义表单验证的时候报错TypeError: callback is not a function
懒啦
报错bugAntDesignVuevue报错vue.jsjavascript前端
今天遇到一个奇怪的bug我在使用ant-design-vue组件库自定义表单验证的时候出现的在ant-design-vue组件库里面定义的自定义校验规则是这样的validator在网上找了很多资料里面不是说1.检查自定义函数是否有问题2.检查校检字段信息可是我两个都看了并没有问题但是还是一直提示报错。1.检查自定义函数是否有问题自定义函数必须是三个参数rule,value,callback这三个而
- ant-design-vue 的通过控制a-table的滚动条实现表格滚动效果
懒啦
vue.jsjavascript前端anti-design-vue
ant-design-vue的通过控制a-table的滚动条实现表格滚动效果鼠标移入滚动条停止滚动,鼠标移出滚动条继续滚动data(){return{loading:false,columns1:[{title:'省份',dataIndex:'provinceName',align:'center',width:65,ellipsis:true},{title:'地市',dataIndex:'ci
- antd + vue3实现tree树增加按钮
前端小菜
页面显示在这里插入图片描述写在前面改代码使用slot,接口返回值必须为title,key,children,不能使用API在这里插入图片描述这个会导致我们按钮的slot冲突完整代码部门名称部门负责人操作{{nodeData.title}}{{nodeData.dataRef.owner}}新增下级修改删除import{message}from"ant-design-vue";import{defi
- axios 拦截器来截取取消重复请求
啊笨猫
在实际项目中,我们可能需要对请求进行“防抖”处理。这里主要是为了阻止用户在某些情况下短时间内重复点击某个按钮,导致前端向后端重复发送多次请求,这里介绍一种使用Axios拦截器来取消重复的请求方法importaxiosfrom'axios'importqsfrom'qs'import{notification,message}from'ant-design-vue'importrouterfrom'
- vue3 + antd 封装动态表单组件(一)
guizi0809
vue3ant-designvue.jsjavascript前端
前置条件:vue版本v3.3.11ant-design-vue版本v4.1.1创建动态组件配置文件config.jsimport{Input,Textarea,InputNumber,Select,RadioGroup,CheckboxGroup,DatePicker}from'ant-design-vue';//表单域组件类型exportconstcomponentsMap={Text:Inpu
- ant-design-vue中Form表单校验
xiongdaandxiaomi
antdesignvueant-design-vueform
页面效果实现{{d}}{{item.name}}{{item.title}}{{item.title}}校验提交
- ant-design-vue栅格布局遇到的问题
WGG_1987
ant-design-vuevue
栅格布局的描述:antdv官方文档介绍布局的栅格化系统,基于行(row)和列(col)来定义信息区块的外部框架,以保证页面的每个区域能够稳健地排布起来个人理解:类似于excel中的表格,一个一个的单元格可以进行合并,也可以进行拆分,只不过antd每行最多24个格子,bootstrap为12个格子,通过栅格化的系统使布局更加简单,美观。开发中的问题:在日常的开发中,在不同的分辨率下,界面布局出现错行
- vue3和ant-design-vue的<a-form>表单自定义规则校验封装
小王讨厌洋葱
vue.jsjavascript前端
//使用ant-design-vue里面的rules属性增加校验$refs.formBox">//a-form-item外面包裹a-row和a-col是为了利用其调整每个表单元素的距离improt{ref,reactive}from'vue'//引入封装的自定义校验js文件import{validateName,validateAge}from'./rules'constformState=rea
- Ant Design Vue的表单布局
我是福强
AntDesignVuevue
在Ant-Design-Vue中的文本框的布局和标签的长度管理AntDesignVue的栅格布局使用1、布局行列创建使用,在form中创建列和行直接复制进即可col-8col-8col-82、在对应的得col中复制进对应的表单内容3、配置每个表单内容的label宽度和文本框的宽度配置项labelCol:{xs:{span:24},sm:{span:8}//控制label的框的长度},wrapper
- ant-design-vue form表单实现动态循环效验
何故沾衣欲湿杏花雨
vue.jsjavascript前端
单层循环的话//不需要增减的表单项//设置display:flex属性可让表单显示在一行//prop表单域的model字段//这里你可以写多组表单项...//需要动态增减的表单行//InfoList就是我们每次添加表单时要push对象的数组//input需要绑定到InfoList中的元素//如果你要保留最开始的表单行可在删除icon上添加v-if="index!==0"index为0时不显示删除i
- nuxt3引入Ant Design Vue4.0.8版本报错 500 [vite-node] [ERR_LOAD_URL] ant-design-vue/dist/antd.css
躺平阿福
Bug记录nuxtue4vue.jscss
引入全流程下载npmi--saveant-design-vue配置新建/plugins/xx.ts插件文件importAntdfrom"ant-design-vue";exportdefaultdefineNuxtPlugin((nuxtApp)=>{nuxtApp.vueApp.use(Antd)})nuxt.config.ts中引入cssexportdefaultdefineNuxtConfi
- 关于 ant-design-vue resetFields 失效
동경
vue.js前端javascript
关于ant-design-vueresetFields失效背景:遇到这样的问题使用ant-design-vueuseForm来制作表单的时候,resetFields()失效场景:编辑-赋值新增-初始值(问题点:新增的时候他就不初始化)方案:1、调用resetFields()传参2、要么使用reactive明确定义初始值解释:首先我这里讲一下源代码中的逻辑useForm代码1、首先我讲一下我这里为什
- 前端组件库自定义主题切换探索-01-方案借鉴与思路参考
土豆片片
前端前端
探索原因背景首先自然是项目有需求,这是必须去做的原因其次,是我们项目没有直接使用市面上现成的基于element-ui或者ant-design的第三方UI框架,比如avue,而是有着自己的UI组件库第三,我们的组件库基于ant-design-vue,而ant-design-vue并没有很好的支持主题动态切换(主题总体模式仅支持深色和浅色,其他颜色只支持主色切换,不支持其他颜色和属性动态定制)第四,我
- ant-design-vue 1.x 的 a-form-model怎样设置表单必填项(a-form同样适用)
帆仔哟
vuevue.jsjavascript前端
背景"ant-design-vue":"1.7.6"vue2吐槽不知道公司为什么非要用蚂蚁金服1.x版本的组件,还是新项目,问题很多bug不少本文记录第一个必填项bug问题项目内a-form-model表单某几个属性需要增加必填项试了以前element-ui的三种方式1.rules校验规则:失效代码:{{e.name}}data定义:rules:{template_type:[{required:
- TOMCAT在POST方法提交参数丢失问题
357029540
javatomcatjsp
摘自http://my.oschina.net/luckyi/blog/213209
昨天在解决一个BUG时发现一个奇怪的问题,一个AJAX提交数据在之前都是木有问题的,突然提交出错影响其他处理流程。
检查时发现页面处理数据较多,起初以为是提交顺序不正确修改后发现不是由此问题引起。于是删除掉一部分数据进行提交,较少数据能够提交成功。
恢复较多数据后跟踪提交FORM DATA ,发现数
- 在MyEclipse中增加JSP模板 删除-2008-08-18
ljy325
jspxmlMyEclipse
在D:\Program Files\MyEclipse 6.0\myeclipse\eclipse\plugins\com.genuitec.eclipse.wizards_6.0.1.zmyeclipse601200710\templates\jsp 目录下找到Jsp.vtl,复制一份,重命名为jsp2.vtl,然后把里面的内容修改为自己想要的格式,保存。
然后在 D:\Progr
- JavaScript常用验证脚本总结
eksliang
JavaScriptjavaScript表单验证
转载请出自出处:http://eksliang.iteye.com/blog/2098985
下面这些验证脚本,是我在这几年开发中的总结,今天把他放出来,也算是一种分享吧,现在在我的项目中也在用!包括日期验证、比较,非空验证、身份证验证、数值验证、Email验证、电话验证等等...!
&nb
- 微软BI(4)
18289753290
微软BI SSIS
1)
Q:查看ssis里面某个控件输出的结果:
A MessageBox.Show(Dts.Variables["v_lastTimestamp"].Value.ToString());
这是我们在包里面定义的变量
2):在关联目的端表的时候如果是一对多的关系,一定要选择唯一的那个键作为关联字段。
3)
Q:ssis里面如果将多个数据源的数据插入目的端一
- 定时对大数据量的表进行分表对数据备份
酷的飞上天空
大数据量
工作中遇到数据库中一个表的数据量比较大,属于日志表。正常情况下是不会有查询操作的,但如果不进行分表数据太多,执行一条简单sql语句要等好几分钟。。
分表工具:linux的shell + mysql自身提供的管理命令
原理:使用一个和原表数据结构一样的表,替换原表。
linux shell内容如下:
=======================开始 
- 本质的描述与因材施教
永夜-极光
感想随笔
不管碰到什么事,我都下意识的想去探索本质,找寻一个最形象的描述方式。
我坚信,世界上对一件事物的描述和解释,肯定有一种最形象,最贴近本质,最容易让人理解
&
- 很迷茫。。。
随便小屋
随笔
小弟我今年研一,也是从事的咱们现在最流行的专业(计算机)。本科三流学校,为了能有个更好的跳板,进入了考研大军,非常有幸能进入研究生的行业(具体学校就不说了,怕把学校的名誉给损了)。
先说一下自身的条件,本科专业软件工程。主要学习就是软件开发,几乎和计算机没有什么区别。因为学校本身三流,也就是让老师带着学生学点东西,然后让学生毕业就行了。对专业性的东西了解的非常浅。就那学的语言来说
- 23种设计模式的意图和适用范围
aijuans
设计模式
Factory Method 意图 定义一个用于创建对象的接口,让子类决定实例化哪一个类。Factory Method 使一个类的实例化延迟到其子类。 适用性 当一个类不知道它所必须创建的对象的类的时候。 当一个类希望由它的子类来指定它所创建的对象的时候。 当类将创建对象的职责委托给多个帮助子类中的某一个,并且你希望将哪一个帮助子类是代理者这一信息局部化的时候。
Abstr
- Java中的synchronized和volatile
aoyouzi
javavolatilesynchronized
说到Java的线程同步问题肯定要说到两个关键字synchronized和volatile。说到这两个关键字,又要说道JVM的内存模型。JVM里内存分为main memory和working memory。 Main memory是所有线程共享的,working memory则是线程的工作内存,它保存有部分main memory变量的拷贝,对这些变量的更新直接发生在working memo
- js数组的操作和this关键字
百合不是茶
js数组操作this关键字
js数组的操作;
一:数组的创建:
1、数组的创建
var array = new Array(); //创建一个数组
var array = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度
var arrayObj = new Array([element0[, element1[, ...[, elementN]]]
- 别人的阿里面试感悟
bijian1013
面试分享工作感悟阿里面试
原文如下:http://greemranqq.iteye.com/blog/2007170
一直做企业系统,虽然也自己一直学习技术,但是感觉还是有所欠缺,准备花几个月的时间,把互联网的东西,以及一些基础更加的深入透析,结果这次比较意外,有点突然,下面分享一下感受吧!
&nb
- 淘宝的测试框架Itest
Bill_chen
springmaven框架单元测试JUnit
Itest测试框架是TaoBao测试部门开发的一套单元测试框架,以Junit4为核心,
集合DbUnit、Unitils等主流测试框架,应该算是比较好用的了。
近期项目中用了下,有关itest的具体使用如下:
1.在Maven中引入itest框架:
<dependency>
<groupId>com.taobao.test</groupId&g
- 【Java多线程二】多路条件解决生产者消费者问题
bit1129
java多线程
package com.tom;
import java.util.LinkedList;
import java.util.Queue;
import java.util.concurrent.ThreadLocalRandom;
import java.util.concurrent.locks.Condition;
import java.util.concurrent.loc
- 汉字转拼音pinyin4j
白糖_
pinyin4j
以前在项目中遇到汉字转拼音的情况,于是在网上找到了pinyin4j这个工具包,非常有用,别的不说了,直接下代码:
import java.util.HashSet;
import java.util.Set;
import net.sourceforge.pinyin4j.PinyinHelper;
import net.sourceforge.pinyin
- org.hibernate.TransactionException: JDBC begin failed解决方案
bozch
ssh数据库异常DBCP
org.hibernate.TransactionException: JDBC begin failed: at org.hibernate.transaction.JDBCTransaction.begin(JDBCTransaction.java:68) at org.hibernate.impl.SessionImp
- java-并查集(Disjoint-set)-将多个集合合并成没有交集的集合
bylijinnan
java
import java.util.ArrayList;
import java.util.Arrays;
import java.util.HashMap;
import java.util.HashSet;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import java.ut
- Java PrintWriter打印乱码
chenbowen00
java
一个小程序读写文件,发现PrintWriter输出后文件存在乱码,解决办法主要统一输入输出流编码格式。
读文件:
BufferedReader
从字符输入流中读取文本,缓冲各个字符,从而提供字符、数组和行的高效读取。
可以指定缓冲区的大小,或者可使用默认的大小。大多数情况下,默认值就足够大了。
通常,Reader 所作的每个读取请求都会导致对基础字符或字节流进行相应的读取请求。因
- [天气与气候]极端气候环境
comsci
环境
如果空间环境出现异变...外星文明并未出现,而只是用某种气象武器对地球的气候系统进行攻击,并挑唆地球国家间的战争,经过一段时间的准备...最大限度的削弱地球文明的整体力量,然后再进行入侵......
那么地球上的国家应该做什么样的防备工作呢?
&n
- oracle order by与union一起使用的用法
daizj
UNIONoracleorder by
当使用union操作时,排序语句必须放在最后面才正确,如下:
只能在union的最后一个子查询中使用order by,而这个order by是针对整个unioning后的结果集的。So:
如果unoin的几个子查询列名不同,如
Sql代码
select supplier_id, supplier_name
from suppliers
UNI
- zeus持久层读写分离单元测试
deng520159
单元测试
本文是zeus读写分离单元测试,距离分库分表,只有一步了.上代码:
1.ZeusMasterSlaveTest.java
package com.dengliang.zeus.webdemo.test;
import java.util.ArrayList;
import java.util.List;
import org.junit.Assert;
import org.j
- Yii 截取字符串(UTF-8) 使用组件
dcj3sjt126com
yii
1.将Helper.php放进protected\components文件夹下。
2.调用方法:
Helper::truncate_utf8_string($content,20,false); //不显示省略号 Helper::truncate_utf8_string($content,20); //显示省略号
&n
- 安装memcache及php扩展
dcj3sjt126com
PHP
安装memcache tar zxvf memcache-2.2.5.tgz cd memcache-2.2.5/ /usr/local/php/bin/phpize (?) ./configure --with-php-confi
- JsonObject 处理日期
feifeilinlin521
javajsonJsonOjbectJsonArrayJSONException
写这边文章的初衷就是遇到了json在转换日期格式出现了异常 net.sf.json.JSONException: java.lang.reflect.InvocationTargetException 原因是当你用Map接收数据库返回了java.sql.Date 日期的数据进行json转换出的问题话不多说 直接上代码
&n
- Ehcache(06)——监听器
234390216
监听器listenerehcache
监听器
Ehcache中监听器有两种,监听CacheManager的CacheManagerEventListener和监听Cache的CacheEventListener。在Ehcache中,Listener是通过对应的监听器工厂来生产和发生作用的。下面我们将来介绍一下这两种类型的监听器。
- activiti 自带设计器中chrome 34版本不能打开bug的解决
jackyrong
Activiti
在acitivti modeler中,如果是chrome 34,则不能打开该设计器,其他浏览器可以,
经证实为bug,参考
http://forums.activiti.org/content/activiti-modeler-doesnt-work-chrome-v34
修改为,找到
oryx.debug.js
在最头部增加
if (!Document.
- 微信收货地址共享接口-终极解决
laotu5i0
微信开发
最近要接入微信的收货地址共享接口,总是不成功,折腾了好几天,实在没办法网上搜到的帖子也是骂声一片。我把我碰到并解决问题的过程分享出来,希望能给微信的接口文档起到一个辅助作用,让后面进来的开发者能快速的接入,而不需要像我们一样苦逼的浪费好几天,甚至一周的青春。各种羞辱、谩骂的话就不说了,本人还算文明。
如果你能搜到本贴,说明你已经碰到了各种 ed
- 关于人才
netkiller.github.com
工作面试招聘netkiller人才
关于人才
每个月我都会接到许多猎头的电话,有些猎头比较专业,但绝大多数在我看来与猎头二字还是有很大差距的。 与猎头接触多了,自然也了解了他们的工作,包括操作手法,总体上国内的猎头行业还处在初级阶段。
总结就是“盲目推荐,以量取胜”。
目前现状
许多从事人力资源工作的人,根本不懂得怎么找人才。处在人才找不到企业,企业找不到人才的尴尬处境。
企业招聘,通常是需要用人的部门提出招聘条件,由人
- 搭建 CentOS 6 服务器 - 目录
rensanning
centos
(1) 安装CentOS
ISO(desktop/minimal)、Cloud(AWS/阿里云)、Virtualization(VMWare、VirtualBox)
详细内容
(2) Linux常用命令
cd、ls、rm、chmod......
详细内容
(3) 初始环境设置
用户管理、网络设置、安全设置......
详细内容
(4) 常驻服务Daemon
- 【求助】mongoDB无法更新主键
toknowme
mongodb
Query query = new Query(); query.addCriteria(new Criteria("_id").is(o.getId())); &n
- jquery 页面滚动到底部自动加载插件集合
xp9802
jquery
很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容。下面为你推荐 10 个 jQuery 的无限滚动的插件:
1. jQuery ScrollPagination
jQuery ScrollPagination plugin 是一个 jQuery 实现的支持无限滚动加载数据的插件。
2. jQuery Screw
S