var_let_const的博客

原创 用原生js和transform动画手撸一个轮播图

手撸轮播头图

原创 vue2控制打印机打印(三)

需要注意的是定义的LODOP是局部变量，而不是挂在到data里。本人之前也是挂载到data里，结果老是报错，说事件找不到，真是丈二和尚呀！该插件不需要npm install下载任何依赖，但是需要购买这个软件，并把项目部署到购买软件时填写的域名下，不然打印页的左右下角会有"第一个打包文件里有个LodopFuncs.js文件，这个需要放入到项目里面引入的。本人放在了utils文件里。首先到lodop官网下载相关的js文件和技术文档。如果打印时需要预览时需要再加上。打印控件Lodop进行操作的。

原创 vue2控制打印机打印(二)

打印

原创 vue2控制打印机打印(一)

打印机

原创 原生配置语音播报

查了查，看到网上有一种新奇的方法，就是利用audio标签来设计一种伪语音，也就是监听audio播报结束时更换audio的播放地址，如此循环来拼接成一段语音播报功能，瑕疵就是两段语音衔接得不太好，有明显的停顿，但是安卓是完全能用的，就是audio的MP3文件需要自己在MP3生成器中先生成好。首先编写代码时使用的是windows自带的语音播报JS，它可以将一串动态字符串进行播报，但是有个缺陷就是声音略无感情，只有女声，可以调节语调来更换播报的人声。这个可以动态设置需要播报的语音，基本上可以满足项目的需要。

原创 格式化时间

【代码】格式化时间。

原创 vue3的一些注意事项

script首先，Vue3 新增了一个叫做组合式 api 的东西，英文名叫 Composition API。因此 Vue3 的script现在支持三种写法，正如你看到的那样，无论是代码行数，还是代码的精简度，的方式是最简单的形式。这种写法，让 Vue3 成了我最喜欢的前端框架。因为第一种写法的学习负担更小，先学第一种方式，掌握最基本的 Vue 用法，然后再根据我这篇文章，快速掌握 Vue3 里最需要关心的内容。第一种写法，跟过去 Vue2 的写法是一样的，所以我们不过多介绍。

原创 vue将链接转换成二维码图片

【代码】vue将链接转换成二维码图片。

原创 滚动条样式更改

:-webkit-scrollbar-track-piece 内层滚动槽。::-webkit-scrollbar-button 滚动条两端的按钮。::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的。::-webkit-scrollbar-thumb 滚动的滑块。::-webkit-scrollbar-track 外层轨道。::-webkit-scrollbar-corner 边角。::-webkit-resizer 定义右下角拖动块的样式。

原创 使用高德地图获取浏览器的定位

打开浏览器时，获取浏览器的定位。再谷歌浏览器中测试，常常出现请求时间超时的情况，在IE浏览器就能完美运行，不知道有没有好的替代方案。

原创 vue使用自定义动画，写个倒计时动画

当需要有个提示框，倒计时几秒后自动跳转页面，单纯的写个setinterval，从几秒减到0再跳转，虽然能满足需求，但是效果不太好。找事的老板就提出优化一下，此时内心万马奔腾。想到用animation自定义动画，写个倒计时，就是数字从小变大，再慢慢消失，再到下一位数字从小变大，如此循环。

原创 更改高德地图自定义数据范围

这个问题，我想到在高德地图绘制一个透明的圆来作为用户查看数据的范围，在圆内显示部分数据，当用户点击圆范围之外的地图的话，以点击的位置的坐标作为圆范围的中心，以达到修改显示范围的目的，如此，每次高度地图只渲染部分数据，加快了页面的加载速度，还解决了图标过多，显得页面过于凌乱。在项目中遇到用高德地图中绘制海量图标，但是如果数据量太多的话，一次性绘制大量的图标marker，导致页面加载速度很慢。

原创 vscode使用git对代码进行管理

git

原创 开发中的高德地图简单应用

高德地图应用

原创 关于swiper轮播插件的问题

