- 博客(56)
- 资源 (2)
- 收藏
- 关注
原创 Chrome浏览器中copy visible styled selection和复制
比如选中某个单词,但是使用键盘的Ctrl+C,复制出来的是 tDataList"。复制出来的实际内容后移了2位,但是右键选择copy visible styled selection,复制出来的就是完整的单词。这个问题只有谷歌浏览器才出现,使用其他浏览器并没有这种问题,但是也没解决,过了一段时间好像又好了。copy visible styled selection(复制带有可见样式的选择内容)
2023-05-16 16:45:22 333 1
原创 When you use ‘import‘, do you want to find the standard?
最近使用vs code开发,项目不知道是安装了哪个插件,采用../的引用方式全部报红色波浪线然后经过很多插件的排查,找到了,快把他卸载掉吧!
2022-05-30 09:40:28 100
原创 Vue使用Element的消息提示Message,使用customClass自定义样式
Element的Message常被用来实现提示功能,比如操作成功,操作失败的提示有时一些操作对接后台,错误信息会返回一个list:[ ],比如一个导入表格的接口,一些错误信息,后台返回的是这样: [ "第1行数据重复", "第3行编号名称不存在", "第4行数据为空", "第6行格式不正确" ]数据不多还好,但是一旦数据非常多,页面就会变成下面这样这样页面既不美观,也会导致一些属性失效,比如“是否显示关闭按钮”,根本看不到这个按钮了(因为这个按钮会垂直居中在messa
2022-04-19 16:35:52 9674 1
原创 Nginx部署项目出现404Not Found
前两天我把本地作为服务器,启动Nginx部署了一个vue项目,但是出现了下图最后是在nginx.conf文件的location / { }配置里多加一句try_files $uri $uri/ /index.html; location / { root (dist文件夹地址); index index.html; try_files $uri $uri/ /index.html; }...
2021-11-05 09:16:43 3596 1
原创 前端请求参数拼接在URL上变为乱码
前端在与后台调接口的时候,有时参数只有一个,或者很少这时候,参数就会拼接在URL后面,谷歌Chrome浏览器基本一点问题都没有,自己就包裹处理了,但是IE浏览器就会把参数变成乱码,导致请求失败、请求错误解决办法也很简单:在参数外面,用encodeURIComponent()包裹...
2021-07-20 10:32:16 1079
原创 Chrome(谷歌浏览器)安装Vue插件vue-devtools(图文详细教程)
使用Vue开发项目时,常会用到一款谷歌浏览器插件,vue-devtools安装成功后,运行本地Vue项目,打开浏览器控制台就如下:其中可以便捷的查看vueX的数据以及组件结构等,非常方便,安装步骤如下:1、首先给大家提供一个git地址,虽然官网也有地址(https://github.com/vuejs/vue-devtools.git),我认为不太好用给大家提供另一个git地址:https://gitee.com/zhang_banglong/vue-devtools.git打开里面就如
2021-03-12 22:48:08 46772 23
原创 Vue使用Element的表单Form必填项太多,导致代码冗余
Vue项目使用Element表单时,常会遇到表单很长,字段很多,必填项也多,曾经遇到过一张表单50多个字段,几乎全是必填项,本身ruleForm去定义就很长,再加上必填项rules的定义,光表单这点东西就100多行定义了,更别说页面中还有别的代码,整个页面看起来很不美观,也很冗余。下面介绍一种方法,可以减少rules的长度,主要针对:1、字段多表单长;2、只做必填项校验;3、几乎全是必填项原理就是:利用for循环来循环定义的表单ruleForm话不多说,直接上代码 created() {
2021-03-11 20:50:55 2214 3
原创 前端(Vue)实现自行分页的两种方法
前端做页面时,经常会遇到表格+分页的组合,有时因为一些原因,需要前端自己实现分页,下面介绍2中方法实现分页,方法一:slice方法slice(参数1,参数2)方法是返回一个新的数组对象参数1:起始下标数参数2:结束下标数(不计算在内)如data:[1,2,3,4,5,6,7,8],那么data.slice(0,3)就为下标为0,1,2,不包括下标为3的数,即[1,2,3],可以看成数学中的[0,3)slice方法详细讲解这个原理就和分页原理很相似,分页也是把一个很长的数组,按照每页多少条(s
2021-03-08 23:42:25 38512 16
原创 Vue使用Dayjs计算常用日期
在使用vue开发项目时,前端常常需要计算一些日期时间,如:计算周月截止日期计算XX天前/后的日期将时间戳转换为日期(YYYY-MM-DD)计算月天数日期转时间戳推荐一个轻量的处理时间和日期的 JavaScript 库:dayjs使用这个插件计算常用日期十分方便1、在项目中安装dayjs,命令为:npm install dayjs --save2、在main.js中,添加如下2句代码import dayjs from 'dayjs';Vue.prototype.dayjs = day
2021-03-08 00:53:17 2177 3
原创 Vue使用Element的日期选择器DatePicker,以周为单位
在Vue项目中使用Element组件中的日期选择器,当日期单位设置为周时候,我遇到许多小问题:文章目录一、选中一周后,显示的是*2020第42周*,我希望显示为*2020年10月12日至2020年10月18日*这样,或者自定义;二、不可选本周以后的日期,或者本周以前的日期不可选这里面有个小坑,得先看下提示:这个日期控件有个坑,就是选中日期后的时间,双向数据绑定(就是v-model="value"这个)的是起始日期的第二天,不论你把这个起始周设置为星期几都是这样,图一为默认起始周,起始周为周日图
2020-10-25 21:16:37 13212 6
原创 Vue动态样式:class用法
我们在做页面的时候,经常会用到动态样式,比如有3个按钮,选中了一个,选中那个样式变化,再选另一个,选的那一个样式变化,第一个又变成初始的样式,这个就叫做动态样式,一般用:class来实现。1、首先定义一个变量;2、写动态的class,&.activity{}3、在点击事假中;整个文件如下:<template> <div> <h1>动态样式</h1> <span class="money" :class="{
2020-10-24 14:40:41 10552 1
原创 安装node,安装淘宝镜像
安装node:Node官网安装淘宝镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org
2020-10-18 22:31:52 362
原创 Vue使用Element的表格Table显示树形数据,多选框全选无法选中全部节点
使用Element的组件Table表格,当使用树形数据再配合上多选框,如下:会出现一种问题,点击左上方全选,只能够选中一级树节点,子节点无法被选中,如图所示:想要实现点击全选就选中所有的表格,要另想办法,方法如下:1、首先给table设置一个ref;2、绑定一个@select-all方法;3、定义一个变量,来识别全选框是否被选中,默认为未被选中;checkedKeys: false,4、@select-all绑定的方法如下,Element的Table表格中,select-all表示当
2020-09-20 23:46:18 5092 7
原创 Vue使用Element的级联选择器Cascader,在方法中清空选项
最近使用vue写项目,用到的是ELement的框架,项目中有个地方用到了级联选择器,好多东西直接在官网都找不到。我要实现点击清空以后,去调用一个和点击下拉选项不一样方法,做这个功能的时候,也找到了如何在方法中清空级联选择器的选项。官网上只说明了想要清空级联选择器只需要添加一个clearable原理就是在级联选择器上面绑定一个监听1、首先添加一个 ref="cascaderHandle" 和clearable2、在要清空的函数方法中this.$refs.cascaderHandle.checke
2020-08-21 21:31:28 8463 9
原创 Vue使用Element的级联选择器Cascader,选中后下拉框自动关闭
这个方法是我在这篇文章中学到的=》详细原理讲解急着用可以先看看我这个简略版的,在级联选择器@change方法中,监听变化,首先添加一个ref="cascaderHandle",在@change绑定的方法中监听:this.$refs.cascaderHandle.dropDownVisible = false; <el-cascader :options="optionData" ref="cascaderHandle" clearable :
2020-08-20 22:50:10 6915 3
原创 Vue使用Element的级联选择器Cascader出现空白面板
最近使用Vue写项目,有用到Element的级联选择器<el-cascader>由于后台给的数据,不是太符合级联选择器数据的规范,比如children为空时,级联选择器会出现空白的面板,又比如给的是text而不是label,如果直接使用,不会显示文字,我也是找了很久,自己试了很久,才找到一种解决办法的。在Element-UI是的级联选择器中,只有children这个子节点,即使children: [],也会出现一个面板,就是图中的这个,为了去除这种空白的面板,需要对数据进行处理。下面这
2020-08-20 22:22:22 2215 7
原创 Vue使用Element的下拉框Select一些样式的修改
1、选中文字后,下来框的宽度和文字宽度一样2、去除下拉框的边框3、更改下拉的图标箭头
2020-08-20 21:18:08 8862 1
原创 Vue使用Element的折叠面板Collapse设置默认全部展开
这个适用于需要for循环 <el-collapse-item>负责展开的属性是value<el-collapse :value="opened"> <el-collapse-item v-for="o in List" :key="o.aaa":name="o.aaa"> <div>XXXXXXXXXXXXXXXXXXXXXXXX</div> </el-collapse-item></el-collapse&
2020-08-07 08:54:26 8446
原创 Vs Code中书写Vue代码,使用Ctrl+/快捷注释html代码出现//
Vs Code中书写Vue代码,使用Ctrl+/快捷注释html代码出现"//1、首先检查红色框内是不是vue,如果不是,调整成为Vue试试2、然后检查有没有安装插件,Vue 3 Snippets,如果有,请毫不犹豫的卸载掉它吧,我找了很久,试了很多次,我的是这个原因造成的(卸载后最好重启vs code)3、如果还不行,那就试着卸载veture,先卸载再重新安装...
2020-08-06 15:28:39 3497
原创 判断Vue项目以何种命令运行
一个Vue项目拉下来以后,首先要做的肯定是npm install或者cnpm install要想知道项目应该以何种命令跑起来,应该去查看package.json文件中“scripts”,如果是serve ,运行命令即为npm run serve如果是dev,运行命令就是npm run dev,以次类推就可以知道vue项目的运行命令了...
2020-07-31 08:49:24 2580
原创 新建一个vue-cli@3 项目,并使用And Design Vue和Element组件库
1、要创建Vue3项目,首先自己电脑中要安装配置好node,cnpm,vue;2、vue create 项目名称3、项目新建成功以后,使用命令npm run serve运行项目4、一般使用vue都会配合ant design vue或者element组件库来使用,网址分别为Ant Design Vue和Element5、若使用ant design vue,要先npm i --save ant-design-vue,6、使用element要先vue add element...
2020-07-28 16:59:35 679 1
原创 Visual Studio Code中好用的插件(Vue)
插件1:koroFileHeader这个可以快捷生成头部注释,也可以快捷生成块注释
2020-07-27 10:05:52 442 3
原创 Visual Studio Code中好用的插件(Angular)
IntelliSense for CSS class names in HTML
2020-07-27 09:37:25 584
原创 将Angular+Spring Boot的项目发布到阿里云ESC服务器(windows)上
首先我是一个小白,很菜的,我也是根据网上很多很多的教程学习,这算是我的一个总结,我只能勉勉强强把项目发布在公网上。比如安装配置一些环境我省略了1、你购买了一个阿里云ESC服务器,这就不用我详细讲了,我买的是windows系统的阿里云服务器;2、进入阿里云控制台,重置密码Administrator3、快捷键win+R,输入mstsc,会弹出验证,账户名为4、5、6、7、8、前端有...
2020-05-15 16:05:16 502 1
原创 vue-cli3与后台进行对接
1、首先vue-cli3没有index.js文件,要在根目录下创建 vue.config.js(可完全复制)const path = require("path");const webpack = require("webpack");// const glob = require("glob-all");// const PurgecssPlugin = require("purgec...
2020-05-05 15:25:45 1811
原创 在angular中使用假数据(mock)
前端有时候多个页面需要相同的数据,如果在ts文件里面写大量假数据,很长也容易混乱,用mock就会方便很多,1、首先安装mockyarn add @delon/mock -D2、在app.module.ts文件的 imports:[ ] 中添加(第一步完成以后,系统会自动生成一个文件夹environment ):import { DelonMockModule } from '@delon...
2020-03-19 23:31:20 1761
原创 关于ng-alain的st、sf一些小功能的总结
1、ng-alain其中的st表格,有STColumnButtonDrawer(抽屉)和STColumnButtonModal(模态框),如列表内容太多,列表一行无法显示,点击一个按钮,出来一个抽屉,抽屉里面是这一行的全部内容, columns: STColumn[] = [ { title: '操作',//表头名字 index: 'operate ', ...
2020-03-17 22:35:16 4104
Translate.js
2019-12-23
sf-demo.rar
2019-12-05
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人