Web前端
文章平均质量分 56
陶瓷小兔
所谓门槛,过去了就是门,没过去,就成了槛
展开
-
bootstrap-select开启全选功能及补全中文语言
data-none-selected-text 是未选中任何内容时的提示文案;data-actions-box="true" 就是开启全选;都没提selectpicker可以设置全选,multiple 是开启多选;和fastadmin的。转载 2022-09-29 10:57:21 · 1832 阅读 · 1 评论 -
git合并分支时出现“Please enter a commit message to explain why this merge is necessary”报错的解决方法?m0_5703683
git合并分支,报错翻译 2022-09-28 10:50:34 · 2117 阅读 · 0 评论 -
for in 和 for of 的区别
1、for...in 循环:只能获得对象的键名,不能获得键值 for...of 循环:允许遍历获得键值 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 vararr = ['red','green','blue'] for(letitemina...转载 2022-03-02 12:17:35 · 140 阅读 · 0 评论 -
JS深拷贝与浅拷贝的区别,实现深拷贝的几种方法
如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,如果B没变,那就是深拷贝。此篇文章中也会简单阐述到栈堆,基本数据类型与引用数据类型,因为这些概念能更好的让你理解深拷贝与浅拷贝。我们来举个浅拷贝例子:let a=[0,1,2,3,4], b=a;console.log(a===b);a[0]=1;console.log(a,b);这里b复制了a,修改了数组a,数组b也跟着变了。贰 ❀ 基.转载 2022-03-02 11:59:24 · 127 阅读 · 0 评论 -
JS中Map和ForEach的区别
如果你已经有使用 JavaScript 的经验,你可能已经知道这两个看似相同的方法:Array.prototype.map()和Array.prototype.forEach()。那么,它们到底有什么区别呢?定义我们首先来看一看 MDN 上对 Map 和 ForEach 的定义:forEach(): 针对每一个元素执行提供的函数(executes a provided function once for each array element)。 map(): 创建一个新的数组,其中每一..原创 2022-02-16 13:58:02 · 175 阅读 · 0 评论 -
ant-design-vue中实现modal模态框的复用(添加,编辑展示同一个模态框)
用两个button(添加,编辑)按钮展示同一个模态框,并不是什么大问题,问题在于解决这两个模态框得有自己的确定和取消方法父页面完全接管子页面(利于子页面复用)父页面代码:<template> <div> <-- 定义两个按钮,一个添加按钮, 一个编辑按钮 --> <a-button type="primary" @click="showModal">添加</a-button> <a-button转载 2021-08-12 10:47:04 · 2061 阅读 · 0 评论 -
Ant Design vue自定义文件上传
实际项目中,上传文件时实际可能需要传输一个token。方法一:1、查看vue antdesign文档https://vue.ant.design/components/upload-cn/2、使用customRequestcustomRequest 通过覆盖默认的上传行为,可以自定义自己的上传实现 Function3、定义customRequest,之前定义action行为会被覆盖,可以注释掉4、customRequest代码如下customRequest .原创 2021-07-31 16:40:33 · 4629 阅读 · 0 评论 -
antd-vue的select组件实现既可以输入添加,又可以下拉选择
最近,项目中碰到需求,要求任务类型可以从下拉框(后台返回的数据)中选择,也可以手动输入添加新项,项目用的是antd-vue,所以最接近的组件就是a-select组件了,废话不多说,改造方法如下:HTML: 1 15 16 {{ item.work_type }}17 18 data定义:1 data () {2 return {3 val转载 2021-06-24 20:57:35 · 3740 阅读 · 3 评论 -
Vue 配置打包不打包.map文件
在config下的index.js 将productionSourceMap改为falseproductionSourceMap: false,转载 2021-06-21 13:29:35 · 754 阅读 · 0 评论 -
antd分页每页多少条中文设置
再引用antd表格的时候经常用到分页,但是设置如上图多少条每页的时候默认是英文的状态,前几天因为用到所以自己摸索了一下如何变成如上图的中文字样。很多文章提到这是antd的国际化设置,没错在引入antd的时候会带有中文语言包。可作如下操作:import React from 'react// 在需要用到的 组件文件中引入中文语言包import zhCN from 'antd/es/locale/zh_CN';// 引入国际化配置import { ConfigProvider,Table .转载 2021-05-25 16:22:45 · 1322 阅读 · 0 评论 -
vue中下载文件导出保存到本地
vue中下载文件导出保存到本地先分析如何下载:先有一个链接地址,然后使用 location.href或window.open()下载到本地看看返回数据res.config.url 中是下载链接地址,res.data 中是返回的二进制数据如何下载...<el-button icon="el-icon-download" @click="download(id)"></el-button>...download(id) { // 导出 this.$A..转载 2021-05-25 11:32:34 · 7555 阅读 · 0 评论 -
npm安装依赖报错:npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\misal\AppData\R
npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\misal\AppData\Roaming\npm-cache_logs\2020-08-06T05_46_39_769Z-debug.log说明:全局脚手架和本地脚手架版本不一样。解决方法:执行 npm install npm@latest -g升级到最新版本(若升级到最新版本还是报错,则还需要再全局更新一下npm,更新后检查npm版本号不会变,内部应该有更转载 2021-05-25 11:29:02 · 1287 阅读 · 0 评论 -
如何在vue项目中使用md5加密
npm安装:npm install --save js-md51.在需要使用的项目文件中引入:import md5 from 'js-md5';使用:md5('holle') // bcecb35d0a12baad472fbe0392bcc0432.或者在main.js文件中将md5转换成vue原型:import md5 from 'js-md5';Vue.prototype.$md5 = md5;在需要用到的文件中使用:this.$md5('ho...转载 2021-05-23 19:41:29 · 201 阅读 · 0 评论 -
antdv form组件的layout属性
antdv form组件的layout属性1、下图是我想要实现的效果2、按如下代码,可是输入框没有和label在同一行,看起来很奇怪 <a-form :form="applyformInline" labelAlign="left"> <a-form-item label="发票类型"> <a-radio-group name="radioGroup" :default-value="1" v-model="apply...转载 2021-05-23 08:47:19 · 2110 阅读 · 0 评论 -
flex布局常用样式
//flex容器默认存在两根轴:水平的主轴(mainaxis)和垂直的交叉轴(crossaxis)//flex左对齐顶对齐.flex{display:flex;//align-items:flex-start;//项目在交叉轴上如何对齐justify-content:flex-start;//项目在主轴上的对齐方式}//flex左右居中,上下居中.flexCenter{display:flex;//al...转载 2021-05-22 13:50:57 · 521 阅读 · 0 评论 -
安装less后报错:Module build failed: TypeError: this.getOptions is not a function at Object.
在Vue-cli中使用lang="less"时报错:Module build failed: TypeError: this.getOptions is not a function at Object.loader (D:\WORK\VueProject\XiaoWei\node_modules\less-loader\dist\index.js:52:26)出现这个问题的原因是less-loader版本过高,降级到5.0.0即可npm install less-loader@5.0.0 .转载 2021-05-22 13:23:41 · 10425 阅读 · 3 评论 -
在vue项目中使用favicon.ico
一般项目使用favicon.ico都是在index.html头部head中加入代码<linkrel="shortcut icon"type="image/x-icon"href="favicon.ico"/>vue项目中使用和上面的方法不同,需要配置webpack才能使avicon.ico生效,记录一下,以备后用。webpack.dev.conf.js文件中修改 let path = require('path') // 增加 new HtmlWebpa...转载 2021-05-22 12:37:48 · 1176 阅读 · 1 评论 -
vue-cli4.5创建vue项目
. 准备工作1.1 安装node.js安装过程很简单,在官网下载安装包,点击安装,一直下一步直到安装完成即可,新版本的node.js会自动添加环境变量,不需要再手动添加环境变量,如有疑问,可自行前往环境变量查看。node.js官网:https://nodejs.org/zh-cn/出现下图所示表示node安装完成。1.2 检查安装的node.js是否成功及其版本号进入cmd(Windows+R进入运行界面,输入cmd回车即可)窗口,在cmd窗口中输入命令:node -v转载 2021-05-16 23:01:23 · 614 阅读 · 0 评论 -
vue-cli 启动本地服务局域网不能访问(亲测可用)
问题描述本地 vue-cli 启动了一个项目只能通过 localhost:8080 访问到,同一局域网下其他的手机和电脑 (包括本机) 并不能通过 ip 地址访问调试原因这个问题,其实是因为新版 webpack 导致的,因为我们使用 vue-cli 来构建项目的时候,一般都会选择使用的模版是 webpack 。这次 webpack 升级后,导致 /config/index.js 里面的配置项多了几项。其中一项就是 dev 中多了:host: 'locahost', // can b转载 2021-02-03 15:51:11 · 3073 阅读 · 3 评论 -
vue.cli项目封装全局axios,封装请求,封装公共的api和调用请求的全过程
一、vue项目的前期配置新建vue项目,下载axios,并在main.js中导入axiosnpm i axios -S//main.jsimport axios from "axios";二、配置config文件中的代理地址在项目config目录下的修改 index.js文件,这里是主要书写配置多个后台接口。关于代理可能出现的问题,可以查看我的另一篇文档VueCil代理本地proxytable报错的解析;vue cil2旧版本的代理配置——config/index.js.转载 2020-12-02 09:05:18 · 468 阅读 · 0 评论 -
Vue使用antV G2简单实例
工作中需要制作一个看板,选型选用antV G2进行开发。由于项目前端是使用Vue,于是研究了antVG2在Vue中的使用。1.安装antv/g2在WebStrom下面Terminal中输入npm install @antv/g2 --save安装完成后为如下状态2.创建一个Vue文件,引入antV/g2import G2 from '@antv/g2';3.创建一个函数,函数内部创建一个Chart对象,并在挂载时调用(这里我创建了两个函数,创建Chart对象所需的参数转载 2020-12-01 16:46:34 · 6355 阅读 · 1 评论 -
vue结合AntV G2 使用踩坑
官网使用import G2 from '@antv/g2';引入但是会报一个"export 'default' (imported as 'G2') was not found in '@antv/g2' 得错误找了半天原因,最终解决办法import * as G2 from '@antv/g2'转载 2020-12-01 16:45:10 · 1744 阅读 · 3 评论 -
vue.js - 打印插件
1. 概述如何vue项目中实现打印功能,GitHub上发现一个插件,既优雅又方便。vuePlugs_printjs2. 使用方法2.1. 注册插件import Print from '@/plugs/print' // 引入附件的js文件Vue.use(Print) // 注册2.2. HTML设置ref,可指定区域打印<template><section ref="print"> 打印内容 <div class=..转载 2020-11-19 19:23:19 · 750 阅读 · 2 评论 -
vue html页面打印功能vue-print-nb
vue html页面打印功能vue-print-nbvue项目中,HTML页面打印功能.在项目中,有时需要打印页面的表格,在网上找了一个打印组件vue-print-nb本博客源码:https://github.com/shengbid/vue-print,这里面只放了打印组件的代码,只需要这个功能的下载这个https://github.com/shengbid/vue-demo 这个项目里平时博客写的一些功能的代码都放在里面,有需要可以下载看看,有帮助的话点个star哈使...转载 2020-11-19 19:20:52 · 1737 阅读 · 1 评论 -
vue实现打印功能的两种方法
第一种方法:通过npm 安装插件1,安装npm install vue-print-nb --save2,引入 安装好以后在main.js文件中引入 import Print from 'vue-print-nb' Vue.use(Print); //注册3,现在就可以使用了 <div id="printTest" > <p>明月照于山间</p> <p>清风来...转载 2020-11-19 19:15:51 · 2182 阅读 · 0 评论 -
解决 elementui中pagination显示英文问题
解决方法是:在main.js中引入中文语言原创 2020-11-19 18:32:58 · 929 阅读 · 0 评论 -
在element-ui分页基础上封装自己的分页组件
我们在开发后台管理系统的时候不可避免的会遇到列表分页需求,element 官方尽管已经帮我们封装好了,但是我们每次调用的时候依然要传递不少参数,看上去很复杂,为此我们可以以此封装一个自己的分页组件。在开发之前我们需要清除自己需要的参数,我这里用的是这些。pagination.png接下来我们就开始正式封装我们的pagination组件。<template> <div class="pagination"> <el-pagination..转载 2020-11-19 18:32:18 · 413 阅读 · 0 评论 -
vue中的.sync修饰符用法及原理详解
vue中我们经常会用v-bind(缩写为:)给子组件传入参数。或者我们会给子组件传入一个函数,子组件通过调用传入的函数来改变父组件的状态。例如://父组件给子组件传入一个函数 <MyFooter :age="age" @setAge="(res)=> age = res"> </MyFooter> //子组件通过调用这个函数来实现修改父组件的状态。 mounted () { console.log(this.$emit('setAge',12345转载 2020-11-19 15:18:01 · 2250 阅读 · 0 评论 -
element-ui分页组件修改当前页current-page后current-change事件不触发的一个小bug
最近在开发中遇到一个element-ui分页的一个小bug,具体场景如下1、首先点击正常分页来到第二页数据正常展示2、点击搜索,需求为回到第一页按条件搜索,此时也正常展示3、再次点击分页去第二页,此时分页还停留在第一页,current-change事件不触发原因有可能是点击搜索的时候在搜索里面通过代码去改变了current-page让分页回到第一页,但有可能element内部的页码数据未改变,因此当在此点击第二页的时候相当于页码未发生改变,current-change..转载 2020-11-19 15:15:39 · 3386 阅读 · 0 评论 -
简单理解Vue中的nextTick
Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下。其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick。一、示例先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用。模板<div class="app"> <div ref="msgDiv">{{msg}}</div> <div v-if="msg1">Message g..转载 2020-11-19 15:14:13 · 163 阅读 · 0 评论 -
VSCode关闭、打开eslint的语法检查
ESLint 是一个插件化的 javascript 代码检测工具,它可以用于检查常见的 JavaScript 代码错误,也可以进行代码风格检查,能够很好的执行编码规范,提高项目代码的质量 打开vscode编辑器 点击左侧‘扩展’- 头部搜索框输入‘eslint‘并搜索组件 点击‘install’安装搜索结果列表中的 Eslint 组件(ps:点击‘卸载’按钮可直接卸载) 点击左下角‘设置’按钮 ,进入设置页面 点击头部输入‘eslint’原创 2020-11-19 09:23:51 · 7012 阅读 · 0 评论 -
VUE父子组件之间的传值,以及兄弟组件之间的传值;
一、Vue父子 组件之间传值vue使用中,经常会用到组件,好处是:1、如果有一个功能很多地方都会用到,写成一个组件就不用重复写这个功能了;2、页面内容会简洁一些;方便管控;子组件的传值是通过props来传递数据,$emit来触发事件;下面是一个简单的子组件props传值:父组件的部分:首先引入组件,在组件上绑定你要传给组件的值;然后,在组件里通过props来接收你从父页面传过来的值;so,父组件把值传给子组件就完成了;下面是一个子组件在把值传给父组件的例子:父组件部分:子组件部分转载 2020-11-03 21:20:18 · 409 阅读 · 0 评论 -
js中如何判断函数是否传参数
我们先创建一个js函数,函数很简单,只是alert参数的值。 然后在下方直接调用这个函数,参数传的是12. 运行页面后,可以看到alert出来的值就是12. 把函数调用改成没有参数的。 再次运行页面,可以看到alert的值是undefined。 所以我们修改一个函数,判断参数是否为undefined就行了,如果是的话,就是没有传参数了。 运行页面,可以看到调用函数是没有传参数的。 ...原创 2020-10-20 11:40:17 · 3510 阅读 · 1 评论 -
$ref的用法
this.$ref的用法<div id="app"><input type="text" ref="input1"/><button @click="add">添加</button></div><script>new Vue({el: "#app",methods:{add:function(){this.$refs.input1.value ="22"; //this.$refs.input1转载 2020-10-19 08:58:23 · 1657 阅读 · 0 评论 -
input和textarea中字体样式不同的解决方法
当我们写一个输入框群组时,input和textarea中字体样式会不同,比如下面:里面输入的字也不一样:代码在这里:html: <div style="margin: 0 auto; width: 800px; height: 800px;"> <input type="text" name="email" class="info-input" placeholder="您的邮箱地址"><br> <textar.转载 2020-10-16 09:10:52 · 3171 阅读 · 0 评论 -
Element UI 的输入框
Input 输入框通过鼠标或键盘输入字符。Input (el-input)为受控组件,它总会显示 Vue 绑定值。 通常情况下,应当处理 input 事件,并更新组件的绑定值(或使用v-model)。否则,输入框内显示的值将不会改变。 不支持 v-model 修饰符。 基础用法 禁用状态 通过 disabled 属性指定是否禁用 input 组件 可清空 使用clearable属性即可得到一个可清空的输入框。 ...转载 2020-10-12 16:07:02 · 4614 阅读 · 0 评论 -
element ui实现动态显示textarea剩余字数
<el-form-item label="备注:" class="layout"> <el-input type="textarea" maxlength="250" v-model="form.remk" placeholder="输入备注信息" @input="this.descInput"></el-input> <span style="float:right;color:#999;">{{this.remnant}}...转载 2020-10-12 15:52:28 · 1897 阅读 · 0 评论 -
webpack之devServer配置
DevServer是webpack开发服务器。首先,下载webpack-dev-server库$ npm i -D webapck-dev-server配置package.json:配置webpack.config.js当运行npm run dev的时候,devServer首先会在内存中创建类似的dist目录,在由浏览器打开进行预览。webpack-dev-server其它配置devServer.open在DevServer第一次构建完成时,自动...转载 2020-10-12 10:54:08 · 2522 阅读 · 0 评论 -
git查看某个文件的修改历史
有时候在比对代码时,看到某些改动,但不清楚这个改动的作者和原因,也不知道对应的BUG号,也就是说无从查到这些改动的具体原因了~【注】:某个文件的改动是有限次的,而且每次代码修改的提交都会有commit描述,我们可以从这里进行入手;一、切换到目录首先切换到要查看的文件所在的目录:cd packages/apps/Mms/src/com/android/mms/ui/二、git log --pretty然后使用下面的命令可列出文件的所有改动历史,注意,这里着眼于具体的一个文件,而不是g转载 2020-10-12 09:25:48 · 1082 阅读 · 0 评论 -
git 拉取远程分支到本地
步骤:1、新建一个空文件,文件名为hhhh2、初始化 git init3、自己要与origin master建立连接(下划线为远程仓库链接)git remote add origingit@github.com:XXXX/nothing2.git远程仓库链接在github这里,如下图红色框内所示的链接:输入命令:4、把远程分支拉到本地git fetch origin dev(dev为远程仓库的分支名)下图红色勾选的为可使用的分支名下面拉...原创 2020-09-19 18:44:07 · 140 阅读 · 0 评论