- 博客(61)
- 收藏
- 关注
RSS订阅原创 vue封装组件进阶
首先，我们需要解决一个问题就是效果图上的诸如产品名称、生产地、提交时间等固定的文字能否也是动态的，根据我们传入的数据来一一展示呢？初次封装可能就会把共同使用的html及css代码剪切到一个子组件中，通过父组件给子组件的传值来达到渲染的效果；创作代码时，经常会遇到需求出现相似的界面效果，但是里面循环的列表参数不一致，重新写的话会导致代码冗余。注释：上方代码中循环对象，第一个参数为对象的键值，第二的参数为对象的键，根据循环对象的键来获取循环数组对象的规定值。这样写不就是相当于把冗余的代码剪切到另外的文件吗！
2025-02-08 14:43:31
428
原创 vue3复制文本到粘贴板时携带文本的简单样式
项目中有复制文本的需求，以开始是使用navigator.clipboard方法，但是它只是把要复制的文本整合成字符串的形式，没有任何换行空格的形式，显然对于洋洋洒洒几百字的文本，复制阅读起来相当麻烦。那就想到用插件依赖来解决问题。正常npm下载以来后，
2024-11-12 11:39:47
222
原创 PC端查看历史消息，鼠标向上滚动加载数据时页面停留在上次查看的位置
数据更新时后，要获取数据更新前，位于滚动条最顶端的元素距离父元素里偏移距离，当然父元素要设置相对定位，这样才能获取目标元素的的偏移量offsetTop，也就是父元素滚动条要滚动的距离。这里设置的是第十个元素的偏移量，这里可以设置为接口返回的数据的长度。目前问题是解决了，但是是以vue2的基础上解决的，但是vue3也是可以完全使用的。
2024-11-03 16:29:07
384
1
原创 vue2控制打印机打印(三)
需要注意的是定义的LODOP是局部变量，而不是挂在到data里。本人之前也是挂载到data里，结果老是报错，说事件找不到，真是丈二和尚呀！该插件不需要npm install下载任何依赖，但是需要购买这个软件，并把项目部署到购买软件时填写的域名下，不然打印页的左右下角会有"第一个打包文件里有个LodopFuncs.js文件，这个需要放入到项目里面引入的。本人放在了utils文件里。首先到lodop官网下载相关的js文件和技术文档。如果打印时需要预览时需要再加上。打印控件Lodop进行操作的。
2023-12-22 15:52:51
958
原创 原生配置语音播报
查了查，看到网上有一种新奇的方法，就是利用audio标签来设计一种伪语音，也就是监听audio播报结束时更换audio的播放地址，如此循环来拼接成一段语音播报功能，瑕疵就是两段语音衔接得不太好，有明显的停顿，但是安卓是完全能用的，就是audio的MP3文件需要自己在MP3生成器中先生成好。首先编写代码时使用的是windows自带的语音播报JS，它可以将一串动态字符串进行播报，但是有个缺陷就是声音略无感情，只有女声，可以调节语调来更换播报的人声。这个可以动态设置需要播报的语音，基本上可以满足项目的需要。
2023-12-04 16:43:12
188
原创 vue3的一些注意事项
script首先，Vue3 新增了一个叫做组合式 api 的东西，英文名叫 Composition API。因此 Vue3 的script现在支持三种写法，正如你看到的那样，无论是代码行数，还是代码的精简度，的方式是最简单的形式。这种写法，让 Vue3 成了我最喜欢的前端框架。因为第一种写法的学习负担更小，先学第一种方式，掌握最基本的 Vue 用法，然后再根据我这篇文章，快速掌握 Vue3 里最需要关心的内容。第一种写法，跟过去 Vue2 的写法是一样的，所以我们不过多介绍。
2023-10-07 11:56:59
270
原创 滚动条样式更改
:-webkit-scrollbar-track-piece 内层滚动槽。::-webkit-scrollbar-button 滚动条两端的按钮。::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的。::-webkit-scrollbar-thumb 滚动的滑块。::-webkit-scrollbar-track 外层轨道。::-webkit-scrollbar-corner 边角。::-webkit-resizer 定义右下角拖动块的样式。
2023-08-14 09:50:09
601
原创 使用高德地图获取浏览器的定位
打开浏览器时，获取浏览器的定位。再谷歌浏览器中测试，常常出现请求时间超时的情况，在IE浏览器就能完美运行，不知道有没有好的替代方案。
2023-06-28 10:37:28
432
原创 vue使用自定义动画，写个倒计时动画
当需要有个提示框，倒计时几秒后自动跳转页面，单纯的写个setinterval，从几秒减到0再跳转，虽然能满足需求，但是效果不太好。找事的老板就提出优化一下，此时内心万马奔腾。想到用animation自定义动画，写个倒计时，就是数字从小变大，再慢慢消失，再到下一位数字从小变大，如此循环。
2023-06-28 10:19:26
514
原创 更改高德地图自定义数据范围
这个问题，我想到在高德地图绘制一个透明的圆来作为用户查看数据的范围，在圆内显示部分数据，当用户点击圆范围之外的地图的话，以点击的位置的坐标作为圆范围的中心，以达到修改显示范围的目的，如此，每次高度地图只渲染部分数据，加快了页面的加载速度，还解决了图标过多，显得页面过于凌乱。在项目中遇到用高德地图中绘制海量图标，但是如果数据量太多的话，一次性绘制大量的图标marker，导致页面加载速度很慢。
2023-06-27 18:17:55
547
原创 关于swiper轮播插件的问题
每当滚动到最后一条数据的时候，就停止了，到官网上也没找出来什么问题，该有的设置都有，死活不头尾衔接滚动，没办法，到百度问问，还真的找到了问题所在。由于我用的是jquery，在请求数据后，将数据循环放入html模板字符串，再把字符串放入body里， 初始化swiper， 再添加到swiper本体里面，这样就能出来首位衔接轮播的效果，之前就是没有按照这个流程来的。这个swiper是复制要循环轮播的第一条数据放在队尾，以达到首位衔接，也就是说一定要把数据和html放到body里，可以显示，再初始化swiper！
2023-05-11 09:45:54
190
原创 关于在小程序里跳转关联的公众号
目标二则是解决小程序承接公众号的内容，首先在项目中新建问webView文件及webView为名的四个文件，在H5页面添加url标签用以跳转到公众号页面，至于跳转的链接最好不要用路由传参的形式，毕竟传参大小限制，可以用本地离线缓存解决。这样就完美实现了需求。小程序自带的标签虽然能够检测用户是否关注公众号以显示不同的按钮内容，但是这个功能有很大限制，必须是在特殊的场景进入才能使用标签，比如通过扫描小程序二维码进入小程序；
2023-03-06 15:59:29
960
原创 JS的小结
4、箭头函数中 this 的指向不同：在普通函数中，this 总是指向调用它的对象，如果用作构造函数，它指向创建的对象实例。5、箭头函数不具有 arguments 对象：每一个普通函数调用后都具有一个。arguments 对象，用来存储实际传递的参数。但是箭头函数并没有此对象。3、箭头函数不能用于构造函数：普通函数可以用于构造函数，以此创建对象实例。2、 箭头函数全都是匿名函数：普通函数可以有匿名函数，也可以有具名函数。1、外形不同：箭头函数使用箭头定义，普通函数中没有。
2022-10-24 18:11:17
110
原创 animatioan自定义动画
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。您必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。指定至少这两个CSS3的动画属性绑定向一个选择器：规定动画的名称、规定动画的时长。为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。创建动画，把它绑定到一个选择器，否则动画不会有任何效果。动画是使元素从一种样式逐渐变化为另一种样式的效果。0% 是动画的开始，100% 是动画的完成。......
2022-08-26 16:18:04
257
原创 transform2D变换
transition-timing-function 指定过渡效果（ease溶解效果；ease-out淡出；ease-in淡入；ease-in-out淡入淡出效果）transition-property 指定过渡的属性 all表示全部。transition-duration 指定过渡时间。transition-delay 指定过渡延迟。transition：all 过渡时间 过渡延迟。取值范围0~1，超出则放大。正值向左上方平移，负值向右下方平移。拉伸旋转，不会超出高度。...
2022-08-17 23:29:13
254
原创 CSS3样式小计
rem是CSS3新增的一个相对字体长度单位，只想对于根元素，即HTML元素字体大小。em是相对字体长度单位，如果用于font-size属性本身，则是相对于父元素的font-size。em的值不是固定的；任意浏览器的默认字体大小都是16px，所有未经调整的浏览器都符1em=16px。em是继承父元素的字体大小，可是当父元素字体大小改变时，其本身的大小则是另一个值。在CSS的body选择器中声明font-size=62.5%，再将你需要的原来的px数值除以10，然后换上em作为单位，这是其简便的做法。...
2022-08-16 19:16:20
126
原创 原生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.
2022-05-18 15:12:12
1131
原创 上传文件及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=""
2022-05-11 09:58:30
291
转载 微信小程序拒绝获取定位后如何再次获取
wx.getLocation({ success: res => { console.log(res); }, fail: e => { console.log(e); // 判断用户是否拒绝了授权 wx.getSetting({ success: res => { if (typeof(res.authSetting['scope.userLocation']) != 'undefined' && .
2022-03-03 18:46:07
2118
原创 利用demo的源码及注释，详细解释Vuex的使用
<body> <div class="app"> {{one}} <div>{{count}}</div> <!-- 15、状态变更 --> <div>{{muTwoState}}</div> <!-- 24、响应式渲染 --> <div>{{ stateTempt }}</div>.
2021-12-08 11:19:47
460
原创 对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.
2021-12-07 16:05:05
302
转载 VueX的mutations、actions
一、更改Vuex的store中的状态的唯一方法是提交mutation。Vuex中的mutation非常类似于事件：每个mutation都有一个字符串的事件类型和一个回调函数，这个回调函数就是我们实际进行状态更改的地方，并且他会接受state作为第一个参数。1、提交载荷可以向store.commit传入额外的参数，即mutation的载荷mutations：{ increment(state,n){ state.count += n ...
2021-12-06 17:39:56
1789
转载 Vuex的state、getter总结(根据官网的一些总结和自己的一些理解)
一、state1、由于我们期望的是获得的状态是响应的，所以我们最好在组件的计算属性中用return，返回所用的状态值。2、将store注入到根组件(app)中(跟methods一致)，根组件及以下的所有子组件就都能使用store里的状态值，(this.$store.state.具体字段)。3、当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为解决这个问题，我们可以使用mapState辅助函数帮助我们生成计算属性 computed:mapS...
2021-11-30 16:32:25
963
原创 搜索内容在显示区高亮显示
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 ...
2021-11-03 10:54:50
82
原创 前端知识总结
1.每个HTML文件里面都有一个很重要的东西，Doctype，知道这是干什么的么？答：<!DOCTYPE>声明位于文档中最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。（重点：告诉浏览器按照何种规范解析页面）2.常用浏览器有哪些，内核都是什么？答： 常用浏览器有chrome、safari、 IE、火狐(firefox) 、 Opera 、360、搜狗等 浏览器 内核 备注
2021-10-28 09:42:50
7551
原创 mapstate，mapmutations，mapactions
mapState通过扩展运算符将store.state.orderList 映射this.orderList 这个this 很重要，这个映射直接映射到当前Vue的this对象上。所以通过this都能将这些对象点出来，同理，mapActions, mapMutations都是一样的道理。牢记~~~用例...
2021-10-21 10:24:45
120
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人