vue
关注
分享
扫一扫
文章平均质量分 80
Kinghiee
Front-end Developer
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
前端实现大文件上传(文件分片、文件hash、并发上传、断点续传、进度监控和错误处理，含nodejs)
大文件分片上传是前端一种常见的技术，用于提高大文件上传的效率和可靠性。主要原理和步骤如下。原创 2025-01-04 15:46:51 · 1384 阅读 · 0 评论 -
手动创建 vue2 ssr 开发环境
手动搭建 vue ssr 一直是一些前端开发者的噩梦，因为其中牵扯到很多依赖包之间的配置以及webpack在node中的使用。就拿webpack配置来说，很多前端开发者还是喜欢用webpack-cli脚手架搭建项目。导致这样的原因之一无外乎学习成本高，软件复杂等。这也是有些前端开发者直接拥抱nuxt.js的部分原因。这篇博客使用vue2，以步骤为主，来展示如何创建完整ssr测试环境。原创 2023-02-19 21:50:18 · 1830 阅读 · 2 评论 -
js 回到顶部逻辑实现和elementUI源码解析
大家或多或少都会遇到“回到顶部”这样的需求，在此分享这个技术点以及可能遇到的问题。再分析element源码。回到顶部关键技术点在backTopClickHandle函数中在该函数中，首先判断当前是否存在定时器，如果有下面步骤不执行。否则获取滚动条高度, 启动定时器，在定时器中计算出当前滑动速度，并计算出当前滚动条高度。最后如果滚动条高度小于等于0，清除定时器。在backTopClickHandle函数中有两点需要特别注意scrollTop的位置在setInterval(() => {…})内，效果图原创 2022-11-16 16:46:17 · 1802 阅读 · 0 评论 -
IntersectionObserver API 创建图片懒加载(实战)
一、 效果图二、 代码<template> <img ref="imgLazy" :data-src="dataSrc" :src="src" :alt="alt" :title="title" class="kh-img-lazy" @error="imgErrorHandle" ></template><script lang="ts">import { defineCompon原创 2022-03-06 16:47:01 · 360 阅读 · 0 评论 -
策略和状态模式应用——tab切换时，图表内容变化(二对一)
注意:本篇博客不讲原理，如果看不懂请先补充策略模式、状态模式、闭包、惰性求值、函数式编程等相关内容一、效果二、为什么使用策略和状态模式vue普通的tab切换很简单，使用下面代码就可以搞定。凡事就怕但是，如果使用下面的代码形式画echarts的话，切换图的时候，因为echarts获取不到宽高，导致图渲染不到页面上去。有人会说可以加this.$nexttick，是的。可以通过加入该函数做到延迟的echarts获取到dom宽高再渲染，但是需要有几个切换加几个this.$nexttick。而且有几个切换需要原创 2021-11-07 17:04:15 · 410 阅读 · 1 评论 -
Vue 通过localStorage使用字符串数组队列实现全局搜索功能(从需求到实现 超详细！！)
一、需求1.使用浏览器localStorage，开发网站全局搜索功能。2.搜索历史不超10条，超过10条依次覆盖时间最久的历史搜索记录3.新输入的搜索记录，下次input不输入内容focus时应该展示在第一条。4.新输入的搜索记录回车搜索后，如果之前历史搜索记录中存在，下次input不输入内容focus时这把这条记录放置历史记录展示页面最上面第一条5.input 在输入内容时不展示搜索记录6. 搜索记录不能有重复值7. 一键清除大致开发思维： 使用数组队列来存储历史记原创 2021-08-14 12:01:04 · 1030 阅读 · 6 评论 -
Vue+TS Echarts股票图
一、效果图二、echarts 股票配置根据dom 生成echarts 实例(this as any)[instance] = echarts.init(this.$refs[ref] as HTMLBaseElement); //创建实例注:instance,ref是变量需要外部传入2. 股票基础配置 import ECHARTSOPTIONSCONFIG from './config/echartConfig';//导入 /* ...... ... .. */(this a原创 2021-07-22 14:29:23 · 2542 阅读 · 5 评论 -
使用yeoman 创建vue脚手架，并发送npm包，下载并实验。
一、总括yeoman手动搭建自己的脚手架。基本步骤如下①:请确保你有能够正常运行的npm②：请确保你已经了解了yeoman③：npm install -g yo③: npm install -g generator-generator④：编写代码⑤：发布npm包二、起步①:请确保你有能够正常运行的npm这一点不用多说，是必须项②：请确保你已经了解了yeoman如果没有了解yeoman 基本不需要向下面看了。点击可以学习yeoman③：npm install -g yo原创 2021-03-30 21:30:32 · 560 阅读 · 0 评论 -
vue2.x+ts项目,在props type导入自定义接口类型报‘xxx‘ only refers to a type, but is being used as a value here处理办法
一、报错 ‘xxx’ only refers to a type, but is being used as a value here在Props中使用自定义类型约束时，报上面的错误。然后 我在网上查找教程，找到一个说在ts中导出class 接口，虽然没有报错，但是按照我的下面的定义，在父组件中传入data值，会报错误。那如何改动呐？export class popType { title: { name: string; nameStyle?: style; }; cont原创 2021-03-10 17:07:56 · 18184 阅读 · 0 评论 -
vue 音乐播放器之歌词解析和滚动(js源码)
效果图注：歌词和图片来源于网络总体思路①：请求歌词资源②：解析歌词，生成html代码③：html代码插入歌词显示的区域④：监听歌曲播放进度，通过id选择器选中正在播放的歌词添加样式⑤：判断条件是否滚动⑥：歌曲播放完毕清除样式，滚动到顶部①：请求歌词资源 init() { //请求资源 this.axios.get("/dataJson/musicList.json").then(response => { let { data, status }原创 2020-11-09 09:30:29 · 3941 阅读 · 0 评论 -
threeJS 自定义路径曲线（CatmullRomCurve3）
一、效果图二、案例中用到的重要函数或设置this.curve = new THREE.CatmullRomCurve3( [① //起点 new THREE.Vector3(-10, 0, 10), //中间节点 new THREE.Vector3(-5,10,-10), new THREE.Vector3(2, 5, -5), //终点 new THREE.Vector3(10, 0, 10),原创 2020-07-30 20:07:51 · 11544 阅读 · 0 评论 -
threeJS 物体贴花
官方案例一、效果二、总体步骤① 创建场景② 创建相机③ 创建物体④创建渲染器 创建status、OrbitControls和gui⑤ 添加监听函数页面架构<template> <div class="box3"></div></template><script></script><style></style>导入文件,创建变量和函数 import * as T原创 2020-07-30 09:52:51 · 1276 阅读 · 0 评论 -
threeJS 裁剪物体
一、效果图二、案例中用到的重要函数分析 new THREE.MeshLambertMaterial({ color:new THREE.Color().setHSL(Math.random(),0.5,0.5),① side:THREE.DoubleSide,② clippingPlanes:this.planes,③ clipIntersection:true④ })this.renderer.localClippingEnabl原创 2020-07-28 18:28:30 · 4888 阅读 · 2 评论 -
echarts 疫情可视化（大屏显示）
一、效果图二、制图①：数据准备②：导入需要的js文件③：HTML框架准备④：css、js文件引入⑤：VUE框架生以及主要函数生成①：数据准备1 ：准备全国省会城市、特别行政区、直辖市坐标数据2 ：准备全国地图和各省市的json数据用于地图展示和地图下钻3 ：疫情数据准备全国疫情数据全世界疫情前22国家数据②：导入需要的js文件疫情可视化需要echarts.min.js、vue.js、axios.min.js文件③：HTML框架准备④：css、j原创 2020-07-02 08:28:02 · 10625 阅读 · 13 评论 -
Vue 原生页面触底加载
效果图效果链接网站Kinghiee核心代码要想实现触底加载，第一步写监听鼠标滑动事件，并监听上图为触底加载的原理图。当窗口高度加上页面高度大于图片的高度(黑色小框)时，开始加载图片methods:{ scroll() { let scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;//页面滚动高度原创 2020-06-06 22:42:23 · 2614 阅读 · 2 评论 -
Vue Echarts飞机航线图
声明本案例来着官方案例航线图效果图步骤①：文件导入②：基本配置③：图标配置④：生成结果①：文件导入 <script src="../../js/echarts.min.js"></script> <script src="../../js/china.js"></script> <script src="../../js/vue.js"></script>②：基本配置let kinghi原创 2020-05-27 21:08:55 · 14516 阅读 · 27 评论 -
Vue Echarts 河南省疫情图
1224原创 2020-05-21 07:35:53 · 1332 阅读 · 1 评论 -
vue+three+layui 实现后台登陆页面
效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=1200, initial-scale=1.0, minimum-scale=1.0, maximum-scal...原创 2020-05-03 12:05:30 · 1581 阅读 · 3 评论 -
VueJS 踩坑之组件注册中元素属性绑定
vue Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}"use 这是我当时通过props传值给组件绑定id属性时出现的错误，出现这样的错误原因是vue 2.x是不支持对...原创 2020-05-03 07:54:26 · 941 阅读 · 0 评论 -
threeJS 通过组件形式和vueJS结合
效果图导入文件npm install three --save-dev import * as THREE from "./node_modules/three/build/three.module.js"; import {OrbitControls} from "./node_modules/three/examples/jsm/controls/OrbitControl...原创 2020-05-02 16:41:29 · 5294 阅读 · 3 评论 -
vue+layui简简单单实现流加载(触底加载、懒加载)
layui官网教程请访问 流加载代码html <div class="card_section" id="card_section"> </div>less样式//卡片样式 .card_section{ padding: 1vw 2vw; //box-shadow: 0 -2px 3px -1px rgba...原创 2020-04-20 16:59:32 · 1266 阅读 · 0 评论 -
vue+less+layui(图标)简单实现轮播
效果图代码VUE代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <...原创 2020-04-12 14:30:01 · 596 阅读 · 0 评论 -
vue+d3.js计算任意多边形面积
效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>arbitraryPolygon</title> <script src="js/jquery-3.3.1.js" type="text/ja...原创 2019-11-25 12:52:12 · 1595 阅读 · 2 评论 -
vue+d3.js计算三角形面积
效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>triangleArea</title> <script src="js/jquery-3.3.1.js" type="text/javasc...原创 2019-11-24 19:35:58 · 693 阅读 · 0 评论 -
vue+d3.js计算两点之间的距离
效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>TwoPoints</title> <script src="js/vue.js" type="text/javascript"><...原创 2019-11-24 09:55:19 · 1034 阅读 · 0 评论