- 博客(19)
- 收藏
- 关注
RSS订阅原创 el-table表格处理自定义添加行的展开
对每一条数据增加一个唯一值，这里使用到uuid解决。当然uuid不会在后端保存，所以如果数据回填展示也用了这个组件，name在请求到的数据上需要提前加上该字段。通常使用el-table的展开行属性比较简单，从官网拿来就可以用，实现方式通过row-key绑定一条数据的唯一值，如id之类。expand-row-keys绑定一个数组，数组中值对应这一行的key，所以这一行对应的会展开。比如点击按钮新增一行，那么这些新增的空数据没有唯一值怎么样去控制。中间根据相关操作插入移除即可实现展开与收缩。
2023-08-22 17:11:03
504
1
原创 css3实现自定义checkbox样式（仿elementui）
<label class="zdy-label-checkbox "> <input type="checkbox" /> <div class="show-box"></div></label>/* 伪元素法 的checkbox*/label.zdy-label-checkbox { position: relative; margin-top: 5p
2021-08-12 15:53:04
316
原创 bootstrap模态框使用
bootstrap4模态框是一款十分好用的弹窗，唯一的缺憾就是弹框不能拖动改变尺寸大小。今天记录一些基于b4模态框拓展使用的一些问题。目标，使弹框可以拖动，且不影响原网页操作，如点击，输入等。第一步：为模态框添加拖拽功能： $(document).on("show.bs.modal", ".modal", function() { $(this).draggable({ cursor: 'move',//光标 }); $(this).cs
2021-03-10 14:14:50
261
原创 jq截取字符串，限制字数长度
用jq操作，substr截取内容前多少位，主要用到each遍历了字符串。 <h2 class="h2_changdu">您好，今天是二零二一年二月二日，天气晴朗，祝您一天都有好心情</h2> <script src="./css/jquery-3.5.1.min.js"></script> <script> $(function () { $('.h2_changdu').each(fun
2021-02-02 19:17:36
375
原创 vue基础语法之v-on，v-bind，v-for
使用vue语法实现对列表项点击，列表文字变色。<!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"
2021-01-17 23:00:37
94
原创 jq获取滚动距离，窗口的大小数值等
关于浏览器窗口的位置scrollTop获取，设置滚动条距离顶部的高度，resize拖动窗口大小，offset取到距离顶，左边的距离<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
2020-12-16 13:34:31
575
原创 echarts实现响应移动端
今天开发中遇到需要对echarts图表操作，根据页面尺寸大小改变图表的尺寸。实现方式很简单。代码示例：<head> <meta charset="UTF-8"> <title>event demo</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" hre
2020-12-15 17:43:58
2250
原创 发博客/回复消息（添加删除节点）
发博客/回复消息（添加删除节点）消息包括标题，内容，回复的时间。功能包括验证表单内容是否为空，发布后清空输入框<body> <div> <span>标题：</span> <input type="text" id="biaoti" style="border: 1px solid #ccc;"> </div> <div> <span>内容：</sp
2020-12-10 16:14:10
63
原创 canvas使用方法（canvas基础）
canvas绘制线路图css：<canvas id="myCanvas" width="900px" height="400px" style="border: 1px dotted black; float: left;"> 您的浏览器不支持canvas标签。 </canvas><script type="text/javascript"> //获取Canvas对象(画布) var canv
2020-12-09 17:53:44
295
原创 jq随机加载背景图
刷新页面随机加载图片 <style> body{ padding:0; background-attachment: fixed; background-clip: border-box; background-color: #666666; back
2020-12-09 17:46:21
194
原创 无限滚动轮播
jq实现无限滚动的轮播图css：div { width: 600px; height: 161px; border: 1px solid #333; margin: 100px auto; overflow: hidden; } ul { list-style: none; width:
2020-11-29 20:34:22
186
原创 右下角弹窗广告
利用slideDown（）fadeIn（）fadeOut（）方法实现右下角弹窗效果<body> <div style="display: none; width: 300px; right: 0; bottom: 0; height: 200px; background-color: bisque; position: absolute;"> <span style="position: absolute;right: 10px;top: 10px;"
2020-11-25 22:29:46
168
原创 jQuery中stop方法停止动画排队效果
css：<style> .nav { margin: 0 auto; } .nav>li { list-style: none; float: left; width: 50px; } .nav>li a { border: 1px solid li
2020-11-24 23:41:54
183
原创 实现一个基本菜单栏（包含二级菜单）
利用jq实现菜单下滑上拉css：<style> ul>li { border: 1px solid #333; width: 200px; /* height: 50px; */ line-height: 50px; } ul>li span { padding-left: 15px;
2020-11-24 23:19:08
374
原创 实时获取输入框中剩余可输入字数方法
利用jq实现在文本框中限制用户输入字数，并给出提示（即监听用户输入的字数，更新在页面中）html： <h3> <center> 实时计算用户输入字数 </center> </h3> <div class='textarea-wrapper'> <div class='textarea-block'> <
2020-11-23 21:59:20
363
原创 获取本地时间输出年月日方法
通过js（原生）获取本地时间：html：<div style="width: 200px;height: 200px;border:1px solid #ccc"> </div> <button id="btn">获取本地时间</button>js：function getTime() { var t = new Date(); var y = t.getFullYear(); var
2020-11-23 21:41:04
308
原创 关于判断文本框内容是否为空的方法
利用jQuery判断输入框是否有内容思想：利用函数获取到按钮，在按钮点击时，对输入框进行判断长度。代码如下：<input type="text" id="input"> <button id="btn">发送</button> <script src="./js/jquery-2.1.4.min.js"></script> <script> $('#btn').click(function()
2020-11-22 22:27:57
1763
原创 通过select下拉框切换内容
点击select实现不同盒子显示与隐藏（常用js与jequery方法）通过select下拉菜单，实现切换盒子中的显示内容<select name="" id="" onclick="select_event(this.options[this.selectedIndex].value);"> <option value="mapselect" selected>地图</option> <option value="listsele
2020-11-15 19:02:32
2399
原创 通过点击按钮切换内容
标题 点击按钮切换显示不同盒子（常用js与jequery方法）记录第一次我的bolg <button id="btn1">图状</button> <button id="btn2">列表</button> <div class="div1" style="width: 50px;height: 50px;background-color: #CCC; display: block;"> 图
2020-11-15 18:52:10
862
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人