- 博客(52)
- 收藏
- 关注
RSS订阅原创 el-table表头与内容错位
问题图解：亲测都有效解决方法一：在app.vue或index.html中添加如下cssbody .el-table th.gutter{display: table-cell!important;}解决方法二：在el-table加载数据时this.$nextTick(() => { this.$refs.mainTable.doLayout();});...
2021-10-23 14:22:40
1113
原创 vue+three.js+glb模型
运行结果完整代码，复制到页面可用<!--THREEJS组件--><template> <div id="d3Container" v-loading="loading" ref="mainContent"> </div></template><script> import * as THREE from 'three' import {OrbitControls} from 'three/examples/
2021-08-30 14:51:04
3279
2
原创 向上滚动广告实现
代码<template> <!-- 无缝滚动效果 --> <div class="marquee-wrap"> <ul class="marquee-list" :class="{'animate-up': animateUp}"> <li v-for="(item, index) in listData" :key="index">{{item}}</li> </ul> &l.
2021-01-11 14:30:04
299
原创 el-table实现单选
.vue<el-table ref="table" :data="tableData" height="100%" border stripe @selection-change="handleSelectionChange" @select="dialogCheck"
2020-12-09 15:43:43
12098
10
原创 vscode里突然.vue文件代码没有高亮
如果一开始就没有高亮颜色代码：安装Vetur即可如果一开始代码有高亮颜色，突然没有的情况下== 这时候就安装有高亮颜色代码的那个时间段的版本即可恢复 ==
2020-11-17 15:29:07
11132
4
原创 vue项目不同分辨率自适应方法
（优先）方法一：https://www.cnblogs.com/maggieq8324/p/12099271.html方法二：https://www.jianshu.com/p/a7c4ff4ed14c?utm_campaign=haruki
2020-11-16 10:56:21
5233
原创 table表格固定thead，tbody可滑动
效果图：html: <table width="80%" border="1"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>出生年月</th> <th>手机号码</th&g
2020-11-12 13:50:15
1276
原创 Element+Vue实现table单选
html:<el-table class="tb" ref="multipleTable" :data="productlist" @select="select" @selection-change="handle_selectionChange" :header-cell-style="{background:'#F4F4F4'}" border > <el-table-column typ
2020-11-11 10:32:15
1091
1
原创 el-date-picker设置默认后无法回显
vue :js: methods: { changeTime(e){ console.log(e) this.$forceUpdate() // 输入名称时手动更新视图 this.formData.yearMonth = e }, // 设置默认当前月 defultTime(){ var myDate = new Date(); var tYear = myDate.getFullYear(); var tMonth = myDate.get
2020-10-12 11:06:12
1289
2
原创 create-react-app创建项目失败的解决方法总结（全）
create-react-app创建项目失败的解决方法前提：必须管理员身份来运行cmd才可创建项目问题1：目录不完整，缺少src文件问题2：需卸载yarn问题3.npm或node版本过低前提：必须管理员身份来运行cmd才可创建项目问题1：目录不完整，缺少src文件解决：原因：create-react-app版本低，请安装最新版本卸载：npm uninstall -g create-react-app安装：npm install -g create-react-app问题2：需卸载yarn
2020-09-30 11:18:29
8692
1
原创 图片压缩——封装工具类(亲测一定有效)
创建compressImage.js/** *** 压缩图片 * * 注意可能出现压缩后比原图更大的情况，在调用的地方自己判断大小并决定上传压缩前或压缩后的图到服务器。 */export function compressImage (file, config) { let fileName = file.name const read = new FileReader() read.readAsDataURL(file) return new Promise(function (r
2020-07-14 11:25:41
334
原创 vue——图片懒加载和禁止图片使用缓存方法
图片预加载：图片预加载就是在网页全部加载之前提前加载图片。当用户需要查看时可直接从本地缓存中渲染，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白。当然这种做法实际上降低服务器的性能换取了更好的用户体验。图片懒加载（缓载）：延迟加载图片或符合某些条件时才加载某些图片。这样做的好处是减少不必要的访问数据库或延迟访问数据库的次数，因为每次访问数据库都是比较耗时的即只有真正使用该对象的数据时才会创建。懒加载的主要目的是作为服务器
2020-07-13 16:29:54
3795
原创 浅谈防抖与节流
用一句话总结防抖和节流的区别：防抖：是将多次执行变为最后一次执行，节流：是将多次执行变为每隔一段时间执行1.函数防抖（debounce）思路：在第一次触发事件的时候，不是立即执行函数，而是给出一个delay(延迟)时间值，例如500ms如果在500ms内没有再次触发该事件，则执行函数如果在500ms内有再次触发事件，则清除当前的计时器，重新开始计时器实现原理：实现的关键就在于setTimeOut这个函数，由于还需要一个变量来保存计时，考虑维护全局纯净，可以借助闭包来实现1.函数
2020-07-10 14:45:23
211
原创 css——指定某个区域可垂直或水平滑动
1.指定区域可上下滑动效果如下：##### html: <div class="demo"> <div>语文</div> <div>数学</div> <div>音乐</div> <div>历史</div> <div>地理</div> <div>政治</div
2020-07-08 10:33:07
7391
6
原创 Vue——父组件跳转子路由后当前导航active样式消失问题
效果图如下：实现方法如下：一级路由（personal.vue）：<template> <div id="app"> <div> <h4 class="routerStyle"> <router-link to="/personal/personalwork"><span>作品管理</span></router-link> <router-link
2020-07-07 12:06:02
1981
1
原创 设置font-size小于12px
前端css设置font-size小于12px不起效原因因为 Chrome浏览器做了如下限制：font-size 有一个最小值 12px（不同操作系统、不同语言可能限制不一样），低于 12px 的，一律按 12px 显示。理由是 Chrome 认为低于 12px 的中文对人类是不友好的。但是允许你把 font-size 设置为 0.css设置font-size小于12px方法（用css3中的缩放）：效果：html:<div class="demo"> <
2020-07-06 16:44:08
5664
原创 vue——项目中使用scss
1. 使用vue-cli创建新项目：vue init webpack my-project2. 安装sass 依赖包 ，在cmd界面输入：// 命令行npm install sass-loader --save-devnpm install node-sass --sava-dev3. 在build文件夹（使用vue-cli才有有效webpack.base.conf.js文件夹）下的webpack.base.conf.js的rules里面添加配置module: { rules: [
2020-07-06 15:02:33
404
原创 vue——创建AES加密工具类方法（crypto）
### 创建AES加密工具类方法（crypto）第一步：//安装npm install crypto-js --save-dev第二步：在src文件夹中创建crypto.js第三步：crypto.jsimport CryptoJS from 'crypto-js'// 加密export default { encrypt (word, keyStr) { // word:待加密内容 keyStr:私钥 keyStr = keyStr || 'abcdsxyzhkj
2020-07-02 18:18:14
847
1
原创 vue——RSA加密封装成工具类（jsencrypt）
使用较多的有两种辅助插件方法一： jsencrypt.js方法二：crypto.js 创建RSA加密工具类方法（jsencrypt）第一步：## 命令行npm install jsencrypt --save第二步：在src文件夹中创建jsencrypt.js第三步：jsencrypt.js/***** * RSA加密解密工具类 * **/import { JSEncrypt } from 'jsencrypt' // 导入// 公钥const publicKey = '
2020-07-02 18:17:29
1399
1
原创 点击头像选择图片更换头像
效果图如下所示(视频再转格式的时候被挤变形了一点，各位童鞋将就一下，嘻嘻)：关键代码（html）： <span class="headerSpan"> <img class="headerImg" :src="headerUrl"> <input @change="getImgUrl($event)" ref="file" title='' type="file" accept="image/*" class
2020-06-23 17:50:43
5379
8
原创 input选择文件后对文件重命名
html:!-- 图片上传 --><div class="from-text"> <a href="javascript:;" class="file">选择图片/视频 <input type="file" name="" value="选择文件" id="uploadfile" accept=".mp4,.jpg" multiple> </a> <blockquote class="layui-elem
2020-06-02 16:31:10
1191
原创 input同时选中多个图片或视频的读取，展示和删除
demo效果图如图所示html:<!-- 图片上传 --><div class="from-text"> <a href="javascript:;" class="file">选择图片/视频 <input type="file" name="" value="选择文件" id="uploadfile" accept=".mp4,.jpg" multiple> </a> <blockquote
2020-06-02 11:31:58
1511
原创 vue--横向切换手风琴动画效果demo
demo效果图如下：html：<div class="or-container"> <div class="box" :class="eleindex ==i?'eleactive':''" v-for="(ele,i) in piclist" :key="i" @mouseenter="enter(i)" @mouseleave="out(i)"> <img :src="ele.img">
2020-06-01 15:18:37
2271
原创 鼠标悬浮出现模态框覆盖和图标demo,纯css控制
效果图如下：html:<div style="width: 100%"> <a>图片预览</a> <ul class="preview-pic"> <li class="index-pic pic-del"><img src=${p.tmpURL} style="width: 80px;height:60px;" alt=""></li> <li class="index-pic
2020-05-29 14:54:05
381
原创 jq判断点击的是第几个li
<ul id="test"> <li class="test">1</li> <li class="test">2</li> <li class="test">3</li> <li class="test">4</li></ul>方法1（有时不管用）：$(".test").click(function(){ alert( $(this).inde
2020-05-29 13:48:28
1347
原创 vue的v-for遍历渲染列表单独控制显示隐藏
效果图如下所示：先抛出代码给急用的童鞋参考：知识点有两个：v-for遍历渲染图片控制显示和隐藏（不用看css）鼠标悬浮图片出现灰膜 (css控制)注意：只放了css的重要代码 <section class="feature-area section-padding"> <div class="container"> <h2>图文教程</h2> <div class="row">
2020-05-28 11:46:56
2552
3
原创 git的使用——将项目二次上传
1.新建一个文件夹作为仓库2.选中这个文件夹右键打开git push here3.git clone git@…4.在拉下来的项目文件夹右键打开git push here5.在拉下来的项目文件夹中只能替换除.git以外的文件夹6.git add .7.git commit -m “第一次提交”8.git remote rm origin (每次必先断开连接)9.git remote add origin git@…10.git push origin master:master...
2020-05-27 14:18:46
692
原创 安装mysql及连接Navicat详细教程（window64）
1.去官网下载mysql mysql官网下载链接2.点击这个无需登录注册直接下载3.下载解压到此目录4.配置下 MySQL 的配置文件my.ini文件内容为[mysqld]# 设置3306端口port=3306# 设置mysql的安装目录basedir=C:\Program Files\MySQL# 设置mysql数据库的数据的存放目录datadir=C:\Progr...
2020-05-26 17:30:53
3793
3
原创 vue进入页面自动获取焦点
效果如图：代码如下：directives与data处于同级位置directives: { focus: { inserted: function (el, {value}) { console.log(el, {value}) if (value) { el.focus() } } } },...
2020-05-20 17:07:40
2830
原创 导航按钮点击三杆变×
效果图如图所示实现代码html<!DOCTYPE html><html lang="en"><head> <!-- Required Meta Tags --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-
2020-05-09 15:17:55
670
原创 开发问题积累——element ui如何修改样式
例如：element弹框宽度太宽要变窄ElementUI组件不可以给样式添加scoped，因此必须去掉scoped；但是去掉scoped后不满足单组件的CSS。解决方法：给提示框添加类名搞定！...
2020-04-22 15:31:29
216
原创 git的使用——上传项目到自己的仓库（从0开始教你）
关于git介绍Git是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理。git是一种工具，它能更好的让我们管理代码。很多时候如果我们需要将本地项目代码上传至GitHub（gitlab）或者从GitHub（gitlab）上下载项目源码到本地，那么我们就会用到git这个工具。git工具不仅可以让我们克隆别人的或者自己的远程代码，还可以实现本次存储远程仓库。gitlab与...
2020-04-09 17:23:13
3536
1
原创 json字符串嵌套json字符串的解析取值
一.转换方式介绍1.浏览器支持的转换方式：（1）JSON.stringify(obj)将JSON转化为字符串。（2）JSON.parse(string)将字符串转为JSON格式。如下图所示：2.javascript支持的转换方式eval(’(’+b+’)’);可以将json字符串转换为json对象注意：需要在json字符串外包裹一对小括号，ie8(兼容模式)，ie7和ie6也可以使...
2020-04-09 14:11:43
3915
原创 vue组件通信的方式总结
一.父子组件之间的通信（props/emit）1.父组件向子组件传值步骤总结：在父组件中注册子组件父组件的template中使用子组件标签，并在子组件标签中添加自定义属性，把要传给子组件的值赋给这个属性在子组件中使用props来接收这个属性及传来的值父组件：子组件：2.子组件向父组件传值步骤总结：在子组件中绑定一个点击事件在响应该点击事件的函数中使用emit，将传给...
2020-03-11 16:48:27
175
原创 node+vue+element图片上传到mysql(其实只是保存地址，哈哈)
1.用element添加图片上传框<el-upload action="/addtalk/upload" enctype="multipart/form-data" method="post" list-type="picture-card" :on-success="afterUpload" :on-preview="handlePictureCardPreview"...
2020-02-28 00:27:11
4571
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人