每当滚动到最后一条数据的时候，就停止了，到官网上也没找出来什么问题，该有的设置都有，死活不头尾衔接滚动，没办法，到百度问问，还真的找到了问题所在。由于我用的是jquery，在请求数据后，将数据循环放入html模板字符串，再把字符串放入body里， 初始化swiper， 再添加到swiper本体里面，这样就能出来首位衔接轮播的效果，之前就是没有按照这个流程来的。这个swiper是复制要循环轮播的第一条数据放在队尾，以达到首位衔接，也就是说一定要把数据和html放到body里，可以显示，再初始化swiper！

原创 关于在小程序里跳转关联的公众号

目标二则是解决小程序承接公众号的内容，首先在项目中新建问webView文件及webView为名的四个文件，在H5页面添加url标签用以跳转到公众号页面，至于跳转的链接最好不要用路由传参的形式，毕竟传参大小限制，可以用本地离线缓存解决。这样就完美实现了需求。小程序自带的标签虽然能够检测用户是否关注公众号以显示不同的按钮内容，但是这个功能有很大限制，必须是在特殊的场景进入才能使用标签，比如通过扫描小程序二维码进入小程序；

原创 适用于移动端个人页的功能分类导航(仅页面)组件封装

个人页功能分类组件封装

原创 适用于简单表格展示的组件封装

table组件封装

原创 JS的小结

4、箭头函数中 this 的指向不同：在普通函数中，this 总是指向调用它的对象，如果用作构造函数，它指向创建的对象实例。5、箭头函数不具有 arguments 对象：每一个普通函数调用后都具有一个。arguments 对象，用来存储实际传递的参数。但是箭头函数并没有此对象。3、箭头函数不能用于构造函数：普通函数可以用于构造函数，以此创建对象实例。2、 箭头函数全都是匿名函数：普通函数可以有匿名函数，也可以有具名函数。1、外形不同：箭头函数使用箭头定义，普通函数中没有。

原创 animatioan自定义动画

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。您必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。指定至少这两个CSS3的动画属性绑定向一个选择器：规定动画的名称、规定动画的时长。为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。创建动画，把它绑定到一个选择器，否则动画不会有任何效果。动画是使元素从一种样式逐渐变化为另一种样式的效果。0% 是动画的开始，100% 是动画的完成。......

原创 transform2D变换

transition-timing-function 指定过渡效果（ease溶解效果；ease-out淡出；ease-in淡入；ease-in-out淡入淡出效果）transition-property 指定过渡的属性 all表示全部。transition-duration 指定过渡时间。transition-delay 指定过渡延迟。transition：all 过渡时间 过渡延迟。取值范围0~1，超出则放大。正值向左上方平移，负值向右下方平移。拉伸旋转，不会超出高度。...

原创 浮动详细内幕特性

浮动详细内幕特性

原创 CSS3样式小计

rem是CSS3新增的一个相对字体长度单位，只想对于根元素，即HTML元素字体大小。em是相对字体长度单位，如果用于font-size属性本身，则是相对于父元素的font-size。em的值不是固定的；任意浏览器的默认字体大小都是16px，所有未经调整的浏览器都符1em=16px。em是继承父元素的字体大小，可是当父元素字体大小改变时，其本身的大小则是另一个值。在CSS的body选择器中声明font-size=62.5%，再将你需要的原来的px数值除以10，然后换上em作为单位，这是其简便的做法。...

原创 原生AJAX请求获取二进制文件流

const temptArr = [] this.multipleSelection.map(val => { temptArr.push(val.id) }) // console.log(this.$store.state.user.token) let take = this.$store.state.user.token const xhr = new XMLHttpRequest() const fil.

原创 上传文件及Excel表格

上传文件夹用的是原生组件<input ref="fileRef" type="file" name="file" webkitdirectory @change.stop="change">change() { console.log(this.$refs.fileRef.files)// 文件列表},上传excel表格用的是element+vue<el-upload class="upload-demo" drag action=""

转载 微信小程序拒绝获取定位后如何再次获取

wx.getLocation({ success: res => { console.log(res); }, fail: e => { console.log(e); // 判断用户是否拒绝了授权 wx.getSetting({ success: res => { if (typeof(res.authSetting['scope.userLocation']) != 'undefined' && .

原创 app打包

测试打包在uniapp中，点击发行--->原生App-云打包--->

原创 微信开放平台

微信开放平台微信第三方审核微信体验版的发布-在uniapp运行至微信小程序，点击上传-查看体验版二维码！

原创 利用demo的源码及注释，详细解释Vuex的使用

<body> <div class="app"> {{one}} <div>{{count}}</div> <!-- 15、状态变更 --> <div>{{muTwoState}}</div> <!-- 24、响应式渲染 --> <div>{{ stateTempt }}</div&gt.

原创 对VueX的状态管理进行模块化的简单模板

在store文件夹中有四个js文件actions.js、index.js、mutations.js、state.js入口文件 index.js文件中import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)import state from "./state";import mutations from './mutations';import actions from './actions';export defaul.

转载 VueX的mutations、actions

一、更改Vuex的store中的状态的唯一方法是提交mutation。Vuex中的mutation非常类似于事件：每个mutation都有一个字符串的事件类型和一个回调函数，这个回调函数就是我们实际进行状态更改的地方，并且他会接受state作为第一个参数。1、提交载荷可以向store.commit传入额外的参数，即mutation的载荷mutations：{ increment(state,n){ state.count += n ...

转载 Vuex的state、getter总结(根据官网的一些总结和自己的一些理解)

一、state1、由于我们期望的是获得的状态是响应的，所以我们最好在组件的计算属性中用return，返回所用的状态值。2、将store注入到根组件(app)中(跟methods一致)，根组件及以下的所有子组件就都能使用store里的状态值，(this.$store.state.具体字段)。3、当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为解决这个问题，我们可以使用mapState辅助函数帮助我们生成计算属性 computed:mapS...

原创 搜索内容在显示区高亮显示

search() { this.arr = [] let tempt = [] let obj = JSON.parse(JSON.stringify(this.list)) obj.map((item,index)=>{ if(item.name.search(this.key) != -1){ tempt.push(item) } }) tempt.map(item=>{ let str = '<span ...

原创 前端知识总结

1.每个HTML文件里面都有一个很重要的东西，Doctype，知道这是干什么的么？答：<!DOCTYPE>声明位于文档中最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。（重点：告诉浏览器按照何种规范解析页面）2.常用浏览器有哪些，内核都是什么？答： 常用浏览器有chrome、safari、 IE、火狐(firefox) 、 Opera 、360、搜狗等 浏览器 内核 备注

原创 mapstate，mapmutations，mapactions

mapState通过扩展运算符将store.state.orderList 映射this.orderList 这个this 很重要，这个映射直接映射到当前Vue的this对象上。所以通过this都能将这些对象点出来，同理，mapActions, mapMutations都是一样的道理。牢记~~~用例...

原创 uniapp撰写app调用手机摄像头拍摄图片及选择相册图片

<template> <view class="inner"> <view class="content"> <image :src="imageList"></image> <view class="btn" @click="getPho()"> 点击拍照 </view> .

原创 uniapp实现小程序的分享功能

HTML<button open-type="share"></button>JSonShareAppMessage(){ return { title:'测试项目', path:'/Index' }} //与methods同级

原创 border样式

原创 cssText

cssText 的本质就是设置 HTML 元素的 style 属性值。在某些浏览器中（比如 Chrome），你给他赋什么值，它就返回什么值。在 IE 中则比较痛苦，它会格式化输出、会把属性大写、会改变属性顺序、会去掉最后一个分号一般情况下我们用js设置元素对象的样式会使用这样的形式：var element= document.getElementById(“id”);element.style.width=”20px”;element.style.height=”20px”;element.st

原创 uniapp路由和页面的重定向

【1】uni.navigateTo(OBJECT): 保留当前页面, 重置到应用内的某个页面 1.保留当前页面, 重置到应用内的某个页面, 使用uni.navigateBack可以返回到原页面 2.可以传递参数, 接受参数时, 使用钩子函数onLoad【2】uni.redirectTo:关闭当前页面, 跳转到应用内的某个页面 1.关闭当前页面, 跳转到应用内的某个页面 2.可以传递参数【3】uni.reLaunch:关闭所有页面, 打开到应用内的某个页面...