- 博客(48)
- 收藏
- 关注
RSS订阅原创 three.js--3D全景图开发
一、初识three.js平时喜欢在各博客看些文章，偶然情况下看到了关于webgl制作的一些相当有趣网站于是便去webgl的官网上了解知识，期间发现three.js这个封装webgl api的库，官网的例子感觉很牛，于是去b站等看了些three.js写的炫酷特效，自己也尝试不看视频的情况下写了一个3D全景图demo，截了demo的上下左右前后的效果图，在页面底部。于是记录下期间收获的一些知识和技巧，如果想看的话可以参考我的typescript版git代码，git地址：链接: git.threeDemo.二
2020-07-24 18:32:54
5709
3
原创 vue集成百度离线地图
项目里集成了百度地图的一些功能，因客户方是内网项目，瓦片需要部署在本地，因此记录下在本地集成百度地图的需求的解决方法~~1、下载npm地图包npm i vue-baidu-map --S2、配置webpack。例如vue-cli2，在webpack.base.conf配置BMap的依赖包变量module.exports = { ... ... // 百度地图变量映射 externals:{ 'BMap':'BMap' }};3、本地引入百度地图的api.js。项
2020-05-29 16:18:46
2227
原创 Vue之2.x实现props双向绑定
vue2.0版本的props遵循单项数据流的准则，目的是防止双向绑定导致数据流向改动混乱，但业务中难免遇到需要对props进行双向绑定，封装子组件调用，实现组件的高复用性，例如element ui组件中的组件设计亦是如此。通过阅读element ui的一些组件观察发现实现双向绑定功能的一个技术点是snyc修饰符，例如dialog组件：<el-dialog title="提示" :...
2019-08-19 00:01:00
396
原创 element-ui table 在Safari下表格与表头错位的兼容问题
项目是vue-admin-element做的，在Safari下表格出现样式宽度错乱，这个问题这里用css样式解决：body .el-table th.gutter { display: table-cell !important;}body .el-table colgroup.gutter { display: table-cell !important;}table {...
2019-05-22 16:58:04
4310
7
原创 CSS之水平垂直居中布局的五种方法
1、绝对定位（left/top为50%） + 负margin-left/top（值为自身宽高的一半）div{ position: absolute; width: 100px; height: 100px; margin-left: -50px; margin-top: -50px; left: 50%; top: 50%;}2、绝...
2018-03-16 17:54:28
952
原创 CSS之常见兼容问题
1.如果图片加a标签在IE9-中会有边框，解决方案: img{border:none;}2.rgba不支持IE8，解决方案: opacity3.display:inline-block ie6/7不支持，解决方案: display:inline-block; *display:inline;4.png24位的图片在iE...
2018-03-15 17:37:13
274
原创 h5之canvas画时钟
近来学了一些canvas的基础操作，例如画线段、矩形、圆、字体、添加图片、渐变等等操作，便利用画布画了个时钟来练习一下，代码以及图片如下： 时钟图： 代码如下：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>
2018-02-24 12:06:05
737
原创 Js之json获取length
在项目里曾对json用到长度length属性，在vue-cli的开发环境下正常无碍，万万没想到打包后放到服务器上全是报错，o(╥﹏╥)o。百度了一下方才发现原来json是没有长度属性的，-_-||。 在上线环境下获取json的长度网上的方法也是花样百出，这里我介绍一个特别好用还简单的原生方法，方法如下：Object.keys(myObject).length如此便可以愉快的使用json的...
2018-02-11 17:48:37
2251
原创 Vue之分页器实现原理
网上搜的分页器大多是jQuery实现的，而且也不太完善，于是自己写了个分页器组件，以后再用也不慌，直接复制过去就ok，下面说说具体实现的代码和原理吧。 新闻组件template：<template> <div v-if="news"> <div v-for="(item, index) in newList" v-if="(index <=...
2018-02-11 17:32:46
4482
原创 Vue之watch路由跳转
可能应用的场景：比如我当前是个介绍新闻资讯的页面，它的子路由是点击某条新闻跳转到的详情组件，实现思路倒很简单：主路由的新闻列表写在一个div里，并给该div一个v-if=”news”，当监测到路由处于新闻资讯的主路由就让news等于true，即显示。如果不在主路由（比如跳转去子路由详情页面）则为false，如下： router.js：{ path: '/new', ...
2018-02-09 18:05:30
3312
原创 Vue之栏父组件跳转子路由后当前导航active样式消失问题
举个栗子，导航栏如下图，当前新闻资讯的路由是：localhost:8083/#/new，导航栏样式如图所示： 随便挑个新闻点击后会跳转到子路由：localhost:8083/#/new/newDetail，这时候新闻资讯的主路由style样式出现消失的问题，如下图： style代码：.router-link-exact-active{ color: #8fc526!impo...
2018-02-09 17:46:10
6489
3
原创 css之文本溢出显示省略号
一、单行文本溢出显示省略号： css：width: 366px;font-size: 14px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;border: 3px solid green;效果图： 二、多行文本溢出显示省略号： css：display: -webkit-box;width:
2018-01-24 16:52:24
404
原创 JS之Math对象
Math对象的属性和方法在js里时常使到，总结了一些，代码如下：一、属性Math.E 返回算术常量e。Math.LN2 返回 2 的自然对数。Math.LOG2E 返回以 2 为底的 e 的对数。Math.PI 返回圆周率。Math.SQRT1_2 返回 2 的平方根的倒数。Math.SQRT2
2017-12-19 16:45:04
291
原创 烟光过尽，剑冷谁孤
幕帘外飞花杳杳，寒阶下已是箐华不再，谁的衣衫又曾为蒙蒙丝雨遮下？拓卷，落笔无言，感悲凉处也是一场消黯，暮色里孤笛清响吹冷了蒹葭浦，城下又是谁打马而去？几声嘶鸣，青骢已绝尘，原是，黯然销魂者，唯别而已。一路莺飞草长或雪染眉发，转眼又是几个春冬。夜色苍凉，朔风卷起檐下的青酒旗，看尽别离的残月下不知有多少痴人和盏倚着花荫折一瓣梨花聊寄情思，轻轻洒下，好似化作自己的思绪若淡烟飘去。江山长卷依旧...
2017-11-30 14:29:21
448
原创 Vue之slot分发内容
在单页面应用中，例如头部header组件，在不同的页面显示的可能内容不同，例如在下列选择城市和搜索城市页面的header组件内容便显示的不一样，图片如下： 一、 二、 这里用slot十分合适，header组件仅仅定义大小和背景，里面不添加任何内容通过slot来分发，在调用header的A组件里面使用slot定义分发该页面对应的内容，然后当A组件在页面中显示时，header组件里显示A组件里sl
2017-11-15 18:10:08
647
原创 JS之依字母排序法
按照字母对数据进行排序的场景出现频率不低，比如对后台返回json数据进行排序，然后按字母ABCD….的顺序排列数据，例如下列datas.json数据要排序为A数据在E前面展示：{ E: [ { name: "鄂州", }, { name: "峨眉山", } ] A: [
2017-11-14 18:04:19
3948
原创 Vue之嵌套router传参params与query
vue嵌套路由中父组件向子组件传递路由可以通过传参的方式，传参有params与query两种方式。一、params传参会在地址栏隐藏参数，与ajax的post请求极为相似，用法上不能用path来定义路径，要通过name来定义，用法如下：router.js代码：import Vue from 'vue'import Router from 'vue-router'import trade from
2017-11-06 17:51:42
1841
原创 Vue之vuex的简单使用
读了一遍官网资料总结一下vuex的基本用法，这里介绍的是基于vue-cli开发的用法因此跟官方的写法略有不同。 一，vue是什么。官方解释Vuex是一个专为Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。在一些应用比较复杂的单页面项目里使用vuex比较合适，因为当兄弟、父子组件数据通信、共用状态过多时这些状态会
2017-11-03 16:48:38
4599
原创 stick footer布局
stick footer布局是在页面内容不足一屏时footer显示在当前屏幕的底部，超出一屏时，则在页面里内容的下面，移动端对这种需求比较常见，如下图： 未超出页面屏幕： 超出页面屏幕： 实现负margin的布局方案： html：<div class="wrap"> <div class="content"></div> <div class="footer"></div></di
2017-11-01 17:31:56
403
原创 Vue之动态路由、嵌套路由
一、动态路由动态路由,只要通过对应路由命名格式才能访问到正确的组件。 router.js里面：import Vue from 'vue'import Router from 'vue-router'import Hello from '@/components/Hello'Vue.use(Router)export default new Router({ routes: [
2017-11-01 09:59:42
2149
原创 Vue之2.0版本的生命周期
vue2.0生命周期图示如下： 图中详细展示了一个vue实例从创建到销毁的完整过程，项目中不少地方也会用到生命周期钩子函数用以实现某些功能，下面按照vue官网资料解释一下这个过程中的钩子函数： 1，beforeCreate在实例初始化之后，数据观测（data observer）和event/watcher事件配置之前被调用2，created在实例创建完成后被立即调用。在这一步，实例已完成以下
2017-10-30 17:34:26
588
原创 Vue之通过http服务打开build后的项目
vue的打包命令是npm run build，打包完直接打开页面是不行的，只能看到加载的静态资源，需要启动一个HTTP服务，然后访问到打包后dist目录下的文件才能看到完整的项目，方法如下： 第一，在根目录下config/index.js中增加端口portport: 9000,第二，根目录下建一个启动http服务的文件product.sever.jsvar express = require('e
2017-10-26 16:25:22
2120
原创 Vue之2.x版本父子组件双向绑定事件
Vue 2.x相比较Vue 1.x而言，有个比较大的变化就是移除的组件的props的双向绑定功能。 在Vue1.x中利用props的twoWay和.sync绑定修饰符可以实现props的双向绑定功能，但在Vue2.x中彻底废弃了此功能，如果需要双向绑定需要自己来实现。 在Vue2中组件的props的数据流动为单向，由组件外通过组件的DOM属性传递props给组件内，组件内只能被动接收组件外传递过
2017-10-25 21:31:46
773
原创 Vue之父子、同级组件的通信详解
在组件的通信上vue2.0弃用1.0中dispatch和dispatch和broadcast的原因在于依赖组件树结构的事件流，当组件树变得很大时很难推理（简单地说：它不能在大型应用很好地扩展，我们不希望以后给你设置痛点）。dispatch和dispatch和broadcast不能解决同级组件之间的通信。 2.0中有两种方法可以完成组件直接的通信，一种是vuex，适合大型项目的组件管理(比较复杂暂不
2017-10-23 18:26:35
1241
原创 Js获取元素相对适口位置
getBoundingClientRect()方法返回一个矩形对象，包含四个属性：left、top、right和bottom，分别表示元素各边与页面上边和左边的距离。用法如下 let rect = element.getBoundingClientRect(); element为当前元素，获取其相对其位置数据的代码如下：rect.toprect.leftrect.rightrect.bot
2017-10-20 12:09:26
517
原创 Vue之ref与refs的使用
官方解释是：ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例： 如template里使用购物车组件 <shopcart ref="shopcart" ></shopcart>methods里就能使用refs来指向购物车组件的实例，比如定义在购物车组件里的dr
2017-10-20 11:54:02
2951
原创 Vue之过渡组件的钩子函数
vue的过渡组件一般是在css里面通过enter-active和leave-active来完成一个完整的过渡，但是在做比如饿了么将小球从选取食物的加好的那个图片的位置抛到购物车logo的栗子里只需要抛进去的动画不需要抛出来的，即小球抛入购物车只需要过渡动画的进入效果，就需要钩子函数来完成了，如下： 模板：<transition-group name="drop" @before-enter="be
2017-10-19 17:11:45
1723
原创 Vue之this.$nextTick()方法
vue组件里操作dom以及dom上的数据变化很频繁，this.$nextTick()这个方法作用是当数据被修改后使用这个方法会回调获取更新后的dom再render出来，如下例子： 在methods定义一个方法，这个方法来定义BScroll滚动轴插件可以点击，并且监听滚动轴位置：_initScroll () { this.menuScroll = new BScroll(this.$refs.m
2017-10-19 16:56:30
7521
原创 vue之滚动轴插件better-scroll
跟做慕课网的vue高仿外卖项目中用到了一个很好用的插件BScroll，用来计算左侧menu栏对应右侧foods栏相应显示的食物区，如果不用插件就比较费事了，因此这里分享一下这个插件的简单使用： 一，项目中下载，并引入 在配置文件package.json中引入版本"dependencies": { "better-scroll": "^0.1.7" }然后进入项目目录,打开cmd更新配
2017-10-16 18:11:15
1682
原创 Flex布局之学习笔记二
这篇讲的是容器里面元素的属性设置：1，orderorder: <integer>;定义元素的排列顺序。数值越小，排列越靠前，默认为02，flex-growflex-grow: <number>; /* default 0 */定义元素的放大比例，默认为0，即如果存在剩余空间，也不放大。3，flex-shrinkflex-shrink: <number>; /* default 1 */定义了元素的
2017-10-13 12:17:32
270
原创 Js之数组常用方法
总结了一下常用的操作数组的方法，代码如下：arr.join()用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。返回一个字符串。arr.pop()向数组末尾删除元素arr.push()向数组末尾添加新的元素，会返回新的数组长度arr.shift()删除第一个元素于数组开头arr.unshift()添加第一个元素于数组开头arr.reverse()翻转数组元素的排列顺
2017-10-13 11:49:39
551
原创 Flex布局之学习笔记一（容器属性）
flex布局又称弹性布局，是一种十分好用的网页布局方法，如果对低版本如ie浏览器等的兼容不苛刻用flex方法很合适，在学习阮一峰大神关于flex的博客中一部分知识点后总结了一下知识点一、display:flex设置后的影响设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。采用 Flex 布局的元素，称为 Flex 容器（flex container）。
2017-10-12 18:07:48
462
原创 vue之过渡效果
vue2.0内置有过渡组件，使用也很简单，如下栗子：组件<transition name="fade"> <div v-show="btn" class="detail"> 这里是组件 </div></transition>css（使用的是stylus预处理器，’&’表示父级）.detail transition: all .5s backg
2017-10-11 17:49:36
558
原创 vue之计算属性
在vue组件的模板中有很多需要通过计算来表达的地方使用计算属性十分方便，比如在外卖评价中常见的是一星到五星，这时候我们需要通过计算数据库传来的评分来判定这家店属于几星的范畴。 计算属性官网分为computed和methods两种，其中computed有使用之前缓存计算结果的功能只有相关依赖发生变化它才会重新产生结果，而methods则是每次都会重新计算即响应式 示例：computed: {
2017-10-11 17:40:28
407
原创 vue-cli之组件的简单使用
进入src目录下的components建立header.vue， 第一步，在App.vue中引入import header from './components/header/header';第二步，在App.vue中注册export default { components: { 'v-header': header } };第三步，在App.vue中使用<v-h
2017-10-10 11:53:19
2747
原创 vue-cli之router基本使用
1，在src目录下新建router目录，再建立index.jsimport Vue from 'vue';import VueRouter from 'vue-router';import goods from '@/components/goods/goods';Vue.use(VueRouter);export default new VueRouter({ routes: [
2017-10-10 11:36:30
1566
原创 vue之API—目录提示
费老大劲儿把vue的api目录加提示手打了一遍，加深印象！**全局配置**silent 取消vue所有日志警告devtools 配置是否允许vue-devtools检查代码。errorHandler 指定组件的渲染和观察期间未捕获错误的处理函数warnHandler 为vue运行时警告赋予一个自定义句柄ignore
2017-09-29 16:33:30
1400
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人