- 博客(42)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 前端常用的 css知识点整理
1:文字溢出省略号: 2: css变量：CSS变量又称CSS自定义属性，通过在中自定义属性与函数组成，用于引用自定义属性。谈到为何会在中使用变量，以下使用一个示例讲述。 3:渐变：渐变分为、，这里笔者直接记录的使用方式，也是为了使用的时候更加的直观，这里说下，在使用线性渐变的时候，使用以及去控制渐变，会更加的灵活 4: background-size：cover和contain以及100%:图片放大至满足背景区域的最小边即止，当背景区域与背景图片的宽高比不一致的情况下，背景区域可能会长边下
2022-12-06 17:49:23
155
原创 VSCode中snippets（代码模板）的使用
"prefix": "vbase" 就是代码块的关键词,输入vbase就会提示代码块 选择vbase2。然后保存，重启VSCode,新建文件测试，输入vb即可，选择刚才输入的vb2即可。首先安装Vue VSCode Snippets，在组件库中搜索并安装。文件夹名是 "作者名.vscode-插件名-版本号"组成的.打开vue.json。
2024-05-27 16:14:44
1201
原创 el-progress渐变色
在需要的地方引入组件，一般是el-progress的下方。然后再css里写样式选择需要的渐变色,到这里就完成了。线性渐变：直接修改样式根据所需颜色修改即可。
2024-03-18 15:41:29
3447
转载 setTimeout 和 setInterval 的定时时间
只是在特定时间点将代码推入队列，如果已有定时器在队列中，则会跳过。浏览器不会同时创建两个相同的间隔计时器。设置定时时间小于函数体内的执行时间时候，则第一次执行定时时间后面的真正的定时时间应该是执行函数体的总时间。中的异步代码不会阻塞创建新的定时器。
2023-11-28 13:53:29
221
原创 vue中下载文件后无法打开的坑
到这里请求文件流和导出文件得方法都已经写完了，这里面有的坑呢 打开就是返回得数据，大概就是你new Blob([data])得时候这个data是否是文件流，这个例子后端直接给我返回了文件流所以就直接使用了 一边都是res.data这样使用，再有就是responseType: 'blob',这个在请求文件流时请求头中必须要写，其他就没什么了。今天在项目开发的时候临时要添加个导出功能我就写了一份请求加导出得代码，如果到这里下载下来的文件还是无法打开请往下看。下面就要说的就是mockjs了。
2023-11-24 15:27:17
1946
1
原创 JavaScript:监听事件
该方法用于向浏览器窗口注册事件监听器，当指定的事件（如单击、按键按下）被触发时，浏览器会自动调用指定的函数（回调函数）。
2023-11-23 15:48:08
613
原创 element table中嵌套el-select 无法选择问题
需要在el-table-column上添加:key="tableKey"el-select添加change事件修改tableKey。
2023-10-20 16:08:23
1454
原创 element table合并行或列 span-method
再请求到后台数据之后如果数据不是按你想合并字段排序的话，这时候需要多做一步排序，把需要合并的那个字段分组显示，这里就不过多赘述了（这个分组一般后台都能做）。之后再调用接口获取到数据之后运行获取merge和subscript的方法。到这就已经把数据处理完了接下来就是处理el-table的合并方法。显然这种固定写法并不能满足我们日常开发中的需求。首先再data里定义两个变量。首先来看下官网上如何写的。接下来就讲一下如何操作。
2023-09-20 13:15:20
1048
原创 vue element-ui el-table里嵌套了el-select双向绑定失效问题
今天测试时候发现了个bug element-ui的table组件中嵌套了select组件 ，选择之后发现数组中有数据，页面没有刷新数据无法展示，所以判断双向绑定失效。网上很多方法都试过了，像this.$set,this.$forceUpdate(),以及table的doLayout() 结果都没有解决问题。查了很多资料发现需要在el-table-column加一个key才能解决，于是加了key，就能双向绑定了，但是其中的原理不太了解，资料只给了解决方法没给问题原理求解。
2023-09-05 10:55:59
1375
原创 elementui Cascader 踩过的坑
观察数据发现最后一级也有children只不过children=[],这就导致组件无法确定最后一级，所以无法触发change事件，所以把最后一级children=[]的属性删除掉应该就可以，后端统一方法无法处理该数据，所以就智能前端自己出来请求到的数据。分析问题：需求明明很简单，组件可以满足需求，直接拿过来用，却一直无法触发绑定的change事件，只有添加props.checkStrictly = true时才可以触发，但是不能实现需求。使用递归遍历请求到的数组，检查每个元素是否有子元素。
2023-08-29 09:51:08
681
原创 rimraf 删除依赖 以及安装依赖报错清理缓存
由于项目太大 所导致的依赖也很大 所以再要手动删除依赖的时候会非常的慢 所以就用到了rimraf来进行删除操作 会节省很多时间 同理删除其他大文件也可以使用。
2023-06-19 16:26:55
3865
原创 js 数据平铺和树形结构互相转换
tree转data 的时候不会删除children 由树形结构转成data再转成Tree的话 需要再转成data的时候循环把children删掉。
2023-05-15 10:10:30
431
原创 css filter属性
这个 filter 属性是不是很神奇，我们来看看这个属性的特点：filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。grayscale 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；saturate 转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。若值未设
2022-12-07 13:34:54
259
原创 element ui watch el-input赋值之后无法删除或修改
今天在开发过程中偶然返现这个小问题：watch监听父组件传过来的值并给el-input赋值 之后发现无法修改input得值 需要在input里添加 @input="change($event)"然后在methods里写上以下方法就ok了。
2022-11-29 10:00:53
2047
2
原创 uniapp jsapi调起微信支付
最近做的项目是H5的要实现在微信浏览器调起微信支付，先讲下大概流程：想要再微信浏览器调起微信支付 而且正常H5的调起微信支付不能改变 就要先判断一下浏览器，然后调起微信支付，想要调起微信支付首先要获取到openId想要获取openId就要先获取一个code 把code 发送给后端 然后获取token token里携带openid 然后 咱们再调接口 获取调起微信支付的所需参数。H5调起微信支付就很简单就直接加载后端的一个h5_url 就可以调起微信支付 这里不做重点讲。咱们先看下官方文档：.
2022-04-20 16:59:36
3830
原创 vue Element-UI vue-slicksort 封装上传图片组件
最近vue做项目收到了几个需求，上传图片，上传完能显示出来，且支持拖拽、删除等功能。先在components中新建个文件文件命名ImageDraggableUploader.vue<template> <div class="draggable-list"> <!--<SlickList lockAxis="x" axis="x" v-model="images">--> <SlickList lockA
2021-08-27 15:14:19
214
原创 VUE Element-ui之el-pagination踩过的坑
由于页面设计得弹窗他宽度不够，还要分成三部分，中间部分是选择人的分页，这就很难办了，把能省的都省了，宽度还是太大，就想着把分页跳转的改少一些，设置可选的跳转为3页，其余省略号显示，我选择了pager-count，如下： <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="leftPage.
2021-07-22 10:46:19
4772
原创 vue+element+qrcode 生成二维码
今天做项目遇到了一个需求，就是管理后台生成签到的二维码，app端扫码获取培训班、班级、课程等等，然后就想到了qrcode.vue项目使用qrcodejs2生成二维码1，导入第三方插件npm install –save qrcode2，在页面上引入import QRCode from 'qrcodejs2'3.dom<div class="qrcode" ref="qrCodeUrl">二维码位置</div> ...
2021-07-06 16:01:13
1561
原创 2021-06-22 vue element el-select组件封装 支持懒加载 多选 回显
vue element el-select组件封装 支持懒加载 多选 回显el-select数据过多处理方式假设我们有个下拉框是用来选择课程的：javascriptel-select数据过多处理方式一种优化思路：element-ui的select有一个remote-method，支持远程搜索，我们让服务端支持一下不就可以了，当然这是一种解决的方案。但是有时候这种方法对我并能够不适用，因为这样会出现回显问题，回显的时候是还需拿到所需option；另一种优化思路：下拉懒加载, 当select滚动到底部
2021-06-22 23:51:18
1634
3
原创 Live2d看板娘教程
先来看一下效果：将代码复制到自己的网页代码码中<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script><script> L2Dwidget.init({ "model": { //jsonpath控制显示那个小萝莉模型，下面这个就是我觉得最可爱的小萝莉模型，替换时后
2021-01-28 17:47:53
1638
1
原创 Vue 关于element穿梭框进行的修改成table表格穿梭框
Vue 关于element穿梭框进行的修改成table表格穿梭框直接先看样式图 <!--弹出层 --> <el-dialog title="标题" :visible.sync="introductionVisible" width="70%"> <el-form :model="introductionForm" label-width="100px"> <el-row style="display:flex;just
2020-12-26 12:15:46
3337
5
原创 Vue中 关于$emit的用法（父子组件传值)
1、父组件可以使用 props 把数据传给子组件。2、子组件可以使用 $emit 触发父组件的自定义事件。vm.$emit( event, arg ) //触发当前实例上的事件vm.$on( event, fn );//监听event事件后运行 fn；子组件：<template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData}}</h3> &
2020-12-10 14:21:40
3683
原创 关于echarts图标赋值问题
关于echarts图标赋值问题首先关于引入echarts就不用多说了 这次主要讲一下从后台取完值复制的问题下面展示一些 内联代码片。 drawChart1() { // 初始化echarts实例 let myChart = this.$echarts.init(document.getElementById("echartsLeft")); // 指定图表的配置项和数据 var echartsLeftOption = {
2020-12-09 18:24:46
550
原创 vue 多选框 实现多选 返回选中的数字值
vue 多选框 实现多选 返回选中的数字值vue 多选框 实现多选 反选 返回选中的数字值vue 页面代码<el-col> <el-form-item label="labal名称" > <el-checkbox v-model="checked" @change="changeAllChecked()">全选 </el-checkbox> <div st
2020-12-09 14:17:24
2031
2
原创 单选框并获取值的各种操作
<div class="radio-inline"> <input type="radio" name="killOrder" value="1"/> <label for="killOrder1">是</label></div><div class="radio-inline"> <input type="radio" name="killOrder" value="0" checked/> &l.
2020-10-12 11:04:24
2568
原创 全选，全不选，反选
checkbox 选项各种操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/jquer
2020-10-12 10:56:49
89
原创 js根据checkbox的选中转态输出整行内容
先说一下这个问题，首先这个是我在公司做的目的是下载选中checkbox的整行内容，我要做的是把数据发给后端，然后后端进行操作。这个html代码不是我写的，也是后来接的这个项目，html代码前面那个checkbox是写死的，写在表格里已经很不错了。将一下思路，首先进入到表格所在的页面，选中checkbox,然后单击单条导出，就可以下载了，我做的是点击单条导出 控制台打印选中的数据就OK了，如下图： <script> $(".dan-dao").click(func.
2020-10-10 17:22:19
2166
原创 Vue项目报错redundant navigation to current location: “/roles“
Vue-router报错 redundant navigation to current location: “/roles”… 解决问题在写Vue项目的时候遇到多次点击链接报错Error: Avoided redundant navigation to current location: “/roles”.如下图想要解决这个问题首先找到router文件夹下面的index.js中加上下面几句代码，就OK了// 获取原型对象上的push函数const originalPush = VueRouter
2020-09-17 16:08:24
352
原创 vue组件使用正则表达式验证邮箱和手机号
<template> <div class="addUser"> <!-- 点击添加用户对话框 --> <!-- 添加用户表单 --> <el-form :model="addUser" :rules="addUserRules" ref="addUser" label-width="auto"> <e
2020-08-20 15:33:43
1000
原创 前端ajax--收藏功能的实现
收藏按钮<div class="mui-icon mui-icon-star mui-pull-right"></div>js逻辑代码：//一进入页面查询一下当前项目收藏、非收藏状态，点击后进行收藏、取消收藏 $.ajax({ url: "../.../...", type: "post", data: { USER_ID :Us
2020-07-09 16:05:21
1320
swiper-5.4.1.zip
2020-07-25
vue iframe src提示跨域 求解
2022-03-31
TA创建的收藏夹 TA关注的收藏夹
TA关注的人