我是IT小菜鸟-CSDN博客

原创 VUE3+ts实现滑块验证

账号密码输入完成点击登录时需要把滑块拖到最右边完成验证才可以登录。3.使用mousedown方法进行获取鼠标事件。5.滑动到最右边提示验证成功。1.设置可以拖动的区域。4.计算出滑块滑动比例。2.设置拖动的滑块。

2023-09-18 10:07:24 742 1

原创 vue上传pdf文件并展示

vue上传pdf，图片，文件等对pdf进行展示打印

2022-12-22 14:47:49 2225 1

原创 uni-app实现尺子效果

使用uni-app 制作尺子控件

2022-09-01 17:12:25 1776

hooks在React16.8才出现的，为了解决函数式组件的一些问题比如没有状态useState当我们调用useState时，可以在函数中添加一个参数，作为对应stata的默认值import { useState } from 'react'const 组件 = () => { const [msg, setMsg] = useState('默认值') const [num, setNum] = useState(0) /* this.state = {

2022-07-04 09:32:24 152

原创 VUE动态绑定audio/video/img的本地资源不显示

闲着没事写个音乐播放控件在动态切换歌曲事发现一个一个问题就是，audio标签中src我引用的路径也是正确的但是就是播放不了这就很难受了通过我不懈的寻找终于找到了：1.在webpack中会将图片图片来当做模块来用2.url-loader将直接将:src=" ‘…/…/assets/images/’+item.url+’.jpg’ "解析成字符串，因为是动态加载的，所有无法解析图片地址3.然后npm run dev 或者npm run build之后导致路径没有被加工【被webpack解析到的路径

2022-03-08 16:09:14 1639

原创 Vue 如何检测数组变化

数组考虑性能原因没有用 defineProperty 对数组的每一项进行拦截，而是选择对 7 种数组（push,shift,pop,splice,unshift,sort,reverse）方法进行重写// 先保留数组原型const arrayProto = Array.prototype;// 然后将arrayMethods继承自数组原型// 这里是面向切片编程思想（AOP）--不破坏封装的前提下，动态的扩展功能export const arrayMethods = Object.create(a

2022-02-23 14:49:24 813

原创前端适配rem配置

针对Android4.4以下版本，全部使用rem单位兼容方案，并在head标签内添加脚本重写html根字号的大小，1080p下为100px。并且针对受影响的公共组件写出兼容性代码。<script type="text/javascript"> (function(doc, win) { var basicWidth = 1080; var minWidth = 360; var htmlElement = doc.documentElem

2022-01-26 10:07:22 1181

原创 vue 身份证校检

<input type="text" placeholder="请输入证件号" v-model="form.certificateNumber" maxlength="18" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"> //是否为空 if(data.certificateNumber === '') { Toast('请输入18位身份证号'); r.

2021-08-23 14:18:05 429 1

原创 utils此文件下存放自己封装的工具类函数（常用的方法）

/* * @Descripttion: 常用的方法 * @version: 1.0 * @Author: youliang * @Date: 2020-03-10 10:53:06 * @LastEditors: youliang * @LastEditTime: 2020-03-20 10:33:46 *//** * @name: newDate 新建一个日期 * @param num年龄 * @return: 2020/01/22 */export const newDate

2021-08-02 14:42:38 329

原创 utils此文件下存放自己封装的工具类函数（数据校验类）

/** * 数据校验类 *//* eslint-disable */// 判定是否为空export const isEmpty = value => { if (typeof value == 'function') { return false; } return ( typeof value == 'undefined' || value === '' || value === null || value === undefined

2021-08-02 14:40:32 133

原创解决vue报错问题：重复点击导航栏按钮报vue-router.esm.js?fe87:2065 Uncaught (in promise) NavigationDuplicated: Avoided

重复点击导航栏按钮报Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/recruit”.这两天做项目的时候突然发现在多次点击导航栏按钮时会出现这样的报错，不影响使用，但是身为一名程序员是不允许出现这种情况的。。。如图：在网上百度的方案也挺多的方案一：在重新下载依赖包时，安装的vue-router还是之前出错的那个版本删除node_modules 从新安

2021-07-06 15:49:36 3084 1

原创解决vue报错问题：npm ERR! code ENOENT npm ERR! syscall open

C:\Users\for000031\Desktop\aht>npm run devnpm ERR! code ENOENTnpm ERR! syscall opennpm ERR! path C:\Users\for000031\Desktop\aht\package.jsonnpm ERR! errno -4058npm ERR! enoent ENOENT: no such file or directory, open ‘C:\Users\for000031\Desktop\aht.

2021-07-06 15:20:59 14672 5

原创 h5日历点击获取当前时间的数据

使用：vue-calendar-component由于需要对此组件的样式及功能的扩展起步：npm i vue-calendar-component --savecnpm i vue-calendar-component --save //国内镜像具体文档可以看vue-calendar-component官网里面会有详细介绍 <Calendars :textTop="['日','一','二','三','四','五','六']" v-on:c

2021-06-30 17:17:15 790

原创使用vue axios 导出Excel文件流

<el-button size="mini" @click="exports(scope.row.id)">导出</el-button>//导出xlsx exports(id) { axios.get('/xxxxx/xxxxx?id=' + id, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}, responseType: 'blob' }).then(res .

2021-04-29 11:31:01 568

原创 input使用正则限制只输入英文和汉字先输入英文在输入数字英文会复制

<input type="text" placeholder="姓名" oninput="value=value.replace(/[^\a-zA-Z\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\a-zA-Z\u4E00-\u9FA5]/g,''))">//这样写电脑上没问题有些手机会出现这种问题跟输入法有关这时..

2021-04-27 10:19:14 314

原创 axios的请求方式

axiosaxios的请求方式get()post()delete()put()patch()get() 请求和 delete()请求用法一样axios.get(url, { params:{ key:value },{ // 配置项 config }}).then(res => {})axios.delete(url, { params:{ key:value }, {

2021-03-16 10:45:12 162

原创 vuecli中配置router

vuecli中配置router1. 下载安装vue-router 包npm i vue-router --save2. 在src文件夹下创建 views 文件夹views 文件夹是用来存放页面级组件的(就是正常的页面)2.1 在 views 文件夹下创建我们的路由组件页面home.vueabout.vue3. 在src文件夹下创建 router 文件夹router 文件夹用来存在我们所有的路由配置文件3.1 在 router 文件夹下创建index.js 文件，作为路由配置文

2021-03-16 10:44:14 441

原创环境变量配置

环境变量配置环境开发环境生产环境测试环境针对不同的环境请求不同的接口创建环境变量的配置文件在项目的根目录下创建配置文件 .env创建开发环境 .env.developmentVUE_APP_变量名=value创建生产环境 .env.productionVUE_APP_变量名=value使用通过 process.env.VUE_APP_变量名获取环境变量环境变量的格式.env 全局使用.env.local (本地)在所有的环境中被载入，但会被

2021-03-16 10:43:02 81

原创 vue-cli

@vue/cli全局安装npm i @vue/cli -gcnpm i @vue/cli -gnpm i @vue/cli -g --registry=https://registry.npm.taobao.orgyarn global add @vue/cli (前提条件是安装yarn : npm i yarn -g)创建项目vue create 项目名称项目相关配置项选择自定义安装 Manually select featuresVue CLI v4.5.11? Plea

2021-03-06 10:39:55 77

原创 vuecli 安装