- 博客(53)
- 收藏
- 关注
原创 i18n在VUE3中使用插槽动态传入组件
在vue3中需要用i18n-t标签,keypath为i18n值的路径,<template #name>里面就可以放我们想要的组件。i18n支持传入变量标识可以做变更文字显示,但如果要让这个变量显示组件的话需要用到插槽。语言包文件夹locales/lang/zhCn.ts。i18n已全局引入,无需再引入i18n-t。如何配置全局i18n。
2024-04-24 14:26:06
897
1
原创 Ant-design中表单多级对象做嵌套表单校验
在 useForm中拿到一个validateInfos,并传入formData和rules,在FormItem中绑定name名。
2024-04-24 10:29:00
880
原创 element日历插件获取显示的第一天和最后一天
这个日历插件右上角的按钮上个月下个月事件,切换后默认是那月1号,传入这个时间就可以重新获得切换后的月份的时间范围,用v-model绑定切换后的数据。已知星期排版是固定的,第一天是星期天,最后一天是星期六。通过当月1号和最后一天再往前推算需要展示上个月几天,和下个月几天。需求是要传入当前显示的第一天和最后一天来获取范围,再判断某个日期是否有内容标记。watch监听变动来做事件。
2023-09-22 11:10:05
2027
2
原创 vue使用websocket
在登录和退出的时候进行websocket进行建立连接和关闭连接。建立websocket.js。在需要用到websocket使用。
2023-08-21 11:24:05
901
原创 css中offset应用动效
用svg算出圆形path("M${width},${width/2}m-0,0a-${width/2},-${width/2}01,0-${width},0a${width/2},${width/2}01,0${width},0")如图所示,圆圈绕着转圈,本来可以用相对定位,但奈何要做成圆圈数量不固定,那就意味位置不能固定,需要计算。由于轨迹是个圆圈,紧贴着圆圈偏移,小圆整个模块会旋转,所以需要额外加transform转正。width为绕圈的宽度。...
2022-07-20 17:43:47
886
原创 解决npm发布文件过大的问题
npm发布文件过大在package.json里配置需要上传到远程仓库的文件即可 "files": [ "dist" ]
2022-03-23 13:51:21
2320
原创 npm run build 报错
map-plugin@1.1.6 build D:\test\map-plugin> cross-env NODE_ENV=production webpack --display-error-details --config webpack.config.js'cross-env' ▒▒▒▒▒ڲ▒▒▒▒ⲿ▒▒▒Ҳ▒▒▒ǿ▒▒▒▒еij▒▒▒▒▒▒▒▒▒▒▒▒ļ▒▒▒npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! map-plugin..
2022-01-12 14:07:06
956
原创 使用requestAnimationFrame分页渲染
使用requestAnimationFrame代替setTimeout,减少了重排的次数,极大提高了性能。 renderList(list) { let renderTreeData = []; const total = list.length; const page = 0; const limit = 100; const totalPage = Math.ceil(total / limit); const rende
2021-12-29 14:35:25
673
原创 element表格多行合计
<el-table :data="tableData" border row-key="id" default-expand-all show-summary :summary-method="getSummaries" :tree-props="{ children: 'children' }" > .
2021-06-25 16:22:38
3799
2
原创 开启一个本地服务
第一种方式1.安装Debugger for Chrome插件2.使用ctrl+`快捷键打开终端,然后输入npm install -g live-server3.在命令行里输入 live-server即可第二种方式在写前端页面中,经常会在浏览器运行HTML页面,从本地文件夹中直接打开的一般都是file协议,当代码中存在http或https的链接时,HTML页面就无法正常打开,为了解决这种情况,需要在在本地开启一个本地的服务器。 本文是利用node.js中的http-server,开..
2021-06-25 10:16:51
1358
原创 作用域
作用域是可访问变量,对象,函数的集合。(即某些特定部分中变量,函数和对象的可访问性。)作用域最大的用处就是隔离变量,不同作用域下同名变量不会有冲突,不会被外泄和暴露,不会污染到外面,不会对其他的库或者JS脚本造成影响变量生命周期:局部变量在函数执行完毕后销毁。全局变量在页面关闭后销毁。局部作用域:在函数内声明var name="global";if(true){ var name="local"; console.log(name)...
2021-05-15 22:54:15
244
async-validator笔记
官网的示例methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; }
2021-01-06 11:11:51
1506
原创 umy-ui虚拟表格中的表单验证
首先,umy版本需要更新到最新版,目前是1.1.4。html模块:ux-grid表格头部增加rule,:rules="rules"和自动聚焦:validConfig="{autoPos:true}";ux-table-column增加自动聚焦:edit-render="{autofocus:'.el-input__inner'}";<ux-grid border show-overflow ref="plxTable" keep-source ..
2020-11-26 09:50:30
2301
1
原创 vue清除定时器
const timer = setInterval(() =>{ // 某些定时器操作 }, 500); // 通过$once来监听定时器,在beforeDestroy钩子可以被清除。this.$once('hook:beforeDestroy', () => { clearInterval(timer); .
2020-11-20 10:10:15
201
原创 JS十六进制颜色转换RGBA
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>..
2020-06-18 10:22:04
2428
原创 VUE里的rules验证方法调用this数据
rules在data里不能调用本页自己创建的数据或事件,但可以获取到页面全局带$的数据rules:{identifiercode:[{required:this.$route.params.type!='details',message:'服务资源标识符为必填项!',trigger:'blur'}], verson:[{required:this.$route.params.type!='details',message:'请输入版本号',tri...
2020-05-25 16:43:31
3120
原创 Flex左右布局,高度相等自适应
css://body高度要撑开html,body{ min-height: 100%; height: 100vh;}//父级.box-fix{ min-height: 100%; display: flex; justify-content: space-between;}子级.main-left{ width: 210px; flex: 0 0 ...
2020-03-20 14:37:32
15575
原创 vue中全局绑定一个键盘事件
全局绑定一个事件:export default { install(Vue, options) { //全局回车键搜索 Vue.prototype.keyEnter = function (vm,functionname,type) { document.onkeydown = function(e) { ...
2019-09-29 14:23:03
1684
原创 ES2019的新内容
Array.flat()递归地将嵌套数组展平到指定的深度。默认值为1const arr1 = [1, 2, [3, 4]];arr1.flat(); // [1, 2, 3, 4]const arr2 = [1, 2, [3, 4, [5, 6]]];arr2.flat(2); // [1, 2, 3, 4, 5, 6]//全深度使用const arr3 = [1, 2, [...
2019-08-09 17:30:29
447
原创 html中video在全屏时再打开声音
//全屏打开声音 $(window).on('resize',function(e){ var explorer = window.navigator.userAgent.toLowerCase(); if(explorer.indexOf('chrome')&...
2019-08-02 13:46:10
1691
原创 ivew的render中select数据绑定
render:(h,param)=>{ return h('Select', { props:{ value: this.formItem.RegistTemplate, }, on: { 'on-change':(event) => { ...
2019-03-13 10:44:28
613
原创 js实现document.ready
(function () { var ie = !!(window.attachEvent && !window.opera); var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525); var fn = []; var run = function (...
2019-02-15 11:06:19
3079
原创 js批量删除微博教程
第一步也是最关键的一步,先搜索出所有带关键字的微博,不然的话就是全部微博删除了,慎重!第二步:右击选择审查元素(mac是检查)或者F12,调出后台工具,点击console,将以下代码复制进去,直接回车即可。 如果有下一页可的话需要重复一下第二步再粘贴一遍到console重新启动一下。源码如下: var s = document.createElement('scri...
2019-01-03 17:37:33
2898
1
原创 动态修改echarts的容器大小
document.getElementById('main').style.height = height+'px'sideBarChart.resize();//直接加这句即可sideBarChart.setOption(sideBarOption,true);
2018-08-06 11:38:42
10247
6
原创 js微博自动转发——小笼包专用教程贴
1、打开要转发的微博的页面,右击空白处找到“审查元素”或者“检查”调出控制台;选择network;2、当前页正常转发一次,会得到一个forward文件,单击打开,选择header复制url、mid、location、pdetall这四个数据到一边3、点击console,将以下源码放到空白处,将以下四个数据改成刚才复制的你的id信息更改引号里转发内容为要转发的文...
2018-08-02 11:18:48
7061
9
原创 js判断字符串出现最多的字符,并统计次数
function countStr(str){ var obj = {}; for(var i = 0, l = str.length,k; i < l ;i++){ k = str.charAt(i); if(obj[k]){ obj[k]++; }el...
2018-07-25 15:17:15
1386
原创 随机产生颜色
function randomVal(val){ return Math.floor(Math.random()*(val + 1)); } function randomColor(){ return 'rgb(' + randomVal(255) + ',' + randomVal(255) + ',' + randomVal(255...
2018-07-25 14:39:18
1516
原创 适用pc和wap的阻止遮罩层背景滚动
var bodyEl = document.bodyvar top = 0function stopBodyScroll (isFixed) { if (isFixed) { top = window.scrollY bodyEl.style.position = 'fixed' bodyEl.style.top = -top + 'px' } else ...
2018-07-23 11:49:49
380
原创 jq创建当前时间的前半年日期
var oyear = o.getFullYear();var omonth = o.getMonth()+1;var oday = o.getDate();var date = []setTimeout(function(){ //判断半年前是否今年 //不是今年 if (year!=oyear) { monthFn(oyear,omonth,oday) for (var ...
2018-06-29 15:36:58
1179
原创 margin-bottom在safari浏览器失效的问题
今天遇到一个bug是底部明明有margin-bottom却无法作用,排查了一下改成用padding可以有效但不找出原因是无法完成这篇博客的问题概要描述:在safari中,当内容高度超出所有父容器时,内容的margin-bottom设置是无效的。解决这个问题的办法也很简单,只要规避这种超出所有父容器的内容即可。父容器不设置高度即可。另外尽量少用html, body {height: 100%;}这种...
2018-03-28 11:01:42
3224
1
原创 用reduce()找出字符串最长不重复片段
function lengthOfLongestSubstring(s) { const map = {}; var left = 0; return s.split('').reduce((max, v, i) => { left = map[v] >= left ? map[v] + 1 : left; map[v] = i;
2018-01-17 14:36:09
315
1
转载 移动端浮层内滚动窗体不滚动的JS处理
var elButton = $('#button'), elButtonWith = $('#buttonWith');var elAside = $('#aside');elButton.on('click', function () { elAside.addClass('active'); $('html').addClass('noscroll');});elButtonWi
2018-01-08 13:32:33
534
转载 vue表单验证组件 v-verify-plugin
vue表单验证组件 v-verify-pluginverifygithub:https://github.com/liuyinglong/verifynpm:https://www.npmjs.com/package/vue-verify-plugininstallnpm install vue-verify-pluginusehtml
2018-01-05 09:02:28
1204
转载 详解head头标签元素的意义以及使用场景
HTML头部分的标签、元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代,head 头部结构,移动端的 meta 元素,显得更为重要。了解每个标签的意义,写出满足自己需求的 head 头标签,是本文的目的。本篇以一丝的文章为基础,进行扩展总结介绍常用的 head 中各个标签、元素的意义以及使用
2018-01-04 10:08:25
284
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人