- 博客(91)
- 资源 (12)
- 收藏
- 关注
RSS订阅
原创 前端面试总结（js基础篇）
js 中的堆和栈基本数据类型：undefined、null、number、boolean、string;基本数据类型值指保存在栈内存中的简单数据段。访问方式是按值访问。引用数据类型：Object、array、function、data引用数据类型值指保存在堆内存中的对象。也就是，变量中保存的实际上的只是一个指针，这个指针指向内存中的另一个位置，该位置保存着对象。访问方式是按引用访问== 和 === 区别1、对于string,number等基础类型，==和===是有区别的1）不同类型间比较
2022-02-22 18:42:05
778
转载 js数组的常用api
操作数组的方法join()将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符var arr = ["a", "b", "c"]; console.log(arr.join()); // a, b, c console.log(arr.join("-")); // a-b-cpush()和pop()push()：可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。pop()：数组末尾移除最后一项，减少数组的 length 值
2020-08-06 16:37:30
764
转载 前端面试总结（vue篇）
vue的优点1、vue是个轻量级的框架，是一个构建数据的视图集合，大小只有几十Kb2、vue是组件化开发，适合多人开发3、vue中的双向数据绑定更方便操作表单数据4、因为vue是MVVM的框架，视图，数据，结构分离使数据的更改更为简单5、vuex可以管理所有组件用到的数据，不需要借助之前props在组件间传值6、官方文档通俗易懂，易于理解和学习；vue父子组件之间传递数据1、父组件向子组件传递数据通过props，例子如下<template> <div> .
2020-07-21 15:04:40
25438
1
原创 input表单限制仅输入数字（常用于编号查询）
<el-input size="small" v-model.trim="queryState.singleAuditContentId" placeholder="请输入编号" maxlength="19" clearable @input="e => queryState.singleAuditContentId = validNumber (e)" ></el-i...
2022-05-30 14:21:47
254
原创 富文本编辑器判断是否有实际输入的内容
if(isNull(tepState.content)){ ElMessage.warning("输入内容不能为空"); return; } const isNull = (content:string) =>{ let filterContent = content.replace(/<[^<>]+>/g, "").replace(/&a...
2022-05-24 15:08:12
628
原创 vue中动态组件component的实际应用
定义vue提供了一个内置的组件，专门用来实现动态组件的渲染：通过 is 属性动态指定要渲染的组件<component is="组件名称"></component>使用单独使用component 会频繁的触发组件的创建和销毁,性能不好,且会丢失组件状态，所以一般搭配keepalive组件使用，缓存组件状态，用于切换显示的组件会触发activated和deactivated两个生命周期函数，组件激活时调用activated组件冻结时调用deactivated<tem
2022-04-13 11:48:30
1312
原创 vue3项目中简单的wangEnduit富文本编辑器封装
组件代码<template lang="html"> <div class="editor"> <div ref="toolbar" class="toolbar"></div> <div ref="editor" class="text"></div> </div></template><script lang="ts"> import E from 'wang.
2022-04-06 17:34:33
489
1
原创 大陆港澳台身份证正则验证
来自隔壁老王的身份证正则验证/** * 身份证号码校验 * @param {String} idCard * @returns */export function verifyIdCard(idCard) { const patten = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(
2022-04-02 11:09:38
551
原创 js实现鼠标选取文字的时候避免触发点击事件
// 点击了预览 const preview = () => { const txt = window.getSelection ? window.getSelection() : (document as any).selection.createRange().text; // console.log(txt,'txt'); if(txt.type ==='Range') return; isPreview.value ...
2022-03-31 11:19:47
519
原创 js实现复制功能
<i class="el-icon-document-copy copyIcon" @click="copyId(cardData.id)"></i> const copyId = (contentId:any)=>{ // console.log(props.cardData.id) let _input = document.createElement('input'); // 直接构建input // _input.value
2022-03-31 09:28:05
501
原创 vue3+ts项目使用自定义指令实现根据角色权限控制显示隐藏
在src目录下新建directives文件夹，然后在文件夹中新建一个permission.ts文件，代码如下import session from '@/utils/session';import type { ObjectDirective } from 'vue';const userInfo = session.get('unified_management_userInfo');const getRole = () => { if (userInfo && .
2022-03-30 11:02:14
1732
原创 实现echart柱形图上方自定义图片显示
效果图 markPoint: { data: [ { xAxis: 0, //放需要展示图片的x轴索引
2022-03-25 14:40:02
3647
1
原创 flex布局属性小结
作用Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。行内元素也可以使用 Flex 布局。Webkit 内核的浏览器，必须加上-webkit前缀。注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。属性容器属性flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-co
2022-03-24 15:16:18
79
原创 提高switch语句可读性的写法
用对象字面量替换switch语句let dayswitch(type) { case '1': day= '星期一'; break; case '2': day= '星期二'; break; case '3': day = '星期三'; break; default: day= '周末';}const menu = { '1': '星期一',
2022-03-24 10:24:01
377
原创 Vue3+TypeScript学习笔记
ref与reactive的使用ref作用：一般用来定义一个基本类型的响应式数据，创建一个包含响应式数据的引用(reference)对象用法：js中操作数据: xxx.value，模板中操作数据: 不需要.value<template> <h2>{{count}}</h2> <hr> <button @click="update">更新</button></template><script&g
2022-03-21 10:01:56
1333
原创 空值合并运算符与可选链操作符
空值合并运算符??在处理输入框相关业务时，往往会判断输入框未输入值的场景if(value !== null && value !== undefined && value !== ''){ //...}改进版if(value??'' !== ''){ //...}空值合并操作符（??）是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。与逻辑或操作符（||）不同，逻辑或操作符会在左侧
2021-10-12 10:18:44
344
原创 elementUI的日期控件选择时间范围控制
<el-date-picker v-model="formData.time" placeholder="请选择" type="daterange" :clearable="false" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="...
2021-09-15 14:24:48
570
原创 参数判空函数
export function validateEmpty(obj) { const keys = Object.keys(obj); return keys.some(prop => { return !!obj[prop] })}export function trim(str) { return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, "");}
2021-09-08 18:28:25
159
原创 vue根据索引修改数组里对象的属性
this.$set(this.editForm.cnofigArr[index], 'disabled', false) index为数组索引disabled为对象属性false为改后的值
2021-07-13 16:35:39
1229
原创 ElementUI中checkbox绑定值为布尔、字符串或数字类型
布尔值<template> <!-- `checked` 为 true 或 false --> <el-checkbox v-model="checked">备选项</el-checkbox></template><script> export default { data() { return { checked: true }; } };</s.
2021-06-22 15:08:24
3848
1
原创 elementUI给动态生成的输入框加校验
<el-row v-for="(batch,couponIndex) in formData.skuInfos" :key="couponIndex"> <el-form-item class="is-shrink" :label="`商品编码${couponIndex+1}：`" :prop="'skuInfos.' + couponIndex + '.skuCode'" :rules="{required: t...
2021-06-09 16:21:39
724
原创 vue+elementUI项目封装分页组件
src/components/pagination<template><!--分页--><el-col :span="24" class="toolbar" :data-total="total" :data-size="pageSize" :data-pageSizes="pageSizes"> <el-pagination layout="total, sizes, prev, pager, next, jumper" @size-chan
2021-05-31 10:56:51
219
原创 deep 深度作用选择器
vue组件中，在 style 设置为 scoped 的时候，里面在写样式对子组件是不生效的，如果想让某些样式对所以子组件都生效，可以使用 /deep/ 深度选择器。//无效.focus .el-dialog__title{ color:red !important}//有效.focus /deep/ .el-dialog__title{ color:red;}...
2021-05-31 10:38:34
171
原创 2021前端进阶指南
JavaScriptjs查漏补缺高阶js教程ES6入门js代码规范TypeScript 教程Node.js学习CSScss的各种效果实现CSS 常用样式汇集了实现各种加载效果的 CSS 代码片段面试前端面试常考问题整理，按模块知识点分类：https://blog.poetries.top/FE-Interview-Questions/前端开发面试题: https://github.com/markyun/My-blog/tree/master/Front-end-Deve
2021-05-11 10:45:48
179
原创 路由拦截器
import Cookies from 'js-cookie';import axios from 'axios';import { getToken } from './token';// const { CancelToken } = axios;// 初始化配置const http = axios.create({ baseURL: '/api',});// // 请求拦截器http.interceptors.request.use( (config) => {
2021-04-16 15:43:27
529
原创 js非布尔值的取反运算
! undefined // true! null // true! 0 // true! NaN // true! "" // true! 11 // false! 'string' // false! [] // false! {} // false
2021-03-08 09:25:03
730
原创 es6解构赋值的实际应用
接受剩余参数var [a,b,...c] = [1,2,3,4,5,6,7];console.log(a);console.log(b);console.log(c); //[3,4,5,6,7]…运算符也可以作用于对象，通常用于一个情况：创建obj的副本，仅仅改变obj的某一（些）个属性。(常用于echart图表参数动态渲染)this.chart.series={ ...this.objTemp, name: data.modelName, .
2021-01-20 11:28:47
130
原创 vue条件语句v-if中条件较多时优雅写法
普通写法v-if=" type==1 || type==2 || type==3 "优雅写法v-if=" [1,2,3].includes(type) "
2021-01-13 15:41:46
4471
2
原创 vue插槽
概念插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签使用场景直接填充内容在子组件中放一个占位符<template> <div> <span>操作</span> <slot></slot>
2021-01-12 10:33:08
124
原创 echart图表组合自定义设置tooltip的formatter
tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' ...
2020-12-10 17:01:14
831
原创 判断数组和对象的方法
判断是否为数组Array.isArray() a instanceof Array判断是否为对象 var arr = ['aa','bb','cc']; var obj = { a: 'aa', .
2020-09-18 10:35:13
280
原创 vue自定义过滤器以及全局定义过滤器的方法
自定义过滤器html部分 <div class="item-inner"> <div class="item-title">支付方式：</div> <div>{{item.paymentMethod | paymentMethod}}</div> </div>js部分var vm=new Vue({ el:"#app", data:{ msg:'' }, .
2020-07-24 15:25:20
638
原创 echarts折线图标识最大值
series: [ { name: "总需量", symbolSize: 5, data: demandArr, type: "line", // smooth:true, showSymbol: false, markPoint: v...
2020-07-08 11:19:48
6973
原创 vue项目实现echarts图表最大化显示功能
由于echart工具栏没有提供最大化功能，只好使用elementUI的el-dialog自己写一个类似的功能，效果如下貌似这个放大效果作用不大（-_-||）下面放代码吧结构部分 <div class="picItem boxShardow"> <div class="header"> <span>功率曲线</span> <i class="el-icon-rank" @cli
2020-06-19 16:10:31
2106
2
原创 vue-element-admin项目实现excel表格导出
安装依赖npm install xlsx file-saver -Snpm install script-loader -S -D在需要导出excel的页面执行以下方法 <el-button v-if="visible" :loading="downloadLoading" style='float:right;margin:7px 10px 0 0 ' size="mini" type="info" icon="el-icon-document" @click='exportEx..
2020-06-17 10:33:59
3712
2
原创 适应不同尺寸比例屏幕的css样式
div{ height: calc(100vh - 100px); }设置div的高度为当前窗口高度-100px
2020-06-12 14:22:39
830
原创 实现elementUI的el-date-picker自动弹开
点击左边时间控件选择后自动弹出右边时间控件 <el-date-picker size="mini" v-model="monthBg" type="month" :picker-options="pickerOptions0" placeholder="选择开始月份" @change = 'chooseBg'> </el-date-picker> &.
2020-06-03 14:57:09
5801
原创 echart图表实现动态改变纵坐标的最小值（解决y轴波动太小问题）
yAxis: { name: "KM", type: "value", min: function(value){ return value.min; } }在yAxis属性中加入以下代码 min: function(value){ return value.min; }...
2020-05-20 15:44:57
2923
原创 vue项目实现定时刷新和关闭刷新功能
<div class="refleshBtn"> <el-button type="primary" plain size="mini" @click="recovery">恢复刷新</el-button> <el-button type="primary" size="mini" @click="stopReflash">停止刷新</el-button> </div&g...
2020-05-19 16:40:47
1430
element-ui.zip
2019-11-29
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人