- 博客(66)
- 收藏
- 关注
RSS订阅原创 将色号转为 不同透明度
适用场景： 项目通过 跳转链接 得到项目的主题色 此方法可以将主题色号处理为 多种 透明度的 不同颜色 配合主题使用。参数 #16d6ce(需要改变的色号) 1至0（0.8,0.9都可以 结果色号是原色号的多少浓度）
2023-08-09 22:44:55
289
原创 eventBus实现事件订阅发布
简单来讲eventBus就是通过Vue来构个Vue对象将其导出 哪里要使用 就 import 引入到该文件。然后就是发布事件 和 监听 事件了类似于父子组建之间 通过 $emit() 发布事件 $on来监听事件。或者可以直接全局注册到 项目的Vue实例上。main.js 注册到全局。事件监听 放到created中。
2022-10-24 18:17:39
235
原创 VUE-Router前置理由守卫实现账号登陆页面访问权限权限
addRoutes就是用于往我们正在使用的已经 注册到路由上的路由表上添加新的路由 （将新的路由添加到路由中） 好像叫 动态路由。主要是使用全局路由前置守卫（router.beforeEach）this.$router.addRoutes()的用法。首先你得将创建好一个路由表 在添加的地方倒入。或者直接在方法中写一个路由表。
2022-10-21 17:00:32
379
原创 vue 自定义指令
vue2的自定义指令有如下几个生命周期bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新生命周期钩子接受一下几个参数el：指令所绑定的元素，可以用来直接操作 DOM。binding。
2022-10-09 23:41:51
223
原创 uni-app 手机App中使用map（高德地图）自定义地图样式
首页 | 高德控制台高德开放平台官网控制台提供了高德开发者Key管理，Key可视化分析等功能。创建一个地图。
2022-09-22 22:53:19
2459
原创 判断一个对象是否存在某个属性
这里有一个特殊情况 如果这个属性实际上是存在的 且值就是undefined。返回一个布尔值 只判断该对象自身的属性 不会去查找原型链上的属性。OBJ.*** 或者 OBJ[***] 去访问该属性。如果不存在就会返回undefined。OBJ.hasOwnProperty(’属性‘)这个方法可以查找原型链上的属性。该方法也是会查找原型链上的属性。
2022-09-21 20:43:52
385
原创 ant desing 加 Vue-il18n 实现中英文切换（完全实现 还得后端配合）
我们在 App.vue中用 标签将 包裹起来。但是如果你有用到组建库什么的组件库的 字符该怎么替换 这是就要用到组件库为我们准备的切换组件了。后台配合 主要是接口返回的字符串什么的 也得为英文（在请求头中添加页面当前语言状态）ant desing 自带切换中英文的组建套在项目最外层即可（传递属性控制）模板替换 和一般的变量差不多（大概三种用法）到这就能实现基本的字符串切换。
2022-08-19 15:47:17
667
原创 防抖函数（随手记录）
解释 一段时间内无论发起多少次命令只执行最后一次发出的命令。主动触发的函数（将我们要执行的函数 和延迟时间传入 ）防抖函数（接收一个方法 和一个 延迟时间）
2022-08-11 22:10:41
94
原创 微信小程序七牛云 图片（文件）上传预览
具体实现过程是先获取到公司后台生成的 token 再使用uni-app的api获取到图片地址 本地保存一份图片本地地址 然后调用qiniuUploader.upload 上传图片 吧token 等参数带进去 上传完成后 （我这里是直接拼接地址得到上传后的图片地址）得到地址。由于本地页面响应速度比服务器反应快所以 创建一个数组 来存放本地图片地址。最近在公司对接了一个文件上传到七牛云的项目。这里用到了两个uni-app的方法。...
2022-08-11 22:01:16
1427
原创 css一些选择器
css选择器选中delete-tail-margin 下的 最后一个div选中delete-tail-margin 下的 第三个div寻找父组件的中的第一个 p元素p:first-of-type寻找父组件的中的最后一个 p元素p:last-of-type寻找父组件的中的第3个 p元素p:nth-of-type3)......
2022-08-10 10:54:55
52
原创 JS 错误捕获
全局监听错误当JS运行时错误发生时，window会触发一个ErrorEvent接口的error事件。try/catch/finally语句用于处理代码中可能出现的错误信息。该方法不能捕获Promise中的错误。
2022-07-28 18:03:15
2885
原创 Vue2 全局方法注册
全局注册方法注册以后可以在vue项目任意的script标签中使用可以用于注册一些公共的方法方便调用。二.在main.js文件中引入该方法使用Vue.prototype注册到Vue实例上。一.首先你可在src目录下任意创建一个.JS文件在该文件中。我这边随便写了个方法使用export导出该方法。三.在项目中使用（与其他方法没有什么差异）...
2022-07-19 22:33:09
629
原创 微信小程序 域名限制问题（更新可用域名，无法正常访问）
今天将公司的小程序功能迭代更新后真机测试没有任何问题，结果上传到测试环境就无法正常运行（无法调用接口）询问老大才得知 得配置 服务器域名白名单才能使用新的域名接口其实解决方法很简单 一 打开微信小程序开放平台 >>> 开发管理 >>> 开发设置 >>> 服务器域名 需要管理员扫码 才能添加配置添加完成后如果还是不能正常访问 则需要将小程序的缓存清除重新加载 将小程序图标长按拖到下边删除掉即可，清除缓存...
2022-07-12 21:23:27
3332
原创 uni-app 配置 以及 使用微信云函数
aiwendnagphonenumber.getPhoneNumber | 微信开放文档 获取手机号方法云调用 | 微信开放文档 云调用教程文档配置云调用权限，每个云函数需要声明其会使用到的接口，否则无法调用微信文档介绍 3.在根目录中创建文件文件内容我在 1.操作 中的文件名称为 functions 所以下列代码 路径文件请按照自己的情况更改二。编译环境 配置1.在项目中安装依赖2.在我们创建的 functions文件下找到我们创建的 getPhone文
2022-07-08 14:52:26
4133
1
原创 css分散对齐
在开发过程中一般会遇到表单之类的东西 但是表单的提示文字一般要对齐 （如下图）使用text-align-last:justify; width: 200px; border: 1px solid red; text-align-last: justify;
2022-05-20 00:10:49
2253
原创 图片底部间隙问题
因为图片是行内元素，默认的图片对齐方式为vertical-align:baseline 基线对齐。baseline对其方式导致图片并不是与div的真实底部对齐，而是与文基线对齐。文基线就是字母x的下边缘，即使没有文字，也会有空隙解决方法·一将图片父元素字体大小设置为0font-size:0;解决方法二将图片设置为块级元素display: block;...
2022-05-19 23:56:02
65
原创 运用 ant 图片上传组建 实现pc端图片预览
最后效果展示效果（样式用样式穿透自己可调）点击预览效果这里css得做个样式穿透 因为ant自带一个删除功能将垃圾桶图标取消显示.img{ /deep/.ant-upload-list-item{ //宽高设置 margin:0; padding: 0; width: 40px; height: 40px; } /deep/....
2022-05-11 14:21:49
1502
2
原创 Vue中 全局监听键盘触发事件 和 弹窗遮罩层
今天写了几个弹窗组建，因为ui样式原因没有用 组件库 自己手写了几个弹窗自带遮罩层（防止出现多个弹窗和误触）实现代码<template> <div class='mask'> 弹窗内容 </div></template><style>.mask{ width: 100%; height: 100%; position: fixed; bottom: 0; left: 0;.
2022-04-26 17:55:43
779
原创 Promise.all使用
简单的说Promise.all可以同时处理多个异步事件注意项如果一个承诺失败，那么所有其他承诺都会失败， 然后Promise.all被拒绝。这个例子 如果我们传入的参数 是[1000，2000，3000]则会有一个异步方法执行错误 导致整个Promise.all 失败durations = [1000, 2000, 3000] promises = []this.durations.map((item) => { item.push(this.method(durati
2022-04-22 18:03:31
417
原创 Ant Desing 单选框 和 级联选择 树节点 搜索功能
记录一下单选:filterOption="filterOption" 这个属性才是搜索的关键<a-select v-model="form.space" show-search :filterOption="filterOption" style="width: 10vw" label-in-value :placeholder="th
2022-04-15 17:37:39
904
原创 Ant Desing 级联选择 自定义 options 中 label name children 的字段
前几天写了个级联选择，由于后台返回的数据 与组件的自定义匹配不吻合 所以得自定义 匹配字段fieldnames属性可以解决此问题由于怕忘记所以这里记录一下其用法label 是匹配显示的字段value是其返回值children是选项的 子选项 能使组件遍历到子选项...
2022-04-15 10:22:21
1184
原创 一串字符得到该字符串最多的字符
我大概用到了 数组的 split 和 reduce 方法 和对象的 for in 方法直接上代码let str = 'qqqqqwwwwweeeeerrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr'let arr = str.split('')console.log(arr)let obj = arr.reduce((pre,item)=>{ if(!pre[item]){ pre[item] = 1 }else{ ..
2022-04-02 18:10:42
566
原创 AntDesign table 子菜单应用
话不多说先上效果图实现是用的两层table嵌套html结构</a-button> <a-table :expandRowByClick='true' :columns="columns" :data-source="data" class="components-table-demo-nested"><!-- 编辑--> <a slot="operation1" s
2022-03-18 09:55:46
462
原创 antd阻止组件冒泡的一种方法
在组件上加 .stop 是没用的可以在组件外边加上一个标签 标签属性上@click.stop就可以阻止冒泡事件了<!-- 是否选中--> <a slot="operation2" slot-scope="text" @click.stop> <a-switch default-checked @change="onChange" :defaultChecked='false' /> </a&...
2022-03-17 15:19:30
3176
原创 flex布局写一个骰子
HTML结构<body> <div class='box'> <div class='item'></div> <div class='item'></div> <div class='item'></div></div>css.box{ width:90px; height:90px; border: 5px solid black; b
2022-03-03 18:05:00
77
原创 解决uni-app弹出键盘导致页面的底部被挤压，导致变形
官方的aip用了，但是好像没有效果（不知道是不是我的问题，可能是我的页面底部是组件的原因）索性就另辟蹊径，我的思路是监听屏幕高度来控制data(){ return{ // 获取频幕高度 documentHeight: document.documentElement.clientHeight, }}mounted(){ window.onresize = () => { return (() => {
2022-02-28 11:51:16
1370
1
原创 JSON.parse()和JSON.stringify()
stringify()用于从一个对象解析出字符串JSON.parse()是用于从一个字符串中解析出json对象他们都不会修改原数据举个例子stringify()parse()基本的原理了解了我们还可用于拷贝对象JSON.parse(JSON.stringify(obj))利用JSON.stringify 将js对象序列化（JSON字符串），再使用JSON.parse来反序列化(还原)js对象例子深拷贝后打印出类型和进行原型链地址比较可以看到原型.
2022-02-11 18:10:43
325
原创 ant Design 表单以及表单验证
今天写了个修改密码的功能，随便记录一下效果图html代码<div> <a-modal v-model="visible" title="修改密码" on-ok="handleOk"> <template slot="footer"> <a-button key="back" @click="handleCancel"> 取消 </a-button>
2021-12-22 17:14:43
2994
原创 Ant design按需引入
直接上代码首先npm i --save ant-design-vue创建一个js文件 引入和注册所要用到的组件AntDesign.js// 自己引入要使用的组件import { Button,Layout,Menu,Icon,Avatar,Dropdown,List,Table,Divider,Tag} from 'ant-design-vue'import Vue from "vue";Vue.use(Button);Vue.use(Layout);Vue.use(Me.
2021-12-21 15:02:27
976
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人