u010328533的博客

原创 elementui 里使用input 密码框,输入时禁止弹出浏览器历史密码提示框

解决方案,使用css的 -webkit-text-security: disc;官方api上,使用autocomplete属性不生效。

原创 el-tooltip宽度超过父容器的宽度,导致提示框不跟随文字内容

实现方式为: 给 tooltip一个display属性,除inline以外的任意值。

原创 改造el-dropdown ,实现多选效果,且当选项只剩下一个时,不允许取消

其中virtual-list是使用的插件,使得下拉数据多的时候,不会出现卡顿。getName方法用来处理选中值的展示方式,根据业务逻辑自行处理。在css里面定义一个activeNode的样式就可以了。正常不使用虚拟列表的时候可以这样写。

原创 css实现,正常情况下div从左到右一次排列,宽度超出时,右侧最后一个div固定住,左侧其他div滚动

【代码】css实现,正常情况下div从左到右一次排列,宽度超出时,右侧最后一个div固定住,左侧其他div滚动。

原创 css实现卡片的左上角有一个三角形的遮盖效果

卡片的左上角有一个绿色的三角形标签,用来区分状态。

原创 el-row + el-form表单里的item项样式错位

elementui,样式

原创 PC端实现左右两侧导航双向滚动

滚动右侧区域，模块标题到达顶部，对应左侧菜单会高亮。点击左侧导航菜单，右侧对应的模块会滚动到顶部位置。

原创 js取出数组里面索引值为奇数/偶数的元素

数组处理方法

原创 elmentui 使对话框在页面中上下左右居中，高度过高内部出现滚动条

elemntui 对话框居中对齐

原创 vue 使用a标签跨域下载文件

vue项目中下载文件场景：项目中下载文件过大时接口无法正常响应， 后端给的解决方案是从另一个文件服务器上下载文件，所以提供的是一个跨域访问的api接口，前端需跨域调用后端接口下载文件// 下载 async downLoad(row) { const res = await getDownUrl({ 先调普通接口，后端返回一个跨域的url packId: row.id }) if (!res.isSuccess) { ret

原创 echarts 图表，tooltip被容器遮挡，显示不全

echarts图表tooltip显示不全场景，一个对话框里展示6个eacharts图表，容器高度不够，导致图表的tooltip被遮挡，如图尝试使用echarts的position属性控制，但效果不好，最后使用confine属性解决官方文档解释是代码实现： options: { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow'

原创 vue 项目横向菜单item过多导致换行问题

vue 项目横向菜单item过多导致换行问题问题：解决方案：菜单默认展示8个，超过8个时出现左右箭头，可以切换代码实现：<template> <div class="scrollbar"> <!-- <el-scrollbar wrap-class="scrollbar-wrapper"> --> <el-row type="flex"> <span v-if="showDrop" class

原创 vue 项目中，动态修改浏览器标签页的图标

vue 项目中，动态修改浏览器标签页的图标需求：项目中有一个入口可以修改平台的名称和图标，图标同步展示为浏览器页签的图标实现：1.找到项目中的app.vue 文件，动态创建link标签，调用后端接口，获取返回的图片，我的项目中，后端返回的图片格式为base64格式<template> <div id="app"> <router-view /> </div></template><script>i

原创 vue项目中，在el-dialog 对话框里使用ref获取表格，报undefined

vue项目中，在el-dialog 对话框里使用ref获取表格，报undefined

原创 elementui 输入框下拉面板宽度跟随输入框宽度

elementui 输入框下拉面板宽度跟随输入框宽度 <el-form-item label="业务系统" prop="businessSystemId" class="select-mul" v-else> <el-select v-model="projectForm.businessSystemIdList" placeholder="请选择业务系统"

原创 vue 项目中 base64格式文件下载

vue 项目中 base64格式文件下载其中 this.info 是里包含后端返回的base64文件数据结构如图<template> <div> <el-dialog :title="title" width="40%" :visible.sync="visible" :before-close="onClose" :close-on-click-modal="false" v-on=

原创 vue 项目中 制作日历

原创 vue + elementui项目中，修改全局滚动条样式

vue + elementui项目中，修改全局滚动条样式在全局style样式文件里写/**修改全局的滚动条*//**滚动条的宽度*/::-webkit-scrollbar { width: 8px; //y轴宽度 height: 8px; //x轴高度 }//滚动条的滑块::-webkit-scrollbar-thumb { background-color: #eaecf1; border-radius: 3px;}//修改表格的滚动条.

原创 前端常见正则

前端常见正则1.不超过20位由字母、数字或者下划线或中划线组成的标识 pattern: '^[A-Za-z0-9_-]{1,20}$',2.不超过50位由字母、数字或者下划线或.或@组成的登录账号 pattern: '^[a-zA-Z0-9_@.]{1,50}$',3.不超过50位由字母、数字或者下划线组成的名称 pattern: '^[a-zA-Z0-9_\\u4e00-\\u9fa5]{1,50}$',...

原创 vue + elementui 项目中使用clipboard2 复制标题时提示this.$messsage is not a function

vue + elementui 项目中使用clipboard21.安装依赖包npm install vue-clipboard2 --save2.在项目main.js 文件中引入import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard)3.具体页面中使用 // 复制标题到剪贴板 titleCopy(row) { const _this = this this.$copyText(`$

原创 elementui 的table实现列合并

实现效果如下，根据后端接口返回的数据，功能需求编号相同的实现行合并实现代码如下：<template> <div> <j-table ref="table" v-loading="loading" :data="tableData" :span-method="arraySpanMethod" :request="getTableList" :mergeList="['issueKey']"

原创 css实现ul下一组li高度递增

css实现ul下一组li高度递增实现效果如图：代码：ul { list-style: none; display: flex; align-items: baseline; justify-content: space-between;}li { width: 50px; background: #000;}@for $i from 1 through 10 { li:nth-child(#{$i}) { height: calc(#{$i} * 20px

原创 vue +elementui 项目中表单提交 同时上传图片，转为base64格式传给后端

1.新增应用时时一个form 表单，其中一个是用户上传应用图标。2.要求传给后端时以base64格式，需要前端转换。在上传时的chaneg事件里转，完整代码如下<template> <j-page> <div slot="content"> <!-- <el-button type="text" icon="el-icon-back">返回</el-button> --> <el-butt

原创 GIT 使用

1.拿到一个新工程，创建自己的私库，点fork就可以创建完成。2.git clone 自己的私库地址3.本地在私库目录下启动cmd，创建dev分支并切换到dev 分支，在dev分支上进行开发命令行是 git checkout -b DEV4.把新分支push 到gitlab上命令行是 git push origin DEV5.就可以在gitlab自己的私库上看到自己的dev分支了...

原创 vue中使用elementui做表单提交时，同时验证多个form

多个表单同时验证项目中遇到这样的多个表单同时提交，内容太多，分成两个form表单，一个是basicForm，一个是advanceForm，点击确定按钮时同时验证，验证通过提交表单，有一个不通过则不提交，代码是这样写的 async saveInfo() { // console.log(this.exampleData.map(r => r.exampleName)); // console.log(this.userData.map(r => r.userEx

原创 Avoid mutating a prop directly since the value will be overwritten whenever the parent component re

vue 中父子组件调用时报错Avoid mutating a prop directly since the value will be overwritten项目中使用vue ，组件化开发过程中，将新增对话框分离为一个子组件父页面内容子页面内容这里用一个自定义dbVisible属性，传递控制这个抽屉的显示与隐藏，直接这样写的话页面会报错如图所示查了一下，这个报错是因为单向数据流所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组

原创 D3教程

1. 第一步，‘安装’D3D3 是一个 JavaScript 函数库，并不需要npm那种安装，它只有一个文件，在 HTML 中引用即可。在d3官网可以下载所需文件。或者直接引入cdn链接。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca

原创 Mongodb的安装及使用

1.第一步，在官网下载Mongodb软件，按提示操作即可，中间会有一个"Custom(自定义)" ，默认是装在c盘，如果你需要安装在其他的盘，可以选择这个自定义，不需要更改其它配置，只需要修改你想安装的路径即可，然后一路next。2.安装成功之后去到你安装的目录下，我的时默认安装，装在c盘，如图，装好之后配一下环境变量3.配好环境变量之后就可以先在任意地方打开cmd 窗口，输入mong...

原创 钉钉小程序开发过程中遇到的问题

钉钉小程序开发过程中遇到的问题钉钉入门小白，写一些自己开发过程中遇到的问题，因为官方文档不是很清晰，在百度上查到的有效资源也不多，可能会有更好的解决办法，如果写错了欢迎私信我给我指出，一起去交流一起进步哦轮播图无显示第一次接触钉钉小程序，按照官网文档操作，copy代码到编辑器发现轮播图没有实现，官网代码是这样的下面是copy到编辑器里面的效果这里只是去掉下面一些我不需要的but...

原创 登录与登出业务的相关技术

网站登录与登出的实现#http是无状态的，实现登录与登出需要我们做到状态保持#通过cookie在客户端记录状态#通过session在服务器端记录状态#通过tooken方式维持状态标题一般情况下，如果前端与服务端存在跨域问题就选择使用tooken，不存在就使用cookie和session的方式...

原创 Angular中使用@ViewChild获取DOM节点时报错

Angular中使用@ViewChild获取DOM节点时报错Expected 2 arguments, but got 1.#html代码是这样的<div #myBox> 这是一个DOM节点</div>ts代码是import { Component, OnInit ,ViewChild,ElementRef} from '@angular/core';...

原创 Angular生命周期函数以及常用的生命周期

Angular的生命周期函数## ngOnChanges()当 Angular（重新）设置数据绑定输入属性时响应。 该方法接受当前和上一属性值的 SimpleChanges 对象在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。## ngOnInit()在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。在第一...

原创 Angualr使用双向数据绑定，push输入框的内容到数组里面去的时候报错

在使用Angular做双向数据绑定，需求是实现保留搜索记录的功能时出现问题，将input框输入的内容push进数组里面，显示在页面上#html代码<div class="page"><input type="text" [(ngModel)]="keywords"><button (click)="serach()">click</button&gt...

原创 Angular 6中使用socket.io报global is not defined 错误如何解决

Angular 6中使用socket.io报global is not defined 错误怎么办在Angular-Cli创建的项目文件中有一个叫polyfills.ts文件在这个文件里面加上一行代码就可以了（window as any）.global = window...

原创 使用ngModel的时候出现报错怎么解决？

在Angular中的表单中使用ngModel做双向数据绑定时，出现报错Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.<div class="card"> <div class="card-header">添加用户</div> <div class="card-...

转载 Angular无法使用[(ngModel)]解决方法

Angular无法使用[(ngModel)]解决方法https://blog.csdn.net/Crazy_Sakura/article/details/88569993

原创 Angular中的指令（Directives）

Angular中的指令分为属性指令和结构性指令属性指令（Attribute Directives）看起来像HTML的属性设置，有可能进行数据绑定或时间绑定只能影响/改变已经添加存在的元素对象<div nz-col nzSpan="11" style="padding-left: 10px;float: right"> <app-list-handle ...

原创 Angular中怎么让表格组件里面的暂无数据隐藏？

使用NG-ZERO组件制作表格时，nz-table表格会有自带的"暂无数据",怎么让它隐藏？如图<nz-table #borderedTable nzBordered> <tbody> <tr> <td>...

转载 jQuery选择器有哪几种？

https://www.php.cn/js-tutorial-411539.html

转载 Web前端之iframe详解

https://www.cnblogs.com/hq233/p/9849939.html