![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js继承
越努力,越幸运..........
这个作者很懒,什么都没留下…
展开
-
44.url参数解析器,以对象的形式返回
1.url.match(/(\w+)=(\w+)/gi); 正则匹配,返回匹配的数组 const _getParams = (url) => { // 补全代码 let arr = url.match(/(\w+)=(\w+)/gi); let obj = {}; arr.map(item => { let [key, value原创 2022-02-10 10:34:06 · 685 阅读 · 0 评论 -
43.千位符
1.正则匹配 function _comma(number) { // 补全代码 let str = number.toString(); return str.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); } 千位符正则解析:replace(/\d(?=(?:\d{3})+\b)/g, '$&,')原创 2022-02-09 11:24:20 · 272 阅读 · 0 评论 -
36.原生 js 实现点击按钮复制文本
一、原理分析浏览器提供了 copy 命令 ,可以复制选中的内容document.execCommand("copy")如果是输入框,可以通过 select() 方法,选中输入框的文本,然后调用 copy 命令,将文本复制到剪切板但是 select() 方法只对 和 有效,对于 就不好使最后我的解决方案是,在页面中添加一个 ,然后把它隐藏掉点击按钮的时候,先把 的 value 改为 的 innerText,然后复制 中的内容二、代码实现HTML 部分<style typ原创 2021-10-13 19:08:20 · 120 阅读 · 0 评论 -
35.3qiankun子应用配置以及配置注意事项
子应用修改配置1.修改vue.config.jsmodule.exports = { ....., devServer:{....}, // 加上 微前端改造代码 configureWebpack: { output: { library: 'admin', // admin这个应用名称(例如:存储命名是 obj-storage) libraryTarget: 'umd', }, }原创 2021-09-29 14:50:00 · 5159 阅读 · 0 评论 -
35.2.微前端 Initialize failed: invalid dom 之 dom加载出现的问题
这里遇到的问题是引入 Echarts因为在Dom还没加载的时候,option 获取元素,echarts.init(document.queryselect(’#dom’))就开始检测dom,并尝试去获取它,但是在vue中引用echarts的中,发现在模板dom还没加载的时候echarts.init() 就已经开始执行,所以会报错 Initialize failed: invalid dom2、解决办法:根本原因就是dom没加载,echarts没有检测到dom,那么我就让dom加载后再去获取dom,原创 2021-09-29 11:11:25 · 537 阅读 · 0 评论 -
35.1qiankun 子应用选择器失效问题
场景在基于 qiankun 的微前端架构下开发时,子应用代码内的选择器全部失效。例如 getElementById() 等方法是获取不到子应用的元素的。而当子应用有获取 dom 的需求时(例如需要使用echarts),就会遇到这个问题。产生原因qiankun 微前端框架基于 shadow dom 的形式生成子应用,主、子应用共用一个 document ,而 shadow dom 内的元素是不被暴露的。解决方法思路:在主应用内找到 shadowRoot 的父元素,利用 .shadowRoot 属性,原创 2021-09-29 11:08:35 · 1144 阅读 · 0 评论 -
34.基于xterm.js 实现Vue版本终端terminal
基于xterm.js 实现Vue版本终端terminal前端实现xtermnpm install --save xtermxterm-addon-fitxterm.js的插件,使终端的尺寸适合包含元素。npm install --save xterm-addon-fitxterm-addon-attachxterm.js的附加组件,用于附加到Web Socketnpm install --save xterm-addon-attach<temp原创 2021-09-13 17:21:17 · 5508 阅读 · 4 评论 -
34.input禁止输入的4种方法
方法1、readonly 1 <input type="text"value="哈哈哈"readonly="readonly">//使用readonly,字段为只读可复制 方法2、disabled 1 <input type="text"value="哈哈哈"disabled="disabled">//只读不可复制,无法选择, 文字会变成灰色 方法3、max length = “0...原创 2021-09-13 09:54:29 · 245 阅读 · 0 评论 -
30.数组去重的常用方法
数组去重,一般都是在面试的时候才会碰到,一般是要求手写数组去重方法的代码。如果是被提问到,数组去重的方法有哪些?你能答出其中的10种,面试官很有可能对你刮目相看。一、利用ES6 Set去重(ES6中最常用)function unique (arr) { return Array.from(new Set(arr))}var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, N原创 2021-08-04 21:39:59 · 53 阅读 · 0 评论 -
29.vue 实现动态表单,点击新增 增加一行输入框
存在一排必填,点击增加后会新增一行,点击每行后面的删除图标则会删除该行,新增按钮只会出现在最后一行1.动态表单部分2.data部分3.方法 <el-form ref="form" :rules="formRules" :inline="true" :model="form" label-width="80px"> <div v-for="(item, index) in form.dynamicItem" :key="index">原创 2021-07-20 21:17:30 · 4610 阅读 · 2 评论 -
28,自定义v-click-outside指令,实现下拉选功能
1.实现效果如下,2.代码如下<template> <div class="test"> <div class="wrap" v-click-outside> <el-input v-model="input" placeholder="请输入内容"></el-input> <div class="content" v-show="isShowContent"> <el-b原创 2021-07-18 10:52:38 · 302 阅读 · 0 评论 -
27.vue项目中使用svg+svg变色
需要实现的效果是图标为svg,可以根据选中状态变色.首先我们需要下包1.下包操作1.npm install vue2-svg-icon --save-dev2.然后你的package.json里面就会出现这个配置.3.然后main.js里面注册一下import Icon from 'vue2-svg-icon/Icon'Vue.component('icon',Icon);4.引入svg5.使用这个就是elementUI的导航组件,主要是标注那段代码是svg图标,w和h就是控制原创 2021-07-11 15:29:42 · 668 阅读 · 0 评论 -
26,vue基于elementui设置表格动态高度的几种方法
vue基于elementui设置表格动态高度的几种方法方法一 css + js的形式1.这个方法需要在表格外层设置一个div,原理是将表格的高度设置成外层div的高度,所以外层的div需要使用calc来设置高度,然后给表格设置:height="tableH"的属性<div class="table-wrapper" ref="tableWrapper" v-loading="loading"><el-table :data="tableData" stripe style="wid原创 2021-07-07 17:46:37 · 7020 阅读 · 0 评论 -
21,富文本编辑器使用(wangEditor)
项目有个需求,需要使用富文本编辑器,于是研究了一下wangEditor的使用方法,主要比较使用,有专门的维护团队1.首先下载,npm 安装 npm i wangeditor --save2.按照文档,使用https://www.wangeditor.com/3.封装一个子组件,可以重复使用<template> <div class="userWrap"> <div id="div1"> </div> </div>&原创 2021-06-05 17:14:38 · 241 阅读 · 0 评论 -
23.vue+px2rem实现pc端大屏自适应(rem适配)
配置前言项目构建:基于vue-cli3构建,使用postcss-px2rem px2rem-loader进行rem适配实现原理:每次打包,webpack通过使用插件postcss-px2rem,帮我们自动将px单位转换成rem单位前方有坑:UI框架部分组件使用JavaScript将css作为内联样式直接写在html标签内,打包适配时不会读取相关css,所以要配置相关样式,在style中需要"!important "进行样式覆盖。第一步,安装postcss-px2rem及px2rem-loade原创 2021-06-08 22:47:34 · 314 阅读 · 0 评论 -
19.图片上传组件(基于element)
封装文件上传组件<template> <div class="upload-wrap"> <co-upload :action="baseUrl + '/sys/pic/upload'" :http-request="httpRequest" ref="upload" name="file" :show-file-list="false" :on-success="handleAvatarSu原创 2021-05-26 23:07:47 · 134 阅读 · 0 评论 -
15.vue项目,pc端实现左右联动的效果图
1.通过,监视滚轮的变化,计算页面滚动后的最高点,对应右侧列表的下标,代码如下<template> <div class="sys_emp_detail"> <div class="container_wrap"> <div class="left_box" ref="itemList"> <div class="head_title" :style="原创 2021-03-21 15:19:24 · 972 阅读 · 1 评论 -
6.js继承的几种方式
想要继承,就必须要提供个父类(继承谁,提供继承的属性)一、原型链继承 重点:让新实例的原型等于父类的实例。 特点:1、实例可继承的属性有:实例的构造函数的属性,父类构造 函数属性,父类原型的属性。(新实例不会继承父类实例的属性!) 缺点:1、新实例无法向父类构造函数传参。 2、继承单一。 3、所有新实例都会共享父类实例的属性。(原型上的属性是 享的,一个实例修改了原型属性,另一个实例的原型属性也会被修改!) 二、借用构造函数继承原创 2021-02-03 09:22:37 · 99 阅读 · 0 评论