- 博客(58)
- 收藏
- 关注
RSS订阅
原创 解决ElementUI表格el-table-column添加fixed底部被遮挡的方法汇总
解决ElementUI表格el-table-column添加fixed底部被遮挡的方法汇总
2022-08-23 16:42:24
6519
4
原创 html+css+js轮播图：手动轮播，自动轮播
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><!-- <script type="text/javascript" src="demo.js"></script> --></head><style type="text/css"> *{ margin: 0; paddin
2020-06-19 16:57:26
23263
14
原创 element-plus has no exported member named ‘FormInstance‘模块， element-plus没有导出的成员FormInstance
element-plus has no exported member named 'FormInstance'模块， element-plus没有导出的成员FormInstance。
2023-06-15 16:23:40
1083
原创 vue3按需导入element-plus后使用ElMessage报错或样式丢失
vue3按需导入element-plus后使用ElMessage报错或样式丢失
2023-05-18 17:19:44
3238
原创 vue3按需导入element-plus报错Module not found: Error: Can‘t resolve ‘element-plus/es/components/button/
Module not found: Error: Can't resolve 'element-plus/es/components/button/style/css'
2023-05-16 15:28:23
3121
原创 js利用vue数据监听原理Object.defineProperty实现语音播放监听
利用vue数据监听原理Object.defineProperty实现语音播放监听
2023-02-28 16:25:15
870
原创 vuex报错Computed property “xxx“ was assigned to but it has no setter.
Computed property "activeTab" was assigned to but it has no setter.
2023-02-02 16:17:39
1680
原创 前端在请求数据时使用节流来防止多个重复请求
页面加载时，遇到大量的数据需要显示，常常使用上拉加载更多数据，从而实现数据的批量显示。每次上拉的时候，浏览器应该发送一次请求，获取最新的数据。
2022-08-15 17:04:14
1374
原创 Vant UI的Sidebar侧边导航组件单独设置滚动条
需要实现的效果是：左侧导航栏有单独的滚动条，右侧主体内容也有单独的滚动条，互不干涉。
2022-07-05 10:51:39
6354
5
原创 vue 解决代码上线后，刷新页面时静态资源文件会重复添加路径的问题
一开始的vue.config.jsmodule.exports = { devServer: { port: 8090 }, publicPath: './static/' // 解决打包之后静态文件路径404的问题}刷新当前页面：查看请求可以看到，静态资源文件重复添加了static目录原因：vue.config.js写的是相对路径解决方法：改为绝对路径...
2022-04-01 10:34:42
1539
原创 vue实现父组件点击全选按钮，子组件的checkbox全部选中
原理：（1）父子组件通信：props（2）新定义一个数组b，数组b的每一项值item等于v-for的list的每一项值，让checkbox的value等于item，v-model绑定数组b <!--父组件--> <ul class="trstyle"> <li class="tdwidth1"> <label class="checklabel" style="vertical-align: sub;
2022-02-26 14:43:53
1044
2
原创 JTopo在vue中双击图片弹出编辑框
JTopo官网有一个编辑框案例：jTopo Demo编辑框写的位置如下：（此处我换成我需要的input元素，而非源码中的textarea）<template id="template-mesh_topology"> <div> <div class="advanceContent"> <canvas width="600" height="800" id="canvas"
2021-11-22 16:35:04
696
原创 vue搭建一个简单的项目流程
1. 安装npm、cnpm、vue安装教程2. 创建项目vue create 项目名称如：vue create static根据需求选择相应的配置3. 生成的目录4. 运行项目cd staticnpm run serve在浏览器输入给定的网址即可：5. 根据目录结构进行开发I - src 存储我们项目开发的源文件| - main.js 打包编译的入口文件| - App.vue 项目页面的入口文件（可以自己命......
2021-10-29 09:50:51
434
原创 css实现奥运五环（立体）
看上面的图，五个环是互相穿过，有遮挡的立体图案，不是直接平铺的。主要思路：每个可见环都是两个环（本身环+伪元素环）重叠显示的，把伪元素环的z-index设置为1，使伪元素环浮在本身环的上面。然后把伪元素环某个方向的border-color设置为透明色transparent，使其透明，另一个可见环的颜色就会显示出来，从而实现被遮挡的效果。<!doctype html><html lang="en"><head> <meta charset...
2021-08-16 14:05:24
598
原创 flex布局练习
题目来源题1：整体框架示例使用Flex模型编写HTML页面代码：<!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, initi
2021-07-25 19:19:50
631
原创 vue中使用canvas工具，如jTopo，要把画图的代码执行放到mounted下
vue调用jtopo-min.js时报错：Cannot read property ‘length’ of undefined at c.add (jtopo-min.js:1)错误原因：把画图的代码放到created下面执行了，此时DOM结构还没有形成，所以报错。正确做法：放到mounted下执行。...
2021-06-23 14:23:23
352
2
原创 vue 如何用v-model绑定数组对象中的未提前定义的属性
原本的代码：html：<ul class="advance-ul" v-for="(item,index) in terminal_list"> <li class="trText">{{item.ip}}</li> <li class="trText"> <input type="text" v-model="item.enable"/> </li></ul>js中的data里的表的定义：ter
2021-06-09 15:04:32
4077
原创 table利用colspan实现跨行，table td实现跨半行
想只用一个table实现这样一个表格：可以看到第二行和第三行的列数是不一样的，通过定义第二行和第三行width是没有用的，会影响第一行的排版。可以用colspan实现跨行。比如我设置第二行的第二列是它对应的上一行的跨三行：代码如下：<table style="width: 100%;letter-spacing: 0.5px;"> <thead> <tr class="trStyle2"> <th cla
2021-06-02 11:16:41
2636
原创 webpack使用：通过html打包引入css和js文件
之前写了一个简单工程的打包：打包一个简单的工程现在在这个基础上调整一下文件的结构，加入css后一起打包。之前的文件结构：现在把index.html放入src中，并把js文件放入js文件夹，css文件放入css文件夹，然后打包整个src文件。common.css* { margin: 0; padding: 0; border: none;}body { background: lightblue;}index.css@import './comm
2021-05-22 22:44:21
5482
1
原创 webpack安装最新版本解决webpack-dev-server兼容性的方法
webpack安装最新版本解决webpack-dev-server兼容性的方法：把package.json文件中的"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server" },改成："scripts": { "test": "echo \"Error: no test specified\" && exit
2021-05-17 14:42:49
1503
1
原创 webpack本地安装和使用：实现一个简单的工程的打包
一、安装1.创建一个工程文件夹，内容暂时为空2. 进入文件夹并执行命令npm init -y3. 本地安装 webpack，安装最新版本npm install --save-dev webpack4. 如果使用 webpack 4+ 版本，还需要安装 cli，webpack-cli 可以帮助我们在命令行里使用npx，webpack等相关指令。npm install --save-dev webpack-clinpx webpack -v // 检测webpack是否安装成功
2021-05-16 17:20:32
1252
3
原创 Vue中使用v-slot无效
使用v-slot不生效的情况：可能是引入的vue.js源码不是最新的。如下代码：<body> <div id="app"> <my-button> <template v-slot:before> <em>我是组件中间的内容：slot</em> </template> <!-- #是v-s
2021-04-28 16:22:09
6320
原创 Vue三种方式实现全选全不选：@click点击事件方式、computed计算属性方式和watch监听器方式
@click点击事件方式：全选按钮添加点击事件checkAll，点击全选按钮时改变选项的点击状态。下面的选项按钮用一个div包裹，并添加change事件来监听是否全选。注：click事件是点击之后，视图里的数据还没有更新到data数据里，所以导致data数据不是最新的状态，需要取反。change事件是视图绑定的数据发生了改变，才会去执行。<!DOCTYPE html><html lang="en"><head> <meta charset="U.
2021-04-26 14:20:50
2007
1
原创 Vue中的单选框、复选框和选择框的使用；click和change的区别
单选框和复选框按照v-model进行分组，单选框的数据是一个值，复选框是一个数组。每一个框都有自己的value值，被选中的元素的value值就是对应的v-model绑定的值。<!-- 单选框 --><input type="radio" value="0" v-model="sex">男<input type="radio" value="1" v-model="sex">女<button @click="submit">提交</butt
2021-04-23 17:35:46
6876
原创 js利用web-worker开一个新线程计算大文件的MD5值，不影响主线程的代码运行
在写上传文件这个功能的时候，需要得到文件的MD5值。小文件（100M以内）的MD5值可以1秒内算出，但是大文件会比较耗时间，比如计算一个500M的文件需要10S左右。我先选择文件1（500M）上传，正在计算MD5值，我又选择一个文件2上传，会打断文件1的MD5计算，这样显然是不行的。所以，需要开一个子线程来计算MD5值，且不影响主线程。MD5的计算：基于spark切片。注：用到worker需要用服务器方式打开：（vscode）HTML代码：<!DOCTYPE html><
2021-04-09 17:39:21
2033
原创 ajax返回200OK却调用error函数（response为空需要指定dataType）
在使用ajax上传文件的时候，出现了上传成功，返回了200OK却调用error函数的情况：$.ajax({ type: "POST", url: "/rpc/upload", //接口 data: file_data, cache: false, processData: false, contentType: false, //必须false才会自动加上正确的Content-Type xhr: function () { var x
2021-03-24 18:00:11
534
原创 js函数内部return一个函数，自动调用toString方法
学习闭包的时候，发现这么一段代码：function add(m) { var tmp = function (n) { return add(m+n); }; tmp.toString = function () { return m; }; return tmp;}console.log(add(1)(2));刚开始看的时候，不明白为什么要改写toString方法，查了一些资料，都没有直观地讲是怎么回事，后来自己测试，终于想
2021-02-25 18:17:27
1499
3
原创 js中的switch case语句，case指定多个条件时的写法
let a = 1;switch(a){ case 1 || 0: console.log("aaa"); break; default: console.log("else");}输出的结果为：aaa当把a的值改为0的时候，想要的结果是aaa，但是结果却为：else，什么原因呢？在js中，case后面的语句是一个整体的表达式，不能拆分开，就是说这里的case 1 || 0其实相当于case (1 || 0)。（1 || 0）的值为1，当
2021-02-19 11:10:00
30626
原创 js中不同数据类型之间的比较规则
数据类型之间的比较规则：{} == {} ：两个对象进行比较，比较的是堆内存的地址null == undefined => true;null===undefined => falseNaN == NaN => false ： NaN和谁都不相等对象和字符串进行比较，是把对象toString()转换为字符串后再比较剩余的所有数据类型不一样的情况：都是先转换为数字（1）对象转数字：先转换为字符串，再转换为数字（2）字符串转换为数字：只要出现非数字字符，结果就是NaN（3
2021-02-19 09:57:31
753
原创 图解JS盒子模型的基本属性：clientWidth/Height、offsetWidth/Height、offsetTop/Left、scrollWidth/Height、scrollTop/Left
写一个JS盒子 <style> .container { width: 300px; height: 300px; border: 3px solid red; margin: 50px; position: relative; } .box { padding: 30px; width: 100px; height: 150px;
2021-01-22 16:42:20
251
原创 js简单实现鼠标拖拽功能：盒子可以跟着鼠标移动位置
实现的原理：根据上面的图可以算出移动后的盒子的left和top：鼠标距离边界的值：ev.pageY - box.topev.pageX - box.leftbox2.top = ev2.pageY - (ev1.pageY - box1.top)= ev2.pageY - ev1.pageY + box1.topbox2.left = ev2.pageX - (ev1.pageX - box1.left)= ev2.pageX - ev1.pageX + box1.left代码如下：&
2021-01-20 14:26:16
2022
原创 JS实现选项卡插件的两种写法：jQuery和class
实现插件的几个注意点：（1）定义一个固定的html结构，比如选项卡的标题的标签为为li，每个选项卡的内容的标签为div等等；（2）选中时的样式提前确定；（3）最好先用简单的JS实现选项卡的功能，再改为插件的模式。html结构如下： <style> * { margin: 0; padding: 0; } ul { list-style: none; } #tabBox { box-sizing: border-box; margin
2020-12-29 11:21:52
229
原创 JS+jQuery实现渐隐渐现轮播图：模拟服务器获取图片数据
我前面写过简易版轮播图：简易轮播图也写过无缝连接的轮播图：无缝连接轮播图现在是实现渐隐渐现的轮播图，它与前面两个轮播图的区别是：不是左右滑动，而是所有的图片重叠，单张渐隐渐现。利用的是CSS中的z-index和opacity两个属性，需要显示的图片的z-index和opcacity都为1，其余图片的z-index和opcacity都为0。html部分：index.html<!DOCTYPE html><html><head> <meta charse
2020-12-25 16:30:07
201
1
原创 用JS+JQuery实现无缝连接的轮播图：自动轮播，手动轮播
我之前写过一个简易版的自动+手动轮播图：简易轮播图但是这个轮播图在切换的时候是没有实现无缝滚动的，每张图片都是单张切换的，而不是滑动。现在用JQuery实现无缝连接的轮播图。轮播图的原理如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>无缝轮播图</title></head><style type="text/cs
2020-12-25 10:44:43
1159
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人