- 博客(134)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 vconsole 引入
defaultPlugins: ['system', 'network', 'element', 'storage'], // 可以在此设定要默认加载的面板。
2023-03-21 09:43:51
781
1
原创 Vue3外部插槽替换内部插槽
<template #default="{ data }"> <div v-if="$slots.default == null" style="padding-left: 6px;padding-right: 12px"> <i class="iconfont" v-html="data.code" :style="{color:data.color,verticalAlign:'middle',paddingRight:'5px'}">...
2022-02-17 19:24:33
617
原创 Vue3.0 + TS 防抖
防抖方法：const debounceEvent = ((func, wait = 2000) => { let timer; return function (...args) { if (timer) clearTimeout(timer); let callNow = !timer; timer = setTimeout(() => { timer = null; }, wait) if (callNow) func.app
2021-12-28 15:37:12
1216
原创 vue3.0 动态调用export进来的两种方法
1.在index文件中定义方法体const FORM = (instance,data)=>{ const urlAxios = instance.axios; const $this = instance.proxy; urlAxios.post({ url: "jd", data: { sid: instance.sessionId, cmd: '_COPY_PAGE_JSON',
2021-12-16 11:15:14
3477
原创 vue3 使用Bus总线
ts +vue31. main.ts 引入import mitt from "mitt"app.config.globalProperties.$bus = mitt();2.在传数据里import {Emitter} from 'mitt'const {ctx: $this}: any = getCurrentInstance();const bus = $this.$bus as Emitter;//排序const sortFun = (sortCase:
2021-06-09 18:35:18
3902
原创 Vue 动态生成表单item
1.首先 判断list（几个item）的长度，判断根据特定标识动态生成 form对象 （动态绑定的数据）2.绑定在组件上3.在子组件里进行监听 computed，并且emit出去大概过程如下：searchData.map((item: any) => { let modelData = item.field + item.id if (item.uicomponent == '复选组') { form[modelData] = []; } else if (i
2021-05-12 18:23:45
1121
原创 html加载vue组件
由于技术升级，之前 前后端不分离的项目，需要部分组件的形式实现，所以就有了html加载vue组件的需求，接下来 笔记???? ????两种方式 ： 第一种方式： 用 js type的方式引入组件 script type="text/x-template" id="tempApp"> <awsuiapp :modelTypes="modelTypes" :buttonLists="buttonLists"></awsuiapp></script>
2021-04-27 18:39:57
1869
原创 Object is possibly ‘null‘ 请问怎么解决？
1.把null的情况写入 let Param:string | null= prc.name2.写成any类型 (window as any).localStorage.getItem('name')
2021-04-24 14:45:21
2673
原创 面试 Json获取key和value的方法
通过 for...in和for...of实现 var person = {fname:"John", lname:"Doe", age:25}; for(x in person){ console.log(x)}//fname lname age var arr= [{ "type": "his_normal", "sa": "h_1", "q": "for (a in arr) {| console.log(a);//1,2|}|" }]
2021-03-11 18:29:18
559
原创 面试 css水平垂直居中的几种方法
第二天html 结构：<div class="wrap allCenter"> <div class="item allCenterChild"></div></div>第一种： .wrap{ width: 600px; height: 600px; border: 2px solid purple;}.item{ width: 150px; height: 150px; background-color: green
2021-03-09 15:06:59
123
原创 面试 css中标签语义化
第一天什么是标签语义化 根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。 标签语义化有什么意义？ 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看； 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用； 有利于seo：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重； 方便其他设备解析（如
2021-03-08 18:26:57
396
原创 html 垂直水平居中的两种方法
<!DOCTYPE html><html><head> <title>123</title></head><body> <div class="dv1" style="width:200px;height:300px;border:1px solid #ccc;"> <p>我们们们们们们们们们们们们们们们们们们们们们</p> </div> <.
2021-03-04 20:00:41
412
2
原创 Element table组件单元格合并（横向，纵向，表头）
近期做项目有合并单元格的案例，所以简单的解释如下分为两部分一部分为头部的合并另一部分为表体的合并表头的合并首先要知道header-cell-style 这个合并头部的方法解释如下：b包括四个参数分别是 row column rowIndex columnIndexrow column 行 列 rowIndex 行下标 columnIndex列下标下标可以参考下面这张图~实现方法： disCountHeader({ row, column, rowInde...
2020-12-10 11:27:16
5029
原创 css 父元素塌陷问题
首先有一个父盒子 里面有一个子盒子 （效果1如下），然后给父盒子一个margin-top 50px，然后让父盒子与子盒子之间添加间隙就给子盒子margin-top 60px；发现有问题了（效果2） 解决方案：① 可以为父元素定义边框 （如果不想要边框可以把颜色设置成 transparent--透明）------把子盒子与父盒子隔开② 可以为父元素定义内边距 （给父元素设置padding）------把子盒子与父盒子隔开③ 可以为父元素添加overflow：hidden...
2020-11-20 17:32:40
615
原创 elementUI解决el-checkbox自定义样式
默认样式（三种）：自定义样式：实现代码：HTML:<div class="formCss" style="margin-top: 20px"> <el-form ref="form" :model="sizeForm" label-width="100px" size="mini"> <el-form-item label="选择日期："> <el-date-picker v-model="sizeFo...
2020-11-19 17:37:31
10690
3
原创 js 字符串转数组
字符串转数组 首先想到的是split 方法let str = '1234567'console.log(str.split('')) // ["1", "2", "3", "4", "5", "6", "7"]let str1 = '1,2,3,4,5,6,7' console.log(str1.split(',')) //["1", "2", "3", "4", "5", "6", "7"]后来想到了 Array.from()用法如下：let str1 = '123567...
2020-11-06 18:01:26
20515
转载 Vue 中 Axios 的封装和 API 接口的管理
一、axios的封装在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护，直接推荐我们使用axios库。如果还对axios不了解的，可以移步axios文档。安装npminstallaxios;//安装axios引入一般我会在项目的sr...
2020-10-22 11:10:36
93
原创 :hover 添加边框 抖动问题
原因：设置border时设置了N px边框，多出的这 2N px，与其它元素产生了挤压， 导致div偏移解决：1.提前设置透明的 1px 的边框li {border:1px solid transparent}2.可以 提前设置 padding（多加border值）提前占位...
2020-10-22 10:49:52
1064
转载 idea 撤回已commit未push的代码
VSC => Git=> reset head=> 退回到上次commit=> 退回到第2次提交之前=> 退回到指定commit版本
2020-08-31 11:02:26
956
1
原创 element 动态设置tabel的高度
1.绑定变量 height <el-table :data="tableData" :header-cell-style="headerStyle" align="center" :height="tableHeight" stripe border> </el-table>2.定义变量tableHeight: "100%",3.定义方法 getHeight() { this.tableHeig
2020-08-11 19:28:54
1834
转载 element 日期选择器时间不对应问题
选中时间显示错误（和系统时间相差8个小时）原因参考:https://www.jianshu.com/p/a0020e18912c
2020-08-05 15:03:01
2306
1
原创 element tree 获取到父ID 并回显
描述：el-tree 子菜单未选中的情况，也能获取父节点Id，回显时后台也将父节点的Id传回来，但是子节点全部选中，主要解决这两个问题。1、获取父id①getHalfCheckedKeys 使用这个方法用来获取父节点半选择状态ID值this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())2、回显时获取父节点，子节点不能全选<el-tree @check-change="...
2020-07-30 15:08:28
955
原创 Vue-element 日期校验 结束时间大于开始时间
1、定义templete <el-form-item :label="$t('execution.StartingTime')" prop="startDateTime"> <el-date-picker v-model="startDateTime" type="datetime" placeholder="年/月/日 时:分:秒" value-form
2020-07-28 11:07:03
4741
1
原创 vue 变量名的字符串获取变量
需求：vue项目中存在变量option1和option2；通过option+'num'的形式进行读取变量的内容第一步：定义方法： changeOPtions(num){ let NumB = Number(num)+1; let option="option"+NumB; return option; }, //通过此方法拼接变量名称得到字符串第二步方法：let cc = this.changeOPtions(echartType);..
2020-07-17 17:18:16
3568
原创 element 修改dialog的背景颜色
实现需求：工作中有个需求dialog上只显示一个echart图，没有头，没有脚。后来进行修改样式，发下在scoped里面进行修改，没有一点鸟用~~后来查资料发现这个样式不能写在scoped里面，但是直接在<style>里面写就就会影响其他dialog的样式解决：.dialog-wrapper{ /deep/ .el-dialog__wrapper { .el-dialog { .el-dialog__body{ ba.
2020-07-05 13:43:28
10092
1
原创 vue select 单独组件实现
父组件：<systemName :systemNameList="systemNameList" :systemNameChecked="systemNameChecked" @choonseSystemName="changeSystemName"></systemName>:systemNameList="systemNameList" 初始化List用的:systemNameChecked="systemNameChecked" 选中回显用的@choo...
2020-06-05 14:27:02
543
原创 element 单选框 取消选中
<el-radio-group v-model="checked1" > <el-radio label="涉及疏整促工单" @click.native.prevent="radioChange1('涉及疏整促工单')"></el-radio></el-radio-group>radioChange1(txt){ this. checked1?this.checked1=false:this.checked1=txt;},...
2020-06-05 11:49:48
3073
原创 element el-cascader动态加载数据
需求：1.点击下拉框请求一级数据，选择一级请求数据获得二级数据，选择二级数据获得三级数据 2.任意一项都能够被选中实现效果：实现过程： <el-cascader v-model="partyOrganId" :show-all-levels="false" ref="sysCascader" :props="prop" @change="handleChange($event)" clearable>...
2020-06-05 11:45:01
11334
6
原创 html 可爱鼠标
实现：点击图片实现 鼠标改变实现思想：首先创建n+1个图片标签，+1是一个没有地址的img标签，为了后期动态添加图片地址的。选择点击哪个图片，就获取到哪个的src地址，动态赋给空的img，再根据 e.clientX和 e.clientY获取鼠标的位置，再为空img设置会位置，实现代码如下： <!DOCTYPE html> <html> ...
2020-04-21 10:07:20
513
原创 bootstrap 时间插件
页面显示实现：引入bootstrap必要的文件：<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.4...
2020-04-21 09:46:29
367
原创 vue 多选下拉框加搜索
首先引入必要的文件 <!--样式依赖--> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/bootstrap-select/1...
2020-04-21 09:02:01
2149
原创 js 简单的鼠标指针小图标
描述 点击哪个图片，哪个图片就变成鼠标小图标，具体代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=...
2020-03-26 21:08:58
989
原创 vue 点击按钮复制input内容
方法:例子: 复制 numbers 的值到剪切板 <el-col :span="20" > <el-form-item label="服务器ID" label-width="120px"> {{numbers}} </el-form-item> </el-col> <...
2020-03-19 19:49:34
1775
1
原创 IDEA中 格式化代码快捷键 查询
Idea查看格式代码快捷键 发现不少人是 Ctrl+Alt+L 然后我就试了N遍都不可用然后就去查看设置，setting（设置）---Keymap(快捷键) --- Main menu(主菜单) --- reformat code(重新格式化代码)---接下来可以任意 编辑你的快捷键啦...
2020-03-17 12:08:53
1838
2
原创 圣杯布局和双飞翼布局
1.两边宽度固定，中间宽度自适应圣杯布局：具体实现： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>圣杯布局</title> <style type='text/css'> body { ...
2020-03-11 23:15:04
97
原创 ** 前端笔试
1.快速排序2.圣杯布局3.影响web可用性标签和属性有哪些4.模拟new操作符实现了什么5.使用什么可以扩展string6.nodetype的类型7.当post请求时，content-type应该设置为什么8.关于重排和重绘，当页面元素颜色发生改变时，浏览器会发生什么9.iframe的缺点10.HTTP/2的特点11.css3新属性12. 哪些继承了n...
2020-03-05 17:25:49
179
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人