![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 66
郭顺杰
CRUD搬运工
展开
-
分分钟你也能写一个自己需要的 Chrome 扩展程序
分分钟你也能写一个自己需要的Chrome 扩展程序原创 2023-01-18 11:30:22 · 992 阅读 · 1 评论 -
身为前端,你真的会mock数据吗
前端如何mock数据,真的都能满足需求吗?原创 2022-08-25 15:42:19 · 1396 阅读 · 1 评论 -
vue 管理系统顶部tags浏览历史实现 tab版
管理系统顶部tags浏览记录封装原创 2022-03-11 18:31:23 · 2751 阅读 · 15 评论 -
vue+element后台管理,table,form,pagination等二次分装,实现5到20行完成一个主页面列表,一天轻轻松松写20个页面,再也不用大量的Ctrl+c Ctrl+v了
vue后台管理系统,表格表单封装,5行完成一个简单列表,20行完成一个复杂列表,一天轻轻松松写20个页面,再也不用大量的Ctrl+c Ctrl+v了原创 2021-12-26 21:58:23 · 2118 阅读 · 5 评论 -
Element.getBoundingClientRect()
介绍Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置如果是标准盒子模型,元素的尺寸等于width/height + padding + border-width的总和如果box-sizing: border-box,元素的的尺寸等于 width/height正文返回值 bottom height left right top width x ydemoxy 是左上角到左边和上边的距离,width,heigth,就原创 2021-12-23 14:41:31 · 701 阅读 · 0 评论 -
vue 动态设置浏览器标题
废话平时设置浏览器标题是这样的但vue是单页面应用,入口文件也只有一个html,只能设置一个标签,所以下面介绍两种常用的动态设置浏览器标签的方法正文第一种使用浏览器原生方法 document.titlerouter/index.jsrouter.beforeEach里//多语言项目,根根据自己项目来 import i18n from '@/i18n/index'; document.title = i18n.t("router." + to.name) //单语言项目 doc原创 2021-12-23 12:36:36 · 2763 阅读 · 2 评论 -
vue 管理系统顶部tags浏览历史实现
废话demo预览完成了哪些默认有首页,不能关闭点击路由菜单,判断有无存在,没有就添加,有就定位到上面点击跳转,点击X可关闭关闭当前页,自动跳到下一个tag页面如果当前页在最后一个,默认跳到上一个tag页面右键菜单,刷新,关闭右侧,关闭所有动态判断tags长多,放不下时,出现左右两侧按钮,减少时自动消失动态判断窗口放大缩小,自动判断有无左右两侧按钮正文不用任何vuex,乱七八糟的方法,全在一个文件,粘贴即用放到你想要的位置即可(此demo,放在了面包屑上面)先安装 (监原创 2021-12-22 18:34:46 · 4590 阅读 · 5 评论 -
vue 弹框子组件关闭时报错(子组件修改父组件传过来的props报错)
废话常见报错大概意思就是子组件不能直接更改父组件props的数据常见场景,点击弹出子组件,你在取消和确定上,写了emit,不会报错,但是点空白处,或者X,时,就会报错正文普通写法父组件子组件看似没问题,但是就会报错解决方法第一种子组件父组件不动,子组件,关闭前去触发父组件的cancel 方法,将props传的改为false,方便 :before-close=" () => { $emit('cancel', false);原创 2021-12-22 17:47:50 · 1898 阅读 · 1 评论 -
滚动条样式修改
废话基础东西,为了网页的美观,还有就是,有的页面没有滚动条,有的页面有滚动条,来回切换页面,会因为滚动条的占位,导致页面抖动,先看下改动前后对比正文vue项目的话 直接在index.html添加 /* 滚动条宽高,横向滚动条的高,纵向滚动条的宽 */ ::-webkit-scrollbar { width: 2px; height: 10px; } /* 滚动轨道 */ ::-webkit-scrollbar-track { border-radiu原创 2021-12-22 15:42:59 · 1120 阅读 · 0 评论 -
创建vue2.0 vue3.0项目步骤总结
废话现在做项目都是clone现成的项目,或者直接用自己以前,写好的项目,然后删掉原项目的页面啥的,但是多多少少都删不干净,里面还是有很多用不到依赖,各种封装的方法,引入的一些第三方的东西等,只知道能跑就不要动,有的删了就跑步起来了,导致代码里有很多垃圾下面就记录一下常见的初始化vue项目的步骤一、先创建仓库以gitee为例1、没有的可以注册一个,登录成功之后,点击右上角 + 新建仓库2、输入仓库名称,创建即可3、git clone “https地址” 到本地,结束vue2.0 cli 脚手原创 2021-10-12 15:58:49 · 758 阅读 · 2 评论 -
vue3 安装ts router vuex
补充vue3.0 vite脚手架项目,安装ts1、npm install typescript -D //安装ts2、npx tsc --init //初始化ts修改main.js—>main.tsindex.html 引入的main.js—>main.tsscript 标签加 lang="ts"报错的话重新cnpm install 在 npm run dev如果 main.ts 里不识别.vue 文件,出现报错提示原创 2021-10-12 15:55:55 · 1512 阅读 · 1 评论 -
从0到1 搭建vue3.0 项目 第二篇
废话本篇大概记录一下,vue3.0 Composition Api 目前的一些方法和使用,利于后面,项目使用-首先vue3.0 Composition Api 和原创 2021-02-26 15:55:27 · 1763 阅读 · 3 评论 -
从0到1 搭建vue3.0 项目 第一篇
废话时间飞快,vue3 陆陆续续也有一年时间的了,现在各种文档,五花八门的,官方的,也都基本齐全了,下面就来从0到1,实战一个vue3.0的后台管理系统,后面我会写所有的创建搭建步骤,至于里面的api就不详细说明(会给出具体文档,自行去看),这里直接搭建,给出具体代码vue3.0问题看法和个人理解1、要不要升级项目到3.0个人觉得有必要,新项目建议直接使用3.0,既然都出3.0了,肯定相对2.0有它的过人之处,不需要解释,(ps:项目过大,架构师不想升级可以不升级,我就是划水运动员)2、vue3.原创 2021-02-26 13:54:57 · 4891 阅读 · 16 评论 -
vue 三级联动地址选择
不废话直接上代码(打卡:2020-12-30 )demo<template> <div> <div style="margin:20px">选择值:{{value}}</div> <el-form label-width="80px"> <el-form-item label="活动名称"> <el-cascader v-model="value"原创 2020-12-30 17:30:41 · 1600 阅读 · 1 评论 -
常用正则表达式
不废话直接上代码(打卡:2020-12-29 )去除前后空格str.replace(/(^\s*)|(\s*$)/g, "")手机号严谨/^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/简单/^[1]([3-9])[0-9]{9}$/密码验证必须包含数字字母符号的正则验证/^(?:(?=.*[0-9].*)(?=.*[A-Za-z].*)原创 2020-12-29 15:20:17 · 1567 阅读 · 2 评论 -
React 基础渲染,方法,属性
React 基础不废话直接上代码(补卡:2020-12-24 )//为了方便写demo,就直接csdn引用就可以写react了 <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" cros原创 2020-12-29 14:46:02 · 1583 阅读 · 1 评论 -
React 静态属性/方法&实例属性/方法
不废话直接上代码(打卡:2020-12-25 )函数组件function Person(name,age){ this.name = name this.age = age}// sex属性直接挂载给构造函数,是静态属性Person.sex='男'Person.prototype.say = function(){ console.log('这是person的实例方法')}Person.show = function(){ console.log('这是person的静态方法')原创 2020-12-25 18:16:33 · 3099 阅读 · 1 评论 -
vue 全屏放大缩小方法封装
vue 全屏放大缩小方法封装不废话直接上代码(打卡:2020-12-24 )一、后台管理全屏按钮html <div class="content_item2 plr8" @click="fullScreen"> <svg-icon style="margin-right:10px" icon-class="全屏"></svg-icon> </div>data data() { return { isfu原创 2020-12-24 18:18:54 · 2403 阅读 · 3 评论 -
vue axios请求封装
vue api请求统一管理,封装不废话直接上demo(打卡:2020-12-23 )一、安装axioscnpm install axios 二、目录结构he代码user.js import base from '../base'; // 导入接口域名列表 import request from '../http'; // 导入http中创建的axios实例 const user = { //普通json请求 test1(url, params) { return原创 2020-12-23 17:34:24 · 2010 阅读 · 1 评论 -
vue实现短信验证码登录
vue中 发送验证码demo不废话直接上demo(打卡:2020-12-22 )html <el-form :model="ruleForm" :rules="rules" ref="ruleForm" > <el-form-item prop="mobile"> <el-input v-model="ruleForm.mobile" placeholder="请输入手机号"></el-input> </原创 2020-12-22 18:11:41 · 3048 阅读 · 1 评论 -
中 封装使用自己的js方法
vue中使用自己的js方法不废话直接上过程(打卡:2020-12-21 )一、src下新建utils(自己命名)文件夹,新建index.js(自己命名)文件二、index.js(推荐三种写法) 1. 第一种写法 export default { aaa(){ return alert('aaa') }, bbb(){ return alert('bbb') } } 2. 第二种写法 function aaa() { return alert('aaa'原创 2020-12-21 18:44:14 · 2345 阅读 · 2 评论 -
vue中使用高德地图
vue中使用vue-amap不废话直接上过程(打卡:2020-12-18 )一、安装vue-amap//建议使用vue封装好的amapcnpm install vue-amap --save二、在main.js中// 引入地图import VueAMap from 'vue-amap'Vue.use(VueAMap)//初始化VueAMap.initAMapApiLoader({ key: 'your amap key', plugin: ['AMap.Autocomple原创 2020-12-18 18:22:17 · 1798 阅读 · 2 评论 -
通用的pc web官网外壳
now预览地址:https://wh-kappa-six.now.sh/pc/index.htmlgithub预览地址:https://hollowshun.github.io/wh/pc/index.html前言:一个基于vue +elementui + router +vue-cli +i18n + axios的官网外壳,简单的用到了通信,用了自己封装的js和使用方法,一些菜单导...原创 2019-12-11 17:06:22 · 2287 阅读 · 1 评论 -
vue项目发布到github上,到线上预览
前言:从你一个本地的html文件到一个github https可访问的https://hollowshun.github.io/wh/pc/index.html页面。1.前提有github,没有的注册一个(基本操作和gitlab,gitee,差不多一样)2.你有一个html,或一个项目,或自己写的一个demo。准备完成进入正题我有一个自己写的demo,先看下我的项目文...原创 2019-12-11 16:10:30 · 1615 阅读 · 1 评论 -
vue项目 npm run build后 在浏览器上打开index.html常见问题
1.打开报错解决方法config文件里的index.js里, assetsPublicPath:'/',改成 ./ 重新build即可2.打开后使用的icon字体图标不显示解决方法build文件里的utils.js里添加publicPath:'../../' ,重新build即可...原创 2019-12-11 14:12:52 · 3093 阅读 · 1 评论 -
js 字符串拼接空格拼不上
摘要:一个很简单拼接字符串,弄的自己都自闭了,需求两个字符串date:2019-11-28,time:17:50,拼接成2019-11-2817:50,就是简单的加个空格,但是被自己的编译器自动规范代码的插件给坑了,撸完ctrl+s时,自动把我空格给删了,然后我的入参就成这样了2019-11-2817:50,然后就是时间格式不正确,下面提一下拼接的几个方法,和HTML提供的几种空格实体...原创 2019-11-28 18:07:56 · 3479 阅读 · 3 评论 -
TypeScript的初次认识和在vscode配置开发环境
(一)、相关介绍1、TypeScript介绍TypeScript是由微软Anders Hejlsberg(安德斯·海尔斯伯格)领衔开发的。(安德斯·海尔斯伯格是Delphi和C#之父,Turbo Pascal编译器的主要作者,.NET概念发起人之一,同时也是TypeScript开源项目的重要领导人)。TypeScript 是 JavaScript 的超集,扩展了 JavaSc...原创 2019-11-01 17:46:15 · 672 阅读 · 0 评论 -
vue element upload组件 file-list的动态绑定
本文解决,upload组件 file-list的动态绑定list1,list2 ...,实现动态添加,相信很多电商后台管理系统都会遇到这个需求,例子如下本例,我是使用的upload默认的上传地址(很多图片不能上传,你可以在本地截几张图片,进行测试),我可以上传多张活动图片,可以加相应的,名称,链接描述等,如果有多个活动,可以点击添加活动,在第二个活动又能添加相应的内容,保存完之后,可以实现...原创 2019-10-10 17:57:15 · 32888 阅读 · 7 评论 -
兼容ie低版本
刚开始不需要兼容ie,后来加了需求,说要兼容ie低版本,低版本打开项目是空白,碰到这样的事情是不是很头疼,需改如下1,vue,react项目中引用babel.js,原理是把es6语法转成es5,jquery项目,下载babel.min.js,这样ie9及以上就可以兼容了,vue,react就直接去安装就好了,jquery项目使用如下<!DOCTYPE html><ht...原创 2019-09-18 10:58:20 · 3986 阅读 · 1 评论