- 博客(46)
- 收藏
- 关注
RSS订阅原创 echarts图变模糊解决办法
方法一使用svg渲染方式渲染echarts图echarts.init(this.$refs.line, null, { renderer: "svg" })方法二通过devicePixelRatio调整清晰度echarts.init(this.$refs.line,null, {devicePixelRatio: 2.5})
2022-05-17 15:52:58
2729
原创 vue 展开收起样式 超出为省略号
效果组件<template> <div class="remark-text"> <div ref="textBox" class="text" :style="{ WebkitLineClamp: minLine ? minLine : 3 }" :class="{ 'all-text': showAll }" > <span class="btn"
2022-04-25 16:40:27
359
原创 vue 表格自动滚动 鼠标悬浮停止滚动
vue 表格自动滚动 鼠标悬浮停止滚动组件<template> <div class="main"> <div class="content" ref="list" @mouseover="mouseOver" @mouseleave="mouseLeave" > <slot></slot> </div> <div class="o
2022-04-25 16:29:33
1206
原创 echarts tooltip自动轮播
/** * echarts tooltip 自动轮播 * @author liuyishi * @param chart * @param chartOption * @param options * { * interval 轮播时间间隔，单位毫秒，默认为2000 * loopSeries boolean类型，默认为false。 * true表示循环所有series的tooltip，false则显示指定seriesIndex的toolti
2022-02-17 15:00:34
1669
原创 vue 音频播放 Audio 不使用插件
<template> <img :src="audio_icon" class="icon_audio" @click="audioClick" /></template><script>export default { props: ['adcd'], name: '', data() { return { canPlay: false, audio_icon: require('../images/a
2022-01-07 16:05:42
1681
原创 前端项目常用的工具类函数
话不多说上代码！！！import axios from 'axios';/** * 两个数字相除 * @param {number} n 因为0/0等于NaN */export const notZero = (m, n) => { if (!n || !m) { // Matches +0, -0, NaN return 0; } return m / n;};/** * 下载文件 * @param {String} filename 文件名:登录.
2022-01-06 18:06:06
315
原创 vue 批量打包图片为zip压缩包下载
vue 批量打包图片为zip压缩包下载 getFile(url) { return new Promise((resolve, reject) => { this.axios({ method: 'get', url, responseType: 'arraybuffer', }) .then((data) => { resolve(data.d
2021-12-28 16:57:30
161
原创 vue 图像拖拽、鼠标滚轮放大缩小
vue 图像拖拽、鼠标滚轮放大缩小//页面<img v-drag @mousewheel.prevent="scaleFun" :style="scaleImg" :src=" dangerImgs[0] ? serverIp + dangerImgs[0] : require('@/assets/images/no-pic.png') "
2021-12-28 15:20:25
1260
原创 js 求最接近5的倍数的值
在数组中获取最接近的5的倍数的值注：data为数组1、最大值–向上取整Math.ceil(Math.max.apply(null, data) / 5) * 52、最小值–向下取整Math.floor(Math.min.apply(null, data) / 5) * 5
2021-12-28 11:07:56
1123
原创 js 嵌套联级数组的递归
1、根据子级标识获取其所在的对象//调用 this.getTreeObjByUrl(嵌套数组data, url); // 根据url找到其相应的tree位置 getTreeObjByUrl(treeData, url) { for (let item of treeData) { if (item.children && item.url != url) { this.getTreeObjByUrl(item.childre
2021-09-22 17:34:11
1156
原创 Element常用
1、el-table固定表头：只需给el-table属性height，element中的height为 max-height: 300px; overflow: auto;因此想要固定表头不能覆盖这两个样式
2021-08-11 14:38:34
195
原创 联级嵌套数组同级下插入属性
需求：联级嵌套数组使用递归在指定同层级下插入相同的标识 /** * count: 当前层级 * data: 当前层级的数据 * maxNum: 最多不能超过几级 */ setDisable(count, data, maxNum) { if (count < maxNum) { count++; data.forEach((v) => { v.disabled
2021-08-10 11:05:53
131
转载 新建标签页 localStorage、sessionStorage、cookie、vuex数据变化
新建标签页 localStorage、sessionStorage、cookie、vuex数据变化转载: 转载.
2021-02-24 12:07:24
300
转载 div 鼠标拖拽改变其大小（可运用在左侧导航栏改变其宽度场景中）
div 鼠标拖拽改变其大小（可运用在左侧导航栏改变其宽度场景中）转载自使用CSS3中resize属性 改变大小
2020-12-17 16:28:13
495
原创 js数组方法的splice() slice() split()的区别
js数组方法的splice() split()的区别splice(index,howmany,item1,…,itemX)向/从数组中添加/删除项目，然后返回被删除的项目。强大之处：能够只用这个函数就能实现对数组的增删改查参数含义：index：起始位置，当index为负数时，则从数组后面开始howmany:要删除的项目数量item1… :向数组添加的新项目...
2020-11-23 19:00:10
498
原创 css实现当滚轮滚动到某一高度时固定div
css实现滚动到某一高度时固定div.tab-control{ position: sticky; top: 44px; }
2020-11-21 14:25:27
1275
原创 vue中getters的用法
vue中getters的用法store文件夹下的index.js文件：import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { // 数据源 counter:100, students:[ {id:0,name:'张三',age:80}, {id:1,name:'李四',age:24}, {id:
2020-11-11 17:17:20
1694
原创 vue 导航跳转案例
vue 导航跳转案例创建vue项目的配置：选择3.0x版本目录结构：index.js:import { createRouter, createWebHistory } from 'vue-router'const Home=()=>import('../views/home')const Cart=()=>import('../views/cart')const Category=()=>import('../views/category')const Profi
2020-11-10 19:24:43
564
原创 vue修改插槽的样式
vue修改插槽的样式方法一：子组件中直接设置颜色子组件<template> <div :class="{active:isActived}"> <slot name="slot-text"></slot> </div></template> <style scoped> .active{ color: dodgerblue
2020-11-10 15:00:05
3857
原创 vue不具名插槽与具名插槽
vue不具名插槽与具名插槽需求：面向未来编程，实现在未来中若出现修改内容可以简便的修改，而不需要将全部整改思路：在组件Tabbar.vue（底部导航）当中使用不具名插槽，Tab-bar-item.vue中写具名插槽以便在App.vue中方便获取和更改Tabbar组件:TabBarItem组件（Tab-bar-item.vue）：目录：Tabbar.vue<template> <div id="tabbar"> <slot><
2020-11-10 14:12:04
777
2
原创 vue根据参数跳转路由
vue根据参数跳转路由目录结构App.vue<template> <div id="app"> <router-link :to="'/user/'+userId" tag="button">用户</router-link> <router-view></router-view> </div></template><script> export defau
2020-11-05 15:22:36
268
原创 vue中父级访问子级与子级访问父级
vue中父级访问子级与子级访问父级父级访问子级通过$children与refs访问<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimu
2020-11-02 16:50:50
432
原创 vue中的父组件传递数据给子组件、子组件传递数据给父组件
vue中的父组件传递数据给子组件、子组件传递数据给父组件1、父组件传递数据给子组件中心思想：父组件向子组件传值，需要通过props1.1 父传子数组<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-sc
2020-10-30 15:54:57
2446
原创 node+express+mongoose分页
基于bootstrap的node+express+mongoose分页项目目录基本思路：1 所需知道的数据（后端处理）： 总数据数、每页限制的数据个数 ===》总页数 所需要显示的数据：找出所有数据==》跳过前面几页的数据==》限制数据个数2 将获取到的数据渲染到前端页面3 自动生成跳转页数按钮个数直接放代码！router.jsvar express = require('express')const Logs = require('./mongo/logs');// 1
2020-10-26 18:56:44
489
原创 node+express的路由跳转（get/post）
node+express的路由跳转（get/post）项目目录app.jsvar router = require('./router')var express = require('express');var app = express()// 放开静态资源app.use('/node_modules', express.static('./node_modules'))app.use('/public', express.static('./public'))app.engi
2020-10-19 18:51:31
1889
原创 npm常用命令
npm常用命令mkdir 文件夹名新建文件夹cd文件夹名npm init初始化项目npm init -y跳过向导npm install 包名npm install --save下载并保存依赖项简写:npm i -S 包名npm uninstall - save 包名删除的同时，把依赖信息也去掉简写: npm un-S 包名npm help查看帮助npm 命令 --help查看指定命令使用帮助npmnode package manag
2020-09-27 19:58:00
329
1
原创 node实现前后端数据交互
node实现前后端数据交互利用数组模拟数据库目录：index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/b
2020-09-26 16:43:28
461
原创 利用python部署网页
网页部署服务器命令行路径进入到网页的项目中，在index.html文件夹下。一定是index.html文件夹下！！！输入命令python -m http.server 8080出现如下界面则证明网页部署成功在浏览器地址栏中输入http://localhost:8080/成功打开index.html网页的内容则成功...
2020-09-12 14:02:07
777
原创 js中的碰撞问题
球之间的碰撞问题下面是一张球与球之间的距离示意图（有点乱，但应该能看得明白吧。。。）可以利用勾股定理得到圆心与圆心之间的距离利用圆心与圆心之间的距离与两个圆形的半径相加判断是否相碰碰撞：(b.offsetLeft-a.offsetLeft-a.offsetWidth)² + [b.offsetTop+b.offsetHeight-(a.offsetTop+a.offsetHeight)]²<(a.offsetWidth/2+b.offsetWidth/2)²方体之间的碰撞问题判断当方体
2020-09-10 19:39:24
304
原创 前端细微小知识
前端的一些细节小知识1：h1 h2 h3标签的特殊：搜索引擎搜索时会先找到这三个标签内容匹配的网站2：p div标签同为块级元素但要注意语义化不能随意乱用3：写css时最好把设置位置的样式放在最前面写，其他样式放在后面原因：影响浏览器渲染性能性能4：选择器权值权重（排除顺序覆盖问题后）id 权值为100； class 权值为10； tag 权值为1；例如：html结构<div id="box"> <p class="p1">12345</p><
2020-09-07 20:04:42
115
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人