- 博客(61)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 写一个简单的下载后预览swiper的页面
2.为其添加a,iframe 标签，遍历数据的时候一一对应。1.获取swiper所有的html文件，3.获取模版数据，最终生成html数据。
2023-04-05 14:30:25
101
原创 element，cascader数据多选，数据处理（返回给后端，回填数据）
数据处理思路：1.先创建必要的函数: 数组打平flat，递归树(deepTree)，模板（temp）2.发送数据：首先把你选择的数据格式， deepTreeData(tree, flat(selectedTree), [‘id’]) 选择的数据格式,3.然后转换成发送的格式， sendSelectedData(tree, flat(selectedTree), [‘id’, ‘name’])4.回填数据：把发送的数据打平， splitArr(sendSelectedData(tree, f
2022-02-24 19:37:45
1696
原创 vue，element，日期控件，动态禁用
效果图：示例代码<template> <div class="date_picker"> <el-date-picker v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :format="'yyyy-MM-dd HH:mm.
2021-11-18 22:01:30
819
原创 js数据处理，数据分组
结果图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti.
2021-11-09 20:39:51
424
原创 防抖和节流
防抖: 高频率执行事件，只执行一次，若是再次触发事件，则重新从最后一次触发事件开始计时（若是一直点击，则会重新计时，直到在时间在规定时间内不执行事件，才会执行结果）节流：高频率执行事件，只执行一次，在规定的时间内，只执行第一次的事件，其他执行事件则无效，直到重新开始执行高频事件（若是一直点击，则是在规定时间间隔内再次执行）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-.
2021-11-07 22:39:41
66
原创 vue,原生轮播图（无缝轮播图）
效果图<template> <div> <div class="swiper"> <ul ref="swiper" class="swipero"> <li v-for="(item, index) in items" :key="index"> <div v-text="item.name"></div> </li> .
2021-11-04 22:56:21
525
1
原创 vue,左右滑动动画
效果图：<template> <div> <div class="swiper"> <ul ref="swiper" class="swipero"> <li v-for="(item, index) in items" :key="index" :class="`${index == active ? 'active' : ''}`" .
2021-11-04 21:36:13
511
原创 css背景(小logo)实现动画效果
图片效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit.
2021-10-30 18:38:07
689
原创 安装nvm后出现，npm可以下载包，但是不能安装
1.安装nvm，可方便在各个node版本(npm)之间的切换2.如果出现安装了nvm，出现这种情况:1.可以下载依赖包，但是安装不成功，（cnpm,yarn等2.或者是自己在node当前版本下直接更新npm到最新的版本，也可能出现此问题3.直接下载当前与当前版本不同的node版本，然后就key进行正常的安装与下载啦...
2021-10-17 17:22:16
221
原创 给数组里面的对象指定位置
效果图：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>文件下载</title></head><body></body><script> let arr = [{ id: 1, name: "玄觞" }, { id.
2021-09-25 18:20:30
276
原创 a标签下载文件
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>文件下载</title></head><body> <div class="wrapper" onclick="download('文件下载')"> 下载文件 </div></body><s
2021-09-22 22:38:38
90
原创 vue2.0,自定义表格排序
效果图：代码：<!-- * @Descripttion: * @version: * @Author: mqq * @Date: 2021-06-12 17:08:27 * @LastEditors: mqq--><template> <div class="echat"> <sortTable :items='items' :sortKeyword.sync='sortKeyword' :direction.sync=".
2021-07-11 22:05:27
407
原创 规则库里面相对应的规则匹配
效果图示例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .
2021-07-01 21:42:47
216
原创 滑动自定义指令
效果图：代码（template）：<template> <div class="scrollAnimation"> <ul v-scroll-height height="3" speed1='1000' speed2='500' isEnd="true" > <li class="list_item" :class="{ bg: index == current }" v-fo.
2021-06-29 22:51:35
116
原创 vue 字符串的拼接与解析
效果图：示例代码：<!-- * @Descripttion: * @version: * @Author: mqq * @Date: 2020-11-01 17:38:49 * @LastEditors: mqq--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Co.
2021-06-20 22:48:25
1078
2
原创 vue，表单 动态添加信息项
效果图：代码示例：<template> <div class="eventInfo"> <div class="header"> <div class="header_top"> <span>{{ title }}</span> <span class="close" @click="close()"&.
2021-06-13 10:53:58
219
原创 vue 表格里面的复选框，全选，单选
效果图：main.js:<template> <div> <div class="table"> <table border="1" cellspacing="0"> <thead> <tr> <th> <el-checkbox :value="isAllChec.
2021-06-09 22:35:37
2183
1
原创 vue，大段落文本，里面特殊字符，特殊样式显示
效果图:代码<template> <div> <div v-html="showContentStyle(content)"></div> </div></template><script>export default { components: { changeTab, }, data() { return { searchWord: "浙江".
2021-06-01 21:12:10
1733
原创 根据值，获取对应的状态，（vue表格里面的状态）
效果：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit.
2021-05-31 20:54:38
308
原创 点击出现文字效果
代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> &l.
2021-05-25 21:35:33
127
原创 数组 / 对象 排序(可获取最大/最小值，排序后的数组)，是否改变原有数组
结果图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
2021-05-25 19:41:38
95
原创 原生--无缝轮播图
效果图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti.
2021-05-24 20:47:06
58
原创 vue3.0--自定义指令--表格--默认显示3行，可设置几行，其余行滚动显示（版本二）
效果图：main.vue<template> <label for="切换"> 'null'，全部显示，切换数大于当前数，显示全部，总共： {{ list.length }}条数据：<br /> 当前显示到 <input type="text" name="" id="" v-model="line" @input="change" />行 </label> <div v-autoH.
2021-05-24 19:43:04
684
原创 vue3.0--自定义指令--表格--默认显示5行，其余行滚动显示（版本一）
templete<template> <div v-autoHeight="6" ref="height" class="table"> <table> <thead> <tr> <th>序号</th> <th>标题</th> </tr> </thead> .
2021-05-13 20:52:45
566
原创 兼容ie8的轮播图
JS插件：http://www.superslide2.com/param.html效果图：示例代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-e.
2021-05-12 22:22:07
345
原创 echarts钟表盘
效果图：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .
2021-05-10 20:15:57
159
原创 echarts环形图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
2021-05-10 19:40:36
220
原创 标题--分页器--上下页的swiper案例
版本号：Swiper 3.4.2<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Swiper中文网基础演示(www.swiper.com.cn)</title> <link rel="stylesheet" href="./css/swiper.min.
2021-05-09 17:53:47
345
原创 动态加载——区域（文字和图片）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>..
2021-04-20 22:21:55
66
原创 数组按照规定的长度，分段截取
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
2021-04-18 21:55:43
366
空空如也
用php循环，怎么用 js 获取动态的 id ？
2020-03-05
TA创建的收藏夹 TA关注的收藏夹
TA关注的人