- 博客(41)
- 收藏
- 关注
RSS订阅转载 js获取本地id
function getYourIP(){ var RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection; if (RTCPeerConnection) (function () { var rtc = new RTCPeerConnection({iceSer..
2022-01-27 10:18:05
612
转载 vue的pc端分辨率自适应
方案lib-flexible + px2remLoaderlib-flexible : 阿里可伸缩布局方案px2rem-loader: px转rem安装依赖npm install px2rem-loader -Dnpm install lib-flexible -S引入依赖// main.js 引入lib-flexibleimport 'lib-flexible'px 转换成remvue-loader的options 和其他样式文件 loader 最终由build/utils.
2022-01-27 10:04:34
625
原创 vue-slider组件
应用场景使用文档：https://nightcatsama.github.io/vue-slider-component/#/zh-CN/
2022-01-27 09:08:39
2125
1
原创 slider与input联动效果
应用场景代码// template 中<el-input-number :max="400" :min="0" @change="numberChange" v-model="valueNew[0]" ></el-input-number> <!-- show-stops --> <el-slider v-model="value" range></el-slider>
2022-01-25 17:24:56
1342
原创 数组去重排序
//数组去重且从小到大排序 newArr(arr) { //去重 arr = Array.from(new Set(arr)).map(item => { return Number(item) }); let min; for (var i = 0; i < arr.length; i++) { for (var j = i; j < arr.l...
2022-01-12 10:59:34
121
原创 ES6模版字符串动态信息显示
需求场景echarts的tooltilp显示，根据日月年等选项展示的内容不同，有的含超标次数，有的不含，可以通过style控制其显示和隐藏，代码如下：formatter: function (param) { console.log(param) let html = ""; param.forEach((v, index) => { html += `<div s
2021-12-27 15:01:21
546
原创 el-table两个属性的合并显示
应用场景起点桩号包含两个属性stakeStartMile和stakeStartMetre要显示在一个td中，就是下面K stakeStartMile+ stakeStartMetre实现代码 <el-table-column label="起点桩号" align="center" prop="stakeStartMile,stakeStartMetre"> <template slot-scope="scope">K{{scope.row.stakeStartMile}}
2021-11-04 23:11:58
449
原创 element-table合并相同行
效果实现步骤// 1.template标签<template> <el-table id="tableVue" :data="dataSource" border stripe :span-method="objectSpanMethods" style="width:80%"> <el-table-column v-for="col in columns" :prop="col.id" :key="col.id" :label="col.label"
2021-10-10 20:15:49
441
原创 ES6展开运算符
ES6展开运算符的一些用法合并数组// 合并数组的方法有很多，比如arr1.push(...arr2) // 追加数组末尾arr1.unshift(...arr2) // 追加数组开头// 整合两个数组并将某个数组放到另一数组特定位置let arr1 = ["one","two"]let arr2 = ["three",...arr1, "four"]// 变成["three","one","two","four"]拷贝数组// 常用的是Arry.prototype.slice ,用展
2021-10-09 17:33:21
128
原创 vue中this.$set的用法
应用场景官网：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新当给对象添加一个属性，控制台可打印出来，但未更新到视图时使用// 1.template标签的代码 <div v-for="(item,index) in list" :key=index> {{item.name}} </div> <el-button @click="changValue" type="primary">我变了</el
2021-10-09 13:59:47
176
原创 el-dialog中handleClose
<el-dialog :visible.sync="dialogVisible" width="100%" :before-close="handleClose" ></el-dialog // 其中dialogVisible 这个局部变量控制着弹窗的显示隐藏,vue方法中 handleClose(done){ this.$confirm('确定关闭吗').then(() => { //
2021-07-20 00:45:17
2237
转载 vue中的css作用域、vue中的scoped坑点
vue中的css作用域及scoped坑点最近项目调样式时遇到问题，自定义和组件样式冲突，导致改了这个影响那个，折腾半天，看了这篇文章，完美解决；一、css作用域之前一直很困扰css的作用域问题，即使是模块化编程下，在对应的模块的js中import css进来，这个css仍然是全局的。导致在css中需要加上对应模块的html的id/class 使用css选择器 保证css的作用域不会变成全局 而被其它模块的css污染。在vue中引入了scoped这个概念，scoped的设计思想就是让当前组件的样式不会修
2021-07-07 16:25:41
311
原创 手写时间线及复选功能
最近项目接触大屏有对于时间刻度的筛选，由于时间线上可单复选且不能超过2个（2个是中间的时间间隔），查看element一些组件不符合要求，就手写一个，效果图如下：代码附上：1. html <div class="timeLine"> <div class="item" v-for="(item, index) in items" :key="index" :class="hoursArr.include
2021-05-09 16:04:03
113
原创 uniapp文档常用整理
1.环境判断uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。if(process.env.NODE_ENV === 'development'){ console.log('开发环境')}else{ console.log('生产环境')}2.判断平台编译期判断 编译期判断，即条件编译，不同平台在编译出包后已经是不同的代码// #ifdef H5 alert("只有
2021-04-11 12:43:59
1518
原创 cookie、session与token的真正区别
技术点简介：http是无状态的；通过cookie在客户端记录状态；通过session在服务器记录状态；通过token方式维持状态。发展史1、很久很久以前，Web 基本上就是文档的浏览而已， 既然是浏览，作为服务器， 不需要记录谁在某一段时间里都浏览了什么文档，每次请求都是一个新的HTTP协议， 就是请求加响应， 尤其是我不用记住是谁刚刚发了HTTP请求， 每个请求对我来说都是全新的。这段时间很嗨皮。2、但是随着交互式Web应用的兴起，像在线购物网站，需要登录的网站等等，马上就面临一个问题，
2021-03-14 23:43:14
103
原创 es6解构赋值
所谓的解构赋值其实就是分解出一个对象的解构，分成两个步骤：变量的声明变量的赋值解构赋值是ES6中推出的一种简介的赋值方式，当等号两边的数据的结构模式匹配则可以为取出等号右边的值赋值给等号左边的变量，两边的结构模式不匹配则报错。1、数组的解构赋值。(1) 普通数组的解构赋值；let [a,b]=[1,2];console.log(a,b); //1,2(2) 嵌套多层的数组；let [d,[e,f]] =[1,[2,3]];console.log(d,e,f); //1,2,
2021-03-14 23:41:44
244
原创 闭包案例解析
1.闭包概念分析1.1概念闭包函数：声明在一个函数中的函数，叫做闭包函数。闭包：内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后。1.2特点让外部访问函数内部变量成为可能；局部变量会常驻在内存中；可以避免使用全局变量，防止全局变量污染；会造成内存泄漏（有一块内存空间被长期占用，而不被释放）1.3 闭包的创建闭包就是可以创建一个独立的环境，每个闭包里面的环境都是独立的，互不干扰。闭包会发生内存泄漏，每次外部函数执行的时 候，外部函数的引用
2021-03-04 22:58:51
403
1
原创 JS数组数据操作demo整理
1.数组中最大值// 1.遍历比较var arr = [6,10,66,55,7，8]；var max = arr[0];for(var i = 1,i< arr.length;i++) { if（arr[i]>max）{ max = arr[i] }}console.log(max)// 2.三元表达式function getMax(num1, num2, num3) { return num1 > num2 ? (num1 >
2021-02-26 16:04:12
230
原创 vue后台管理侧边栏菜单布局
三级菜单1.使用Element组价中NavMenu 导航菜单<!-- 侧边栏 --> <el-aside width="212px"> <!-- 侧边栏菜单 --> <el-menu background-color="#333744" text-color="#fff" active-text-color="#ffd04b" :defau
2020-11-10 22:10:12
2068
原创 Vuex公共数据管理工具使用
一、介绍介绍：Vuex公共数据管理工具，将共享的数据保存到vuex中，方便整个程序中任何组件都可以获取和修改vuex中保存的公共数据；二、使用目的a.大型项目中：如想要在子组件中使用祖先组件中数据，要么必须一层一层的传递b.兄弟组件之间直接传递数据，如果兄弟组件之间想要传递数据，就必须借助父组件（使用麻烦）三、state用于保存修改共享数据的方法a.导入vue及vuex b.创建vuex的对象state\mutation\action\getter c.在祖先组件中添加store的key保
2020-11-08 23:31:38
203
原创 vue路由跳转的几种方式
1…this.$router.push()描述：跳转到不同的url，但这个方法回向history栈添加一个记录，点击后退会返回到上一个页面。1. 不带参数this.$router.push('/home')this.$router.push({name:'home'})this.$router.push({path:'/home'})2. query传参 this.$router.push({name:'home',query: {id:'2'}})this.$router.push({
2020-11-08 21:39:22
424
原创 vue-router的routes中属性详解
一、代码展示const router = new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', component: () => import('.iews/Index'), name: "home", children: [
2020-11-08 21:17:19
3153
2
原创 解析vuex-persistedstate的数据持久化插件
一.vuex-persistedstate作用vuex可以进行全局的状态管理，但刷新后刷新后数据会消失，解决方案如下：结合本地存储做到数据持久化vuex的state在localStorage或sessionStorage或其它存储方式中取值在mutations,定义的方法里对vuex的状态操作的同时对存储也做对应的操作。 这样state就会和存储一起存在并且与vuex同步，但这样手动写比较麻烦。通过插件-vuex-persistedstate插件的原理其实也是结合了存储方式,只是统一的配置就不
2020-11-08 20:54:12
619
原创 迭代方法
1.Array filter()方法(返回结果是根据return后条件筛选)//filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素//filter()不会对空数组进行检测//filter()不会改变原始数组如：let arr = [20,25,30];let res = arr.filter(function(i){ return i>20;})// [25,30]2.Array.some()方法（返回结果是布尔值）//some会遍历数
2020-11-08 20:29:16
252
原创 后台管理左侧菜单栏图标设置
通过更改菜单项模板（template）中的i标签的类名，可以将左侧菜单栏的图标进行设置，我们需要在项目中使用第三方字体图标在数据中添加一个iconsObj：//template中：<i :class="iconsObj[item.id]"></i> //js的data中定义iconsObj: { '125':'iconfont icon-user', '103':'iconfont icon-tijikongjian', '1
2020-11-03 19:50:27
1885
原创 解析HTML5
html5是html的第5次重大修改h5基于html新增· 淘汰过时的或冗余的属性· 一个HTML5文档到另一个文档间的拖放功能· 离线编辑· 信息传递的增强· 详细的解析规则· 多用途互联网邮件扩展（MIME）和协议处理程序注册· 在SQL数据库中存储数据的通用标准（Web SQL）另外CSS3中中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。H5新增元素<canvas> 标签定义图形，比如图表
2020-11-02 23:48:11
176
原创 接口调用方式
一、原生ajax具体用法：post比get请求多一步第一步：创建异步对象var xhr = new XMLHttpRequest();第二步：设置 请求行 open(请求方式，请求url):// get请求如果有参数就需要在url后面拼接参数，// post如果有参数，就在请求体中传递 xhr.open("get","validate.php?username="+name)xhr.open("post","validate.php");第三步：设置请求（GET方式忽略此步骤）头:se
2020-11-02 21:30:36
1490
原创 Vue中computed、methods、watch的区别
1.方法methods//机制：methods内的函数和普通的函数没有区别。//触发：methods内的函数执行的时候，才能触发；//注意：当页面渲染的时候，也会执行下面代码中的methodsN函数；//methods内的函数命名不能与data中的属性重名。2.计算属性computed//机制：{{函数名}} 《---return 《--- 参与计算的DATA中的值//触发：当参与计算的值发生变化的时候，页面中的{{函数名}}也发生变化，就会触发该函数//注意：return 会将函数名返回
2020-11-01 17:09:39
113
原创 Vue中this指向问题
一、methods中this1.通常methods属性中的回调函数的this都会指向vue实例//第一种写法：var vm = new Vue({ el:'app', data:{ name:'', list:[], }, methods:{ handle :function(){ // this.list.push
2020-10-31 22:19:15
1416
原创 关于Vue CLI创建（使用了vuex）
使用 Vue CLI 创建项目如果你还没有安装 VueCLI，请执行下面的命令安装或是升级：npm install --global @vue/cli在命令行中输入以下命令创建 Vue 项目：vue create toutiao-m选择安装预设default：默认勾选 babel、eslint，回车之后直接进入装包manually：自定义勾选特性配置，选择完毕之后，才会进入装包选择第 2 种：手动选择特性，支持更多自定义选项安装项目中需要使用的库以及功能，分别选择以
2020-10-30 01:41:14
181
原创 按需导入的element-ui
按照官网起步上手有具体按需导入及全部导入步骤，这里是按需导入import Vue from 'vue'import { Button, Form, FormItem, Input, Message } from 'element-ui'Vue.use(Button)Vue.use(Form)Vue.use(FormItem)Vue.use(Input)// 进行全局挂载：Vue.prototype.$message = Message...
2020-10-28 19:16:56
150
原创 处理ESLint警告
处理ESLint警告默认情况下，ESLint和vscode格式化工具有冲突，需要添加配置文件解决冲突。在项目根目录添加 .prettierrc 文件{ "semi":false, "singleQuote":true}打开.eslintrc.js文件，禁用对 space-before-function-paren 的检查: rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'error' :
2020-10-28 14:51:46
295
原创 vue登录注册页的路由守卫
设置路由守卫如果用户没有登录，禁止用户手动添加url直接访问登录后网页，会强制跳转登录页，保证项目安全性，添加前置路由守卫，在正式进入某一个路由之前进行判断router.beforEach(to要跳转地址，from从哪个网页跳转过来，next放行)，如果用户访问登录页面，直接放行，如果token值为null，跳转登录页面打开router.jsimport Vue from 'vue'import Router from 'vue-router'import Login from './compon
2020-10-28 14:49:19
930
原创 Vue脚手架搭建
Vue脚手架Vue脚手架可以快速生成Vue项目基础的架构。A.安装3.x版本的Vue脚手架：npm install -g @vue/cliB.基于3.x版本的脚手架创建Vue项目：1).使用命令创建Vue项目命令：vue create my-project选择Manually select features(选择特性以创建项目)勾选特性可以用空格进行勾选。是否选用历史模式的路由：nESLint选择：ESLint + Standard config何时进行ESLint语法校验：Lint
2020-10-28 09:44:50
291
原创 webpack打包优化
1.webpack的基本使用初始化总结A.创建项目目录并初始化创建项目，并打开项目所在目录的终端，输入命令： npm init -yB.创建首页及js文件在项目目录中创建index.html页面，并初始化页面结构：在页面中摆放一个ul，ul里面放置几个li在项目目录中创建js文件夹，并在文件夹中创建index.js文件C.安装jQuery打开项目目录终端，输入命令:npm install jQuery -SD.导入jQuery打开index.js文件，编写代码导入jQu
2020-10-28 09:42:48
181
原创 带参数的过滤器
将时间戳转换为年月日1.定义过滤器 Vue.filter("dateformat", function (val, param) { // console.log(val); val参数1是要过滤的数据 参数2param是用户传递的参数 const date = new Date(val); const year = date.getFullYear(); const month = date.getMonth() + 1;
2020-10-16 23:01:33
452
原创 Vue全局过滤器
全局时间的过滤器 // 第一个过滤器 // 将时间戳转为年月日 Vue.filter('dateformat',function(val){ //需要过滤的日期 const date = new Date(val); const year = date.getFullYear(); // 实际月份加1 const month = date.getMonth
2020-10-16 20:56:49
512
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人