自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(19)
  • 收藏
  • 关注

原创 el-table表格处理自定义添加行的展开

对每一条数据增加一个唯一值,这里使用到uuid解决。当然uuid不会在后端保存,所以如果数据回填展示也用了这个组件,name在请求到的数据上需要提前加上该字段。通常使用el-table的展开行属性比较简单,从官网拿来就可以用,实现方式通过row-key绑定一条数据的唯一值,如id之类。expand-row-keys绑定一个数组,数组中值对应这一行的key,所以这一行对应的会展开。比如点击按钮新增一行,那么这些新增的空数据没有唯一值怎么样去控制。中间根据相关操作插入移除即可实现展开与收缩。

2023-08-22 17:11:03 497 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 260

原创 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 2248

原创 发博客/回复消息(添加删除节点)

发博客/回复消息(添加删除节点)消息包括标题,内容,回复的时间。功能包括验证表单内容是否为空,发布后清空输入框<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 293

原创 jq随机加载背景图

刷新页面随机加载图片 <style> body{ padding:0; background-attachment: fixed; background-clip: border-box; background-color: #666666; back

2020-12-09 17:46:21 193

原创 无限滚动轮播

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 2396

原创 通过点击按钮切换内容

标题 点击按钮切换显示不同盒子(常用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 860

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除