- 博客(63)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 二次封装组件element-ui的el-select多选tag数值多余隐藏
element-ui的Select 选择器，多选自动隐藏多余标签
2022-11-18 17:05:44
2703
2
原创 vue中富文本tinymce使用
vue中富文本tinymce使用tinymce是国外的一款富文本编辑器，开源可商用，免费免费免费！！！插件丰富、可扩展性强、界面好看、提供经典、内联、沉浸无干扰三种模式、对标准支持优秀（自v5开始）、多语言支持都是对他的描述！使用下载npm i [email protected] @tinymce/[email protected] -S下载好了后在node_modules里会看到如下结构在vue项目中新建tinymce文件夹（一般放在static或者public文件夹中）然后复制下面这几
2022-05-30 12:00:05
1737
1
原创 el-input自定义指令封装
自定义指令 - 输入框限制将以下代码复制到一个js文件中，然后在入口文件main.js中import引入即可；指令参数 max 限制最大输入（可选） min 限制最小输入（可选） places保留小数点位数（可选，默认为2位）step限制输入长度（可选，默认为16位长度）/***@max {number}//最大值*@min {number}//最小值*@places {number}//小数位数(默认为2)*@step {number}//步长(默认为16位)*/imp
2022-04-21 09:19:55
974
原创 vue返回顶部组件
返回顶部<template> <div class="topnav" v-if="isShow"> <div @click="top"><i class="iconfont icon-zhiding"></i></div> </div></template><script>export default { name: 'topnav', data() { return {
2021-11-02 17:28:40
239
原创 js替换链接
页面中存在id=jsContainer的DOM元素。该DOM元素内会给出一段随机文本，可能包含一些链接，比如https://www.baidu.com，或者www.baidu.com?from=onlineExam，如果出现链接文本，请给该链接文本加上链接标签，用户点击后能直接在新窗口中打开该链接。请完成 link 函数，完成该功能 1、container只有纯文本内容，不包含其他dom元素2、识别所有以http://、https://或者www.开始的链接 3、所有www.开头的链接，默认使用 .
2021-09-29 10:00:08
1313
1
原创 js计时器
找出数组 arr 中重复出现过的元素（不用考虑返回顺序）例[1, 2, 4, 4, 3, 3, 1, 5, 3]//输入[1, 3, 4]//输出 function duplicates(arr) { var temp = []; arr.forEach(function(elem){ if(arr.indexOf(elem) != arr.lastIndexOf(elem) && temp.indexOf(elem) == -1){
2021-09-28 16:25:38
265
原创 js统计次数
统计数组 arr 中值等于 item 的元素出现的次数例：[1, 2, 4, 4, 3, 4, 3], 4//输入：3//输出：function count(arr, item) { var num = 0; arr.forEach(function(a){ if(a == item){ num++; } }); return num;}function count(arr, item) {
2021-09-28 15:39:06
553
原创 js数组合并
例:[1, 2, 3, 4], ['a', 'b', 'c', 1]//输入[1, 2, 3, 4, 'a', 'b', 'c', 1]//输出//利用concatfunction concat(arr1, arr2) { return arr1.concat(arr2);}//利用slice+push.apply function concat(arr1, arr2) { var newArr=arr1.slice(0); [].push.apply(newArr
2021-09-28 15:33:38
73
原创 js查找数组元素位置
找出元素 item 在给定数组 arr 中的位置如果数组中存在 item，则返回元素在数组中的位置，否则返回 -1例[ 1, 2, 3, 4 ], 3 // 输入：2 // 输出：function indexOf(arr, item) { return (arr.indexOf(item));}function indexOf(arr, item) {while(arr.length > 0) {return arr.indexOf(item);}re
2021-09-28 15:26:41
7238
原创 js字符串字符统计
统计字符串中每个字符的出现频率，返回一个 Object，key 为统计字符，value 为出现频率不限制 key 的顺序输入的字符串参数不会为空忽略空白字符例'hello world'//输入{h: 1, e: 1, l: 3, o: 2, w: 1, r: 1, d: 1}//输出function count(str) { str = str.trim().split(' '); let tempA = '';
2021-09-28 15:20:36
446
原创 js将字符串转换为驼峰格式
css 中经常有类似 background-image 这种通过 - 连接的字符，通过 javascript 设置样式的时候需要将这种样式转换成 backgroundImage 驼峰格式，请完成此转换功能以 - 为分隔符，将第二个起的非空单词首字母转为大写-webkit-border-image 转换后的结果为 webkitBorderImagefunction cssStyle2DomStyle(sName) { const reg = /-(.)/g; return sN
2021-09-28 15:16:18
3741
原创 js时间格式化输出
例//输入：formatDate(new Date(1409894060000), 'yyyy-MM-dd HH:mm:ss 星期w')//输出：2014-09-05 13:14:20 星期五function formatDate(t,str){ var obj = { yyyy:t.getFullYear(), yy:(""+ t.getFullYear()).slice(-2), M:t.getMonth()+1, MM:("0"+ (t.getMo
2021-09-28 15:12:18
507
原创 js数组去重
数组去重示例[false, true, undefined, null, NaN, 0, 1, {}, {}, 'a', 'a', NaN] // 输入[false, true, undefined, null, NaN, 0, 1, {}, {}, 'a'] // 输出Array.prototype.uniq = function () { return Array.from(new Set(this));}Array.prototype.uniq = functio
2021-09-28 15:07:24
66
原创 js获取 url 参数
js获取 url 参数获取 url 中的参数指定参数名称，返回该参数的值 或者 空字符串不指定参数名称，返回全部的参数对象 或者 {}如果存在多个同名参数，则返回数组不支持URLSearchParams方法function getUrlParam(sUrl, sKey) { let sParam = sUrl.split("?")[1].split("#")[0]; //key=1&key=2&key=3&test=4 let
2021-09-28 14:59:52
585
原创 js修改 this 指向
封装函数 f，使 f 的 this 指向指定的对象call()、bind()、apply()的用法，改变this的指向，区别在于f.call(obj, arg1, arg2…),f.bind(obj, arg1, arg2,…)(),f.apply(obj, [arg1, arg2, .])applyfunction bindThis(f, oTarget) { return function() { return f.apply(oTarget, arguments) }
2021-09-28 14:43:25
74
原创 Vue-Js中文字展开折叠（多余隐藏）
1. 通过计算属性监听文字的长度来判断 <div class="text"> {{ sliceStr }} <span v-if="!textIf" class="text-item" @click="Text"> {{ textShow == false ? ' 展开全部' : '收起' }} </span> </div>data() { return {
2021-07-29 14:44:54
1275
1
原创 axios封装
//1. 导入axios依赖包,axios确定已经装上了import axios from "axios";import store from "@/store";//2. 创建axios实例对象const Server = axios.create({ baseURL:"http://ttapi.research.itcast.cn/app/v1_0",//接口基准地址，比如管理后台的地址 timeout:5000,//超时时间});//3. 定义请求拦截器的代码? 管理后台
2021-07-06 11:44:00
135
原创 vue数据双向绑定原理实现
Vue的响应式原理，也可以叫双向绑定原理，MVVM模式原理。一、MVVM 理解MVVM分为Model、View、ViewModel三者。Model 代表数据模型，数据和业务逻辑都在Model层中定义；View 代表UI视图，负责数据的展示；ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，Model 和 ViewModel 之间有着双向数据绑定的联系。 因此当 Mo
2021-06-17 08:41:42
700
原创 iframe的优缺点
iframe的优点：1.iframe能够原封不动的把嵌入的网页展现出来。2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。iframe的缺点：1.会产生很多页面，不容易管理。2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话
2021-06-14 20:31:29
314
2
原创 ElementUI 修改默认样式
（一）内嵌法修改样式通过:style修改，用于局部组件块：<el-button :style="selfstyle">默认按钮</el-button><script> export default { data() { return { selfstyle: { color: "white", marginTop: "10px", width: "100px", backgroundColor: "cade
2021-06-11 07:41:31
146
原创 elemeng-ui 中el-form 表单如何校验
elemeng-ui(官网)安装npm i elemeng-ui -S引入 Element你可以引入整个 Element，或是根据需要仅引入部分组件。完整引入在 main.js 中写入以下内容：import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue';Vue.use(Element
2021-06-07 21:02:00
89
1
原创 Windows下的Nginx安装
介绍(百度百科)Nginx (engine x)是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点（俄文：Рамблер）开发的Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，在BSD-like 协议下发行。其特点是占有内存少，并发能力强，安装步骤下载地址：http://nginx.org/en/download.html （N
2021-06-07 11:23:04
505
1
原创 vue 中vue-router的鉴权守卫
路由守卫一、全局路由守卫所谓全局路由守卫，就是小区大门，整个小区就这一个大门，你想要进入其中任何一个房子，都需要经过这个大门的检查全局路由守卫有个两个：全局前置守卫全局后置守卫在路由文件（router）中：import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)const router = new VueRouter({ mode:'history', // 路由模式 hash
2021-06-04 16:21:06
211
原创 git 的常用指令及操作
初始化git仓库git init将工作区的内容提交到暂存区git add ./文件名称 将暂存区的内容提交到本地仓库git commit -m "描述"将本地仓库的内容推送到远程仓库git push git push origin master查看工作区与暂存区的状态git status如何将暂存区的内容撤销到工作区git reset HEADgit checkout 文件名如何将工作区的内容进行撤销git checkout 文件名..
2021-06-04 15:44:49
87
原创 项目中的webpack打包优化
webpack是一个用于现代 JavaScript 应用程序的_静态模块打包工具。当它 处理应用程序时，它会在内部构建一个 依赖图(dependencygraph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。打包的作用减少编译时间减少编译输出文件大小提高页面性能减小打包后的文件大小首页按需引入文件优化 webpack 打包时间方式1. 新建vue.config.js,设置静态资源路径为’./’,否则打包后项目无法运行module.exports =
2021-06-04 15:33:02
212
原创 vant-ui 按需引入
安装在现有项目中使用 Vant 时，可以通过 npm 或 yarn 进行安装：Vue 2 项目，安装 Vant 2：npm（cnpm） i vant -Syarn add vant -SVue 3 项目，安装 Vant 3：npm i vant@next -S方式一. 自动按需引入组件 (推荐)babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。安装插件npm i babel-plugin-imp
2021-06-03 16:55:19
385
原创 关于axios的拦截和api统一管理
axios介绍Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中特点支持浏览器和node.js支持promise能拦截请求和响应能转换请求和响应数据能取消请求 自动转换JSON数据浏览器端支持防止CSRF(跨站请求伪造)axios拦截axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。每个组件中走一遍axios流程，很多时候在前端需要设置header，保存token，对异常进行统一处理等，所以
2021-06-03 16:19:38
122
原创 vue项目多环境变量配置
1.首先：通过为 .env 文件增加后缀来设置某个模式下特有的环境变量通过传递 --mode 选项参数为命令行覆写默认的模式在项目的根目录新建3个文件夹，分别对应开发（dev），测试（test），生产（prod）文件命名： .env.dev , .env.test , .env.prod接下来是不同文件里面的代码情况，.env.dev（ 全局默认配置文件，不论什么环境都会加载合并）NODE_ENV = 'development'VUE_APP_CURRENTMODE = 'dev'VUE_
2021-06-02 21:00:58
694
原创 关于项目开发的流程
1.确定项目的技术栈vue2.0 + vue-cli3/4 + vue-router + axios + vuex + vant + rem + sass + webpack2.进行项目搭建yarn，npm(cnpm) 包管理工具yarn add axios -Scnpm install axios -S-S: --save-dev 生产环境的依赖 （dependencies）-D: --dev 开发环境的依赖 （devDependencies）搭建指令vue create m
2021-06-02 14:55:25
103
原创 css3新特性transition
transition有四个值语法transition: property duration timing-function delay;值 描述transition-property规定设置过渡效果的 CSS 属性的名称。transition-duration规定完成过渡效果需要多少秒或毫秒。transition-timing-function规定速度效果的速度曲线。transition-delayv定义过渡效果何时开始。transition-prope
2021-06-01 21:39:48
142
原创 vue中keep-alive
介绍<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和<transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 在 2.2.0 及其更高版本中，activated 和 deactivated 将会在 <k
2021-06-01 20:22:21
86
原创 js中事件委托（事件代理）（传统的，vue , e.target.dataset.index）
事件委托的原理事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。事件委托的
2021-05-30 21:44:08
937
原创 Js中闭包
闭包:定义 当一个函数的返回值是另外一个函数,而返回的那个函数如果调用了其父函数的内部变量,且返回的那个函数在外部被执行,就产生了闭包.闭包是一个环境,具体指的就是外部函数–高阶函数 closure特性函数套函数内部函数可以直接访问外部函数的内部变量或参数变量或参数不会被垃圾回收机制回收因为函数内部声明 的变量是局部的，只能在函数内部访问到，但是函数外部的变量是对函数内部可见的，这就是作用域链的特点了。子级可以向父级查找变量，逐级查找，找到为止优缺点:好处保护函数内的变
2021-05-30 21:30:30
47
1
转载 Js中var let const 区别
一、前言在ES6（ES2015）出现之前，JavaScript中声明变量就只有通过 var 关键字，函数声明是通过 function 关键字，而在ES6之后，声明的方式有 var 、 let 、 const 、 function 、 class ，本文主要讨论 var 、 let 和 const 之间的区别。二、var如果使用关键字 var 声明一个变量，那么这个变量就属于当前的函数作用域，如果声明是发生在任何函数外的顶层声明，那么这个变量就属于全局作用域。举例说明：var a = 1; //此处声
2021-05-30 21:22:37
80
原创 Js的作用域、作用域链、自由变量、变量提升的知识汇总
作用域在 JavaScript 中, 对象和函数同样也是变量。在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。JavaScript 函数作用域: 作用域在函数内修改es6中新增了块级作用域（大括号，比如：if{},for(){},while(){}…）；局部作用域变量在函数内声明，变量为局部作用域。局部变量：只能在函数内部访问。只有函数生成私有作用域每一个函数就是一个私有作用域// 此处不能调用 carName 变量function myFu
2021-05-27 21:48:09
124
原创 Js中new操作的过程
new在JS中，new的作用是通过构造函数来创建一个实例对象。和普通函数不一样，当函数用作构造函数时，首字母一般要大写，以作区分。new帮我们做了这样几件事：帮我们创建了一个空对象，例如：obj；var obj = {};将空对象原型的内存地址__proto__指向函数的原型对象；obj.proto = xx.prototype;利用函数的call方法，将原本指向window的绑定对象this指向了obj。（这样一来，当我们向函数中再传递实参时，对象的属性就会被挂载到obj
2021-05-27 21:04:25
3485
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人