- 博客(86)
- 收藏
- 关注
RSS订阅原创 less中引入背景图片的方法
注意点:记得加~号,只使用@会报错background-image: url("~@/assets/imgs/tableSelect.png");
2022-04-19 14:12:47
2783
1
原创 解决Vue + Echarts的报错（Cannot set properties of undefined (setting ‘plate‘)）
代码：报错信息：上面的报错主要是：Cannot set properties of undefined (setting ‘plate’)翻译之后就是：无法设置未定义的属性（设置“plate”）(这里plate是在this里面定义的一个属性)从这就能大概猜出是因为获取不到data里定义的这个属性造成的（具体就是this指向问题）第一次解决问题：原本我以为定义一个that方法把他指向给this就行，结果还是报错了第二次解决问题：仔细检查了一下，发现是formatter造成的，改成箭头
2022-03-08 11:50:45
3690
原创 vue修改Element中走马灯（el-carousel）的指示灯的位置
问题描述：一般调用element的走马灯，添加完图片之后就会出现指示灯，但是要是修改走马灯的指示灯的位置，应该怎么去修改，看下面代码：/deep/ .el-carousel__indicators { // 指示灯位置 left: unset; transform: unset; right: 2%;}/deep/ .el-carousel__button { // 默认按钮的颜色大小等 width: 36px; height: 8px; border: none;
2022-02-28 18:41:26
5635
3
原创 vue 给element-ui中的el-tabs动态设置label属性
效果：代码：<template> <div class="login"> <el-tabs v-model="activeName"> <el-tab-pane :label="'用户管理（'+name+')'" name="1">用户管理</el-tab-pane> <el-tab-pane label="配置管理" name="2">配置管理</el-tab-pane>
2022-01-20 13:17:21
4434
原创 Vue 对element-ui的Popover进行二次封装
效果：代码：全局封装（复用）<template> <div class="screen"> <el-popover :placement="placement" :width="screenWidth" :v-model="visible" trigger="click" popper-class="popperScreen" :title="title" ref="popo
2021-11-19 10:10:06
1933
5
原创 解决Vue项目打包上线后在控制台还可看见源码的问题
前言：Vue.js现在创建项目，主要有两种版本。一个是2.9.6的版本，一个是2.9.6之后的版本。熟悉Vue的都知道，这两个版本是有区别的。因此解决的办法也不一样，下面针对不同的版本有不同的解决方案。问题：解决方案：2.9.6：在项目里面找到config这个文件夹里面的index.js这个文件，按照下面的图，来修改。上面这个值，默认创建项目的时候，是为true，把它改为false就能现在在控制台上看不到源码的问题了。2.9.6之后的版本：在项目根目录中找到vue.config.js.
2021-09-27 15:24:30
5438
2
原创 了解全角和半角，以及全角和半角的相互转换
一、关于全角和半角1、什么是全角，半角？全角：是一种电脑字符，是指一个全角字符占用两个标准字符（或两个半角字符）的位置。全角占两个字节。汉字字符和规定了全角的英文字符及国标GB2312-80中的图形符号和特殊字符都是全角字符。在全角中，字母和数字等与汉字一样占据着等宽的位置。半角：是指一个字符占用一个标准的字符位置。半角占一个字节。半角就是 ASCII 方式的字符，在没有汉字输入法起作用的时候，输入的字母、数字和字符都是半角的。提示每个半角字符只占用一字节的空间（一字节有8位，共256个编码
2021-09-23 14:42:02
5634
原创 vue 自定义树形组件列表（列表结构转换为树形结构）
前言一般在后台管理系统中，都会有关于树形结构的模块，打个比方：比如权限结构列表，分类列表等。假如后台返回给我们接口的格式不对的话，那我们前端应该怎么去来进行格式化，变成我们想要的数据，下面就来说说方法：首先： 先来看看效果图接着： 来看看后台返回的数据没有仔细看，可能看的很懵，但是仔细解析就会发现一级的id和二级的parent_id之间有点关系，我们可以利用这点关系，来把数据变成我们想要的树形结构。代码：<el-tree :data="data" :props="default
2021-07-08 17:50:22
2407
3
原创 el-form表单中对不同的下拉项（el-select）的选择，提交时的校验提示问题的解决 —— vue
—— 上篇博客：弹窗封装前言在写这篇博客前，大家可能对我上篇的博客（自定义弹框）的使用还有点迷茫，因此接下来我会首先根据我上一篇的弹框封装来作为这篇博客的开头一、弹框使用1、效果点击新增会有一个弹框2、代码二、今天的主题（下拉值不一样，提交校验的问题）1、先看几个图问题描述：从图一可以看出，只要我上一篇的博客能看懂的话，那么图一的样式以及校验都可以根据element-ui来实现。现在的问题是，从图一都知道，第一个下拉框有三个值，银行，微信和支付宝。然后从图二和
2021-07-02 16:47:00
2713
1
原创 vue 封装自定义弹框
效果：代码：1、弹框封装<template> <div class="all-model" v-if="isShow" v-move> <div class="model-panel" :style="popStyle"> <div class="panel-head"> <span class="head-tit">{{ title }}</span> <span
2021-07-02 15:55:27
512
1
原创 css3中calc()用法详解
之前在看到别的前端在项目中使用的一个样式，calc()，了解之后，我才知道，calc()其实就是自适应屏幕大小。calc其实是calculate 计算 的缩写形式。calc() 函数用于动态计算长度值。需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；任何长度值都可以使用calc()函数进行计算；calc()函数支持 “+”, “-”, “*”, “/” 运算；calc()函数使用标准的数学运算优先级规则；可以使用百分比、px、em、rem等
2021-03-29 10:33:55
945
原创 封装element-ui中的Drawer（抽屉）
之前我都不知道有drawer这个方法，平常对于那些弹框我一般习惯用dialog这个组件。然而前几天，我发现，drawer也用起来不错，便想起来，把他封装起来，好复用。下面呢，就直接上代码了<template> <el-drawer :title="title" :visible.sync="drawer" :custom-class="className" :modal-append-to-body="false" :size="outSize
2021-03-26 15:49:53
7678
原创 vue基于element-ui中form表单的自定义的校验方式
平常在使用vue来写项目的时候，特别是后台管理的时候，常常会使用到element-ui这个框架，对我自己来说，用的很多的便是表格，form表单等。接下来就说一个常见的画面。上面可能我们都不陌生，我们常常写后台的时候，都需要对input输入的数据进行校验，在element-ui上也有提到怎么去校验，但是我想说的是另外的办法。上面是element-ui上提到的方法。这样的校验方法，我相信在element-ui上也有看到过，，但是不知道我圈起来的，有两个英文单词，不知道注意到了吗？就是requir.
2021-03-26 15:07:41
1366
原创 vue 依据腾讯地图数据实现动态的全国地图
今天帮助同事解决了一个问题，虽然我现在用不到，但是可以记录下来，说不定哪天就需要了，同时也可以帮助别人。效果：上面只是一张简单的图片，真实的效果和我们手机上安装的腾讯地图app一样，可以随时放大和缩小。实现：第一步：不论我们在项目中遇到关于地图的什么形式，比如是腾讯地图和百度地图等，都需要去获取一个密钥，有了它，我们才可以去使用相关的数据。获取腾讯地图的密钥1、首先去申请一个key，可以在 腾讯官网 这个网站里申请。打开是下图这个样子的。2、点击登录，绑定一些信息，手机号之类的，随后点进.
2021-01-28 14:14:26
1093
1
原创 使用uni-app实现底部tabber以及切换
无聊中，了解到了一个小的问题，接下来就说说，使用uni-app实现一个tabber的实现。第一 - 了解uni-app如果对uni-app不了解的，可以看我之前的博客：简单入门 （可能有点不全，希望多多包含，毕竟是刚接触uni-app的。）第二 - 新建项目在这里有两种方式：本人建议看官网1、可以选择官网：https://uniapp.dcloud.io/quickstart-hx2、我的博客：简单入门第三 - 简单的底部tabber简单的demo：思路：代码实现：...
2021-01-14 10:19:25
1025
1
原创 uni-app简单入门
一. uni-app的简单介绍什么是uni-app？uni-app 是使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。uni-app的优点？跨平台发行，运行体验更好与小程序的组件、API一致；兼容weex原生渲染，增加了开发效率高，但是由于weex坑比较多，建议还是使用局部渲染优化；通用前端技术栈,学习成本更低支持vue语法，微信小程序API内嵌mpvue开发生态,组件更丰富支持通过npm安装第
2020-11-27 13:56:58
1704
2
原创 理解mockjs并且怎么去使用mockjs
今天发现个好的东西参考链接：https://github.com/nuysoft/Mock/wiki （mockjs的详细讲解）一. 什么是mockjs?生成随机数据，拦截 Ajax 请求二. 为什么要使用mockjs?在做开发时，当后端的接口还未完成，前端为了不影响工作效率，手动模拟后端接口，1.我们可以使用json文件来模拟后台数据，但比较局限，无法模拟数据的增删改查2.使用json-server模拟，但不能随机生成所需数据3.使用mockjs模拟后端接口，可随机生成所需数据，.
2020-11-24 20:00:42
825
1
原创 封装dialog的组件（对elementui的el-dialog的二次封装）
今天来说下对elementui的el-dialog对话框进行二次封装。那我为什么要进行封装呢？我来说一下：我们平常在写一个项目的时候，需要用到弹框非常多，如果我们每个页面写一次，会显得代码很累赘，那么对他们进行封装，就减少了代码的复用性。先看一下效果最终的效果就是上面的图片下面上代码并解释我一般都是使用的vue父传子props**** 如果对vue的基础不太好的，可以参考：关于组件传值的讲解这个页面是子组件<template> <!-- 封装弹框 --> .
2020-11-20 20:26:25
12046
5
原创 解决 （TypeError: loaderContext.getResolve is not a function ）问题
今天写项目的时候用到less的编译器，使用npm install less less-loader --save dev这个指令后，整个项目报错。下面就说说它的解决办法运行项目时会出现以下报错：loaderContext.getResolve is not a function报错原因：less-loader版本太高,给它降级就可以了解决办法：修改package.json文件：将less和less-loader版本改为上述版本，然后重新npm install就可以运行成功了...
2020-11-20 17:54:34
3930
原创 复习jQuery
一、jQuery选择器元素选择器jQuery 元素选择器基于元素名选取元素。在页面中选取所有<p> 元素:$("p")#id选择器jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。通过 id 选取元素语法如下：$("#test").class选择器jQuery 类选择器可以通过指定的 class 查找元素。语法如下：$(".t
2020-09-29 21:54:35
167
原创 解决vue报错（Property or method “main“ is not defined on the instance but referenced during render. Make）
在写案列的时候，不知道怎么回事就忽然报了一个错，虽然不影响整体的效果，但是有个报错，总让人感觉不舒服。在这里就说说报错的解决方法报错如下：Property or method “main” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based componen.
2020-09-25 10:58:58
2973
原创 使用vue封装一个弹框
使用vue封装一个弹出框在我了解的vue中，一般封装主要就是用的就是组件通信，即父传子，子传父，兄弟传值。如果这点不懂，去看看我的博客：vue组件通信下面就说说，怎么使用vue来封装一个弹出框下面的是父组件的代码<template> <div> <div class="box_popup"> <div class="popup_title">弹出框</div> <button @click="t
2020-09-25 09:39:00
2488
2
原创 前端常见的性能优化方案
1.内容优化(1)减少HTTP请求数:这条策略是最重要最有效的，因为一个完整的请求要经过DNS寻址，与服务器建立连接，发送数据，等待服务器响应，接收数据这样一个消耗时间成本和资源成本的复杂的过程。常见方法：合并多个CSS文件和js文件，利用CSS Sprites整合图像，Inline Images(使用 data：URL scheme在实际的页面嵌入图像数据 )，合理设置HTTP缓存等。(2)减少DNS查找(3)避免重定向（302.303）(4)使用Ajax缓存(5)延迟加载组件,预加载组件(6
2020-09-24 19:36:42
552
原创 sass和less的区别以及如何使用
一. Sass/Scss、Less是什么?页面越来越复杂，需要加载的 CSS 文件也越来越大，我们有必要把大文件切分开来，否则难以维护。传统的 CSS 文件切分方案基本上就是 CSS 原生的 @import 指令，或在 HTML 中加载多个 CSS 文件，这些方案通常不能满足性能要求。CSS 预处理器扩展了 @import 指令的能力，通过编译环节将切分后的文件重新合并为一个大文件。这一方面解决了大文件不便维护的问题，另一方面也解决了一堆小文件在加载时的性能问题。Sass (Syntactically
2020-09-23 16:29:21
8710
原创 vue 线上环境和本地开发环境的切换
config/dev.env.js'use strict'const merge = require('webpack-merge')const prodEnv = require('./prod.env')module.exports = merge(prodEnv, { NODE_ENV: '"development"', API_ROOT: '"http://192.168.1.14:8080/api/"'})config/prod.env.js'use strict'
2020-09-22 22:04:15
1695
原创 微信小程序的支付流程 —— 总结
今天来说说，微信小程序的支付流程是怎么的？首先，就是先了解一下小程序的应用场景主要就是以下几个方面：1、线下支付2、公众号支付3、小程序支付4、pc网站支付5、手机app支付6、企业内部使用微信资金流动不同场景下的支付措施注意：在这里JSAPI就相当于是微信内部的一个支付方式，他在第三方App，比如说安卓的或者iOS的应用，要坐微信支付只可以通过App来支付。注意点：在苹果手机端的音频视频不能再ｉＯＳ端上使用，会收到微信的限制。建议用公众号和Ｈ５的方式实现，因.
2020-09-21 21:38:07
12990
原创 谈谈js的三大流程控制
概念javascript 流程控制流程控制：就是程序代码执行顺序流程控制：通过规定的语句让程序代码有条件的按照一定的方式执行三大流程控制顺序结构： 从上到下，从左到右执行的顺序，就叫做顺序结构，程序默认就是由上到下顺序执行的。分支结构：根据不同的情况，执行对应代码。循环结构：重复做一件事情。1、顺序控制按照书写顺序来执行，是程序中最基本的流程结构。2、选择结构（分支结构，条件结构）根据给定的条件有选择的执行相应的语句单路分支条件可以是表达式也可以是任何的数据类
2020-09-18 23:21:11
363
原创 js数组去重 —— 复习
今天主要就是了解了一下关于数组去重的方法，下面就说说怎么去重，以及去重的方法。数组去重,这是一个老梗了…今天我又拿出来说了… 我们在考虑全面一点的情况下,数组去重的实现,比如针对NaN,undefined,{}; 这其中涉及的知识点挺多，不信跟着走一波; 这里不考虑浏览器兼容性这些破问题，因为涉及ES5&6下面就从四个阶段来说基础版测试数组[1,1,’’,’’,‘e’,‘e’,true,‘true’,true,false,false,‘false’,undefined,‘undefi.
2020-09-16 21:57:43
101
原创 怎么使用vue-table-with-tree-grid树形表格组件
如何使用vue-table-with-tree-grid树形表格组件1.假如遇到了一个需要搭建一个树形结构的表格页面，这时候vue-table-with-tree-grid便可以派上用场。示例如下：2、如果你是使用 vue create my-project 搭建项目，使用时操作如下：官方文档 ：具体的操作看官方的文档，官方说 得很清楚下面我就说说怎么去使用它2.1、安装vue-table-with-tree-grid第一种：通过npm安装 `npm i vue-table-with-t
2020-09-15 17:14:33
724
原创 vue中使用echarts图表 —— 总结
今天在写后台项目的时候，使用echarts来绘制图表。下面来说说怎么使用echarts。echarts地址：https://echarts.apache.org/zh/index.html效果：代码：在vue项目中使用echarts图表的步骤：安装echarts依赖npm install echarts -S或者使用淘宝的镜像npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm install echar.
2020-09-14 21:39:13
619
1
原创 css3动画详解 ——复习（笔记）
前言本文主要内容：过渡：transition2D 转换 transform3D 转换 transform动画：animation过渡：transitiontransition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态。帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。transition 包括以下属性：tr.
2020-09-11 21:52:27
380
原创 解决报错（Navigation cancelled from “/roleList“ to “/userlist“ with a new navigation.）
写项目的时候，报了一个错，现在总结出来，希望可以帮助到你们。这个报错的原因：使用新导航取消了从“/roleList”到“/userlist”的导航。解决的方法：关于Vue Router报错路由跳转报错问题只需要在router中的index.js中写:import Vue from ‘vue’import VueRouter from ‘vue-router’Vue.use(VueRouter)const originalPush = VueRouter.prototype.push.
2020-09-09 19:44:09
9573
6
原创 复习ES6的相关内容
symbol：是ES6新增的基本数据类型number,string,boolean,null,undefined,symbol(ES6新增)symbol:定义的值是唯一性两个symbol类型的值永远不等例如：var s1=Symbol()var s2=Symbol()s1=== s2 false扩展运算符( … )扩展运算符（也称展开操作符）两层作用：1.将数组转换成数据列表 [a,b,c,d]--->a,b,c,d例如：var arr1=[666,777,.
2020-09-08 23:11:50
117
原创 使用element-ui实现后台的用户登录
今天主要写了后台的用户登录，下面就说说怎么实现用户的登录。效果：代码实现：1、首先就是页面的布局(主要是用element-ui来实现的)<template> <div class="login_box"> <div class="login_content"> <h1>用户登录</h1> <el-form :model="ruleForm" status-ico.
2020-09-07 21:59:58
3298
原创 前端常见的面试题 —— css
主要总结前端面试题中关于css和css3的内容。常见的面试题有：1、分别说一下两种盒模型？盒模型其实就是浏览器把一个个标签都看一个形象中的盒子，那每个盒子（即标签）都会有内容（width，height），边框（border），以及内容和边框中间的缝隙（即内间距：padding），还有盒子与盒子之间的外间距（margin）。标准盒模型就是写起来比较方便，也更规范。盒模型分为标准盒模型和怪异盒模型(即IE模型)。box-sizing：content-box //标准盒模型box-siz.
2020-09-04 23:47:53
527
原创 复习ES6的let、const和ES5的var —— 总结
let和const是 ES6 新增的命令，用于声明变量，这两个命令跟 ES5 的var有许多不同，并且let和const也有一些细微的不同，在认真阅读了阮一峰老师的文档后，发现还是有一些不知道的细节,重新整理了一下，分享给各位.内容：var和let/const的区别1、块级作用域2、不存在变量提升3、暂时性死区4、不可重复声明5、let、const声明的全局变量不会挂在顶层对象下面const命令两个注意点:1、const 声明之后必须马上赋值，否则会报错2、const 简单类型一旦声明
2020-09-03 23:51:34
210
原创 JavaScript闭包、原型链、继承 ——总结
面试回答技巧（一）如何回答的一个技术记汇，或者你对xxxx的理解？例如：你说一下对闭包的理解？答：1.xxx是什么?2.应用场景3.优缺点4.具体实现5.还有没有更好的解决方案！今天的内容都是从这几个方面来讲解。一、闭包1、闭包是什么？函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起构成闭包（closure）。也就是说，闭包可以让你从内部函数访问外部函数作用域。在 JavaScript 中，每当函数被创建，就会在函数生成时生成闭包。总结来说.
2020-09-02 21:01:40
446
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人