- 博客(151)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 写一个只允许输入身份证号的正则表达式
没有做校验 X 只能输入在最后一位，请大神知道，本人正则很水。只允许输入数字和大写字母A-Z。身份证号中存在带X的情况。
2023-06-09 09:10:31
281
转载 纯JS前端分页方法（JS分页）
如后台传回的数据条数非常多，达到几千条甚至上万条，但是后台又不方便分页传回数据，这个时候就只能前端先获取所有数据保存下来，然后前端本地进行分页并渲染显示。1、JS分页函数：开发过程中，分页功能一般是后台提供接口，前端只要传page（当前页码）和pageSize（每页最大显示条数）及对应的其他查询条件，就可以返回所需分页显示的数据。原创博客禁止抄袭，原文地址:https://www.cnblogs.com/xiao-pengyou/只需要传入对应参数就可以返回带有对应分页属性的对象，用于前端界面展示。
2023-05-15 14:44:55
2091
1
原创 iOS APP中，长按复制，剪切的提示改为中文
2. 如下图，在info中添加 Localized resources can be mixed，并把值改为 YES。在另一个博主的原文中进行到这一步就结束了，但是亲测无效，我多加了下一步。写在前面：借鉴了两位大佬的文章进行结合，得到了我想要的结果。1. 将项目用xcode打开，如下图。
2023-05-11 16:56:04
560
原创 Vue实现实现一个带底部标识的横向滚动导航栏
此文章参考了 csdn 中另外两位大佬的文章，在他们的基础上又加上自己的写法。地址1： 这个是 uniapp 实现的uniapp： 实现一个优美的带底部标识的横向滚动导航栏_uniapp横向滚动导航条_CC#的博客-CSDN博客仿淘宝菜单栏左右滑动（VUE 移动端）_计算菜单分类滚动距离_浅暖呀丶的博客-CSDN博客。
2023-04-24 09:52:08
1366
原创 记录一下 overflow-x 出现无法超出宽度出现滚动条的问题
对比了一下之前写的，好像是 设置了 overflow-x 的盒子内的 子级不能固定 宽度，写了好多次，今天去写又卡住了，咋写不生效，心想不科学啊也不是第一次用。我用的 width 不生效，改成 min-width 完美解决。
2023-04-23 13:55:29
437
原创 vite 更改 dist 存放的路径
vue项目执行 npm run build 后会生成一个 dist 文件夹，这个文件夹默认存放在项目最外层目录，项目下 vite.config.js，记录一下更改存放位置的方法。
2023-02-14 15:49:56
2372
原创 css定位时使用transform: translateX(-50%)水平居中
用于一个没有父级的元素 ，定位后水平居中，上代码、简单记录一下，每次用都会忘记。
2023-02-14 09:44:58
682
原创 vantUI4.0中datePicker渲染不出来报错values.map is not a function
最近在使用vantUI适配vue3的4.0版本时，日期组件老是渲染不出来，报这个错，意思是绑定值格式不对，但是我绑定的是按照官方文档的数组形式，代码如下。解决方法：van-field 的v-model和日期选择器的v-model不要用同一个。到这里依旧报错，折磨了我一天，后面突然发现，我在上面的input输入框中也绑定了。（这里我的写法依然是vue2，这不重要）导致直接把格式给我改了。
2023-02-03 17:17:48
1318
2
原创 vue3中使用 v-viewer 插件报错未定义的属性: Cannot set properties of undefined (setting ‘$viewer），和基本使用。
在网上搜了很久也没解决这个问题，在vue2中是不会报错的，后面查看官方文档和百度了几个小时以后，终于解决了，（我个人解决了，版本原因）。因为是 vue3，所以不能直接使用 Vue.use。1.先在main.js 引入。接着安装 viewerjs。
2022-10-08 16:23:05
3725
14
原创 小程序中自定义行内左滑按钮，类似于qq和wx消息界面那种
平常在使用QQ或者WX聊天，在消息列表中某一项左滑，会出现几个操作按钮，什么置顶啊，标记未读等等，下面用原生小程序实现一下这个功能
2022-07-04 11:33:43
464
原创 微信小程序中，从一个页面跳转到另一个页面后，在返回后发现页面同步滚动了
最近项目中有一个bug，在一个组件中引入了另一个组件，假设这两个组件名称分别为 A 和 B我在A页面的顶部点击跳转到B页面，在B页面滚动到底部，选取了一个值自动返回A（或者点击顶部返回键返回到A），这时候会发现A也滚动到了最底部。在这里多提一句，一般正常的返回键是小程序自带的，正常返回也不会有这个问题，仅供参考！...
2022-06-27 14:28:24
761
原创 在 uniapp 中使用 阿里巴巴矢量图标
最近要求，使用一下阿里巴巴矢量图标来替换掉项目中的某些小图片。一方面 矢量图不会失真，另一方面占用空间小了，所以去网上百度了一下，最后实现了效果，在这里分享一下我的使用过程1.到官网，登录，没有账号的话就注册一个：iconfont-阿里巴巴矢量图标库2.搜索自己想要的图标，并加入购物车中3. 点击右上角 购物车 图标，打开购物车4.点击下载代码，把下载下来的文件解压出来5. 目前我下载的，解压出来以后，文件都是默认存放在font_i5lcy3k..
2022-04-11 18:31:22
3697
原创 运行 cmd 命令报错operation not permitted, mkdir D:\nodejs\node_cache\_cacache\tmp， Error: EPERM: opera
今天在初次下载好 node.js 配置好之后，使用cmd安装 vue Cli 脚手架时一直在报错，说是权限不够，在百度找了很久，后面确实在 c盘下使用管理员身份运行可以解决，但是太麻烦了，下面说一下我个人的解决方法1.找到node.js的文件夹所在位置，右击文件夹选择属性2.点击 安全， 选择 user 点击 编辑3. 在下面的权限中，勾选 完全控制，点击确定...
2022-04-11 15:27:50
3443
1
转载 使用vuecli工程开发-组件，安装vuecli脚手架构建工具(vuecli脚手架的全局安装)
安装vuecli脚手架构建工具一、 node安装(1）如果不确定自己是否安装了node,可以在命令行工具内执行： node -v （检查一下 版本）；(2）如果 执行结果显示： xx 不是内部命令，说明你还没有安装node , node 安装地址：http://nodejs.cn/download/注 ：安装 vue-cli 脚手架目前需要node版本为 v4.0 以上；（3）查看npm 版本（4）查看cnpm版本如果没有cnpm，我们需要使用淘宝镜像，进行安装.
2022-04-11 15:10:52
242
原创 小程序的 position: sticky； 吸顶效果的使用方法
今天在使用 uniapp 编写小程序时需要使用到吸顶效果，设置如下：.head { position: sticky; top: 88rpx; z-index: 100;}在网页上的显示效果是刚好固定在顶部显示，但是在微信开发者工具上，就距离顶部有了间隙后面发现在小程序中，需要设置： top: 0;.head { position: sticky; top: 0; z-index: 100;}注意事项：（1）距离顶部的吸顶距离 top:0 时才会生效；（2
2022-03-30 09:24:31
2926
1
原创 elementUI中 el-Switch 在 el-table-column 中点击无效的问题
在写项目时发现，就算绑定了 v-model ，switch开关也是不会生效，下面这个方法可以解决<el-table-column> <!-- slot-scope="scope" 用来解决不生效的问题 --><!-- scope.row.show 这里的 row 指的是 table绑定的data的数据 --> <template slot-scope="scope"> <el-swit
2022-03-24 17:42:04
4075
1
原创 element UI checkbox,通过后台传来的数据默认选中
今天写项目时碰到的一个问题，因为后台传来的是字符串，如果使用 checked 属性所需要的值为布尔值，应该也有办法解决，但我没找到，后面通过 v-model绑定后台拿到的数据，来完成的这一点小功能第一步：<el-checkbox-group>标签上v-model="role.permission"。这里role.permission 为后台拿到的数据，如图： <el-checkbox-group v-model="role.permissio
2022-03-22 11:36:09
6995
2
原创 关于今天在写 flex 布局，遇到 for 循环后的失效问题
最开始我的 for 循环 和 flex 布局 写在 同一层，就出现了我想让他横着排列，结果却不生效 <view class="size" v-for="(item,index) in mianliao" > <view class="size-content u-m-t-16"> <image :src="item.img" mode=""></image> <text class="u-fo
2022-03-03 15:27:34
420
3
原创 使用uView插件中From表单中的选择地区使用方法
HTML：<u-form :model="form" ref="uForm"> <u-form-item label="所在地区" label-width="125upx" class="u-p-l-30 u-p-r-30"> <u-input v-model="form.region" class="u-m-l-40" type="select" placeholder="请选择地区" @click="pickerShow = true"></u-..
2022-03-01 14:41:41
1374
原创 使用uView插件中From表单中的性别下拉框使用方法
1：找到from 表单插件，在视图层输入<u-form :model="form" ref="uForm"> <u-form-item label="性别"><u-input v-model="form.sex" type="select" /></u-form-item></u-form>2：在对应的data数据中心，输入需要的数据 form: { name...
2022-03-01 14:40:27
6119
2
原创 uniapp使用uni.navigateTo({})无法跳转到tabBar的页面的问题
使用uni.navigateTo({}) 正确指定路径时无法进行跳转到tabBar的页面，这种情况下需要使用uni.switchTab({}) 进行跳转代码如下： goZhuye(){ uni.switchTab({ url: '/pages/index/index' }) },
2022-03-01 14:37:38
1630
原创 HBuilder运行uniapp项目到小程序时，第一次设置路径报错问题
第一次使用HBuilder运行uniapp到小程序时会提示让设置小程序路径，我设置了路径之后，下面会出现这样的报错：这种情况怎么解决呢？1.打开微信开发者工具，找到左上角的菜单栏中的 设置2.点击设置中的安全设置3.打开服务端口...
2022-02-23 14:28:17
1167
原创 手机端自适应代码
(function(doc, win) { var docEl = doc.documentElement, resizeEvt = "orientationchange" in window ? "orientationchange" : "resize", recalc = function() { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.
2022-02-18 17:05:49
698
原创 小程序框架介绍、生命周期、尺寸
1.1 小程序框架组成介绍1.1.1 新建页面新建页面的步骤： 在pages目录上，单击右键选择“新建文件夹”，例如：创建cart文件夹 在cart文件夹上，右键选择“新建page”生成页面的框架（由四个文件构成） 在app.json文件中的对应目录，会自动生成放置在pages 字段中。你只需要手动的调整某些页面显示的先后顺序。如果不需要调整。默认即可。 2.1.2 设置页面顶部在app.json文件中的windows字段中设置： "window": {
2022-02-18 09:18:12
488
原创 微信小程序使用 列表渲染指令写 99 乘法表
<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i" class="container"> <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item='j'> <view wx:if="{{j<=i}}"> {{j}}*{{i}} = {{(i)*j}} </view> </v.
2022-02-17 16:29:36
710
原创 在项目中使用 echarts
1.先在项目中下载 echartscnpm i echarts --save2.在 main.js 中 引入 并使用//引用 echartsimport * as echarts from 'echarts';//使用echartsVue.prototype.$echarts = echarts;3.在视图层留下放置可视化图表的盒子，起id名（注意，这个盒子必须有高度）<div class="charts_box" id="myChart"></div>
2022-02-16 11:25:45
798
2
原创 js数组去重
1. 利用for嵌套for，然后splice去重（ES5中最常用）let arr = [1,2,2,2,3,3,4,undefined,undefined,{},{},NaN,NaN,null,null,null] for(var i = 0; i<arr.length; i++){ // 让内层循环 j 在 i 后面一个位置 for(var j = i+1; j<arr.length; j++){ if(arr[i]==a
2022-01-06 10:36:26
181
原创 js 冒泡排序算法
<script> // 首先准备一个要排序的数组 let arr = [21,34,2,4,55,98,3]; // 创建一个函数，参数为我们要排序的数组 function maopao(arr){ // 声明一个变量作为临时存储数据的地方，用来等会坐变量的对调 let temp; // 数组的长度减一，是因为不需要遍历最后一个数 .
2022-01-06 09:44:13
343
原创 解决头部使用 position:fixed； 固定定位后遮住下方内容的问题
今天在做一个页面的时候，有一个效果是要让头部固定，但是在给了position:fixed; 后，继续往下写会发现下方内容有部分被头部遮住了，有两个办法可以解决这种问题1.在头部下面给一个空的 div给这个div设置高度，把页面撑开，这种方法是让头部刚好遮住的是这个空div，把内容放出来。但是这种方法需要一点点调试高度，所以不推荐。2.把整个要使用 position:fixed; 的盒子，用另一个盒子包起来比如说我有一个头部区域，需要固定 <div class="head"&g
2021-12-30 09:45:00
13129
5
原创 Vue项目中使用懒加载 vue-lazy
1.首先准备好需要的图片，放在：src\common\image目录下default.jpgdefault.png懒加载使用的图片的目的：当你页面中的素材图片没有显示出来的时候，先让懒加载的图片显示出来。2.在你的Vue项目中下载vue-lazyloadcnpm install vue-lazyload --save-dev然后，到你的配置文件package.json中查看是否下载成功。 "vue-lazyload": "^1.3.3",3.在入口文件 main.js 中
2021-12-29 17:38:42
2692
原创 通过webpack构建vue初始化项目
1.安装node，这个是肯定要安装的2.安装vue脚手架构建工具，命令行输入npm install –g @ vue/cli3.安装webpack通过 npm 或者 cnpm安装webpack模块化打包工具npm install webpack –g或cnpm install webpack –g4.初始化 webpack 项目，执行命令：vue init webpack 123app其中 123app 是我们要建立的项目的名称，当脚本执行时会进行确认安装..
2021-12-27 09:00:00
789
原创 Vuecli搭建项目，实现正在进行todolisit操作
vuecli搭建vue项目，实现正在进行todolist的操作1.找到 src 文件夹下的 views 文件夹，在里面新建一个文件 myinput.vue2.在数据中心
2021-12-25 14:00:00
216
原创 Vuex 中的 actions 与 Axios
Vuex的五大核心概念之一action，可以操作任意的异步操作，类似于mutations，但是是替代mutations来进行异步操作。actions异步其实和mutations是类似的，区别在于mutations是同步操作而且可以直接修改状态，而actions支持异步操作，但是不可以直接修改状态，所以actions提交的是mutations。这里接着上一篇文章，通过php模拟一段JSON数据，使用数据仓库中的 actions 拿取数据1.首先先把页面中state内的goods删除成一个空数组，然
2021-12-24 14:00:00
1096
原创 Vuex的基本概念，和Vuex中的 state，getters，mutations
1.基本概念Vuex 是一个专为 Vue.js 应用程序开发的(数据的)状态管理模式。Vuex采用“集中式存储管理”方式去管理数据，把 这些数据 应用到 所有组件上 ！！！vuex就是仓库---数据仓库--这个数据仓库里的所有的数据，是为组件来使用的！为组件来服务的！vuex 只 做 “数据” 的维护！！对vuex仓库中数据的处理，我们都放在“模型”里面。在vuex这个仓库 store 里面。2.vuex核心概念state 存储数据getters 获取数据的方式...
2021-12-21 20:26:07
635
原创 vue create~~初始化项目
在创建初始化项目之前，我们需要新建一个文件夹，用来存放项目，假如起名就叫做vue-project，打开这个文件夹，在物理路径位置输入cmd，打开终端vue create~~初始化项目执行命令：vue create hxx (注意：后面名称属于自定义名称)键盘上下键选择,选择自己需要的特性（上下键移动键，空格键是否选中，a键切换选择所有，i键反转选择选项）( ) Babel //( ) Babel //支持高阶语法转换( )...
2021-12-20 10:36:36
549
原创 vue router 路由守卫
vue 路由守卫的作用：用来拦截不符合规则（自己制定）的跳转。准备：<body> <div id="app"> <router-link to="/index">主页</router-link> <router-link to="/user">用户中心</router-link> <router-link to="/login">登录</router
2021-12-17 10:54:14
105
原创 Vue 中央事件总线（非父子组件间通信）
通过一个"空的vue实例"来进行值传递组件1--- $emit()---空vue实例---$on---组件2创建一个空实例(bus中央事件总线，或者叫中间组件)利用$emit $on的触发和监听事件 实现非父子组件的通信方法：1.在vue行挂载一个$bus作为中央处理组件Vue.prototype.$bus = new Vue();2.触发自定义事件传递数据this.$bus.$emit('自定义事件名','传递的数据')3.监听自定义事件获取数据this.$bus.
2021-12-17 10:05:11
752
空空如也
cordova安装插件出错
2022-06-22
TA创建的收藏夹 TA关注的收藏夹
TA关注的人