![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 78
Kinghiee
Front-end Developer
展开
-
手动创建 vue2 ssr 开发环境
手动搭建 vue ssr 一直是一些前端开发者的噩梦,因为其中牵扯到很多依赖包之间的配置以及webpack在node中的使用。就拿webpack配置来说,很多前端开发者还是喜欢用webpack-cli脚手架搭建项目。导致这样的原因之一无外乎学习成本高,软件复杂等。这也是有些前端开发者直接拥抱nuxt.js的部分原因。这篇博客使用vue2,以步骤为主,来展示如何创建完整ssr测试环境。原创 2023-02-19 21:50:18 · 1591 阅读 · 2 评论 -
js 回到顶部逻辑实现和elementUI源码解析
大家或多或少都会遇到“回到顶部”这样的需求,在此分享这个技术点以及可能遇到的问题。再分析element源码。回到顶部关键技术点在backTopClickHandle函数中在该函数中,首先判断当前是否存在定时器,如果有下面步骤不执行。否则获取滚动条高度, 启动定时器,在定时器中计算出当前滑动速度,并计算出当前滚动条高度。最后如果滚动条高度小于等于0,清除定时器。在backTopClickHandle函数中有两点需要特别注意scrollTop的位置在setInterval(() => {…})内,效果图原创 2022-11-16 16:46:17 · 1735 阅读 · 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 · 305 阅读 · 0 评论 -
策略和状态模式应用——tab切换时,图表内容变化(二对一)
注意:本篇博客不讲原理,如果看不懂请先补充策略模式、状态模式、闭包、惰性求值、函数式编程等相关内容一、效果二、为什么使用策略和状态模式vue普通的tab切换很简单,使用下面代码就可以搞定。凡事就怕但是,如果使用下面的代码形式画echarts的话,切换图的时候,因为echarts获取不到宽高,导致图渲染不到页面上去。有人会说可以加this.$nexttick,是的。可以通过加入该函数做到延迟的echarts获取到dom宽高再渲染,但是需要有几个切换加几个this.$nexttick。而且有几个切换需要原创 2021-11-07 17:04:15 · 306 阅读 · 1 评论 -
Vue 通过localStorage使用字符串数组队列实现全局搜索功能(从需求到实现 超详细!!)
一、需求1.使用浏览器localStorage,开发网站全局搜索功能。2.搜索历史不超10条,超过10条依次覆盖时间最久的历史搜索记录3.新输入的搜索记录,下次input不输入内容focus时应该展示在第一条。4.新输入的搜索记录回车搜索后,如果之前历史搜索记录中存在,下次input不输入内容focus时这把这条记录放置历史记录展示页面最上面第一条5.input 在输入内容时不展示搜索记录6. 搜索记录不能有重复值7. 一键清除大致开发思维: 使用数组队列来存储历史记原创 2021-08-14 12:01:04 · 909 阅读 · 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 · 2206 阅读 · 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 · 471 阅读 · 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 · 16643 阅读 · 0 评论 -
vue 音乐播放器之歌词解析和滚动(js源码)
效果图注:歌词和图片来源于网络总体思路①:请求歌词资源②:解析歌词,生成html代码③:html代码插入歌词显示的区域④:监听歌曲播放进度,通过id选择器选中正在播放的歌词添加样式⑤:判断条件是否滚动⑥:歌曲播放完毕清除样式,滚动到顶部①:请求歌词资源 init() { //请求资源 this.axios.get("/dataJson/musicList.json").then(response => { let { data, status }原创 2020-11-09 09:30:29 · 3590 阅读 · 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 · 10609 阅读 · 0 评论 -
threeJS 物体贴花
官方案例一、效果二、总体步骤① 创建场景② 创建相机③ 创建物体④创建渲染器 创建status、OrbitControls和gui⑤ 添加监听函数页面架构<template> <div class="box3"></div></template><script></script><style></style>导入文件,创建变量和函数 import * as T原创 2020-07-30 09:52:51 · 1115 阅读 · 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 · 4460 阅读 · 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 · 10407 阅读 · 13 评论 -
Vue 原生页面触底加载
效果图效果链接网站Kinghiee核心代码要想实现触底加载,第一步写监听鼠标滑动事件,并监听上图为触底加载的原理图。当窗口高度加上页面高度大于图片的高度(黑色小框)时,开始加载图片methods:{ scroll() { let scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;//页面滚动高度原创 2020-06-06 22:42:23 · 2569 阅读 · 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 · 13653 阅读 · 27 评论 -
Vue Echarts 河南省疫情图
1224原创 2020-05-21 07:35:53 · 1264 阅读 · 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 · 1488 阅读 · 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 · 855 阅读 · 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 · 5135 阅读 · 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 · 1196 阅读 · 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 · 518 阅读 · 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 · 1493 阅读 · 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 · 600 阅读 · 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 · 944 阅读 · 0 评论