- 博客(20)
- 收藏
- 关注
RSS订阅原创 van-slider样式改造-斜纹渐变
通过-webkit-linear-gradient设置渐变样式，渐变的颜色区域和透明区域是根据百分比算的，长度不一样的进度条斜纹密度不一样，可以考虑把-webkit-linear-gradient中的%改成px或者rem之类的单位。
2023-12-21 09:46:53
599
原创 vue动态多环境配置websocket的ws://地址
前景一般vue多环境配置涉及三个文件：.env.development，.env.production，.env.test去配置，通过执行不同命令来区分运行环境。现在公司要求前端不要写死ip地址，防止部署的时候忘记更换命令部错包，通过nginx去代理配置不同端口。现要求的配置文件// .env.development是本地的开发环境正常写地址VUE_APP_BASE_API = 'http://aaaa:8080'VUE_APP_BASE_API_WEBSOCKET = 'ws://sss:808
2022-03-16 15:22:25
9685
原创 vue常用多环境配置
vue/cli 常用的前端多环境配置1、新建三个文件// 文件名 .env.developmentNODE_ENV = development# 开发环境的ip端口VUE_APP_BASE_API = 'http://xxxx:8080'// 文件名 .env.production# 生产环境的ip端口VUE_APP_BASE_API = 'http://yyyy:8080'// 文件名 .env.test# 测试环境的ip端口VUE_APP_BASE_API = 'http:
2022-03-16 15:06:23
1656
原创 vue左右两侧时间轴
<template> <div class="course"> <div class="time-line" v-for="(item, index) in list" :key="index"> <div class="item-border" :class="!item.show ? 'hidden-time-line' : ''"> <div class="line-item"> .
2022-03-16 13:46:52
2348
2
原创 echarts多条折线拐点处数值及样式设置
效果图echarts的option中对应的seriesseries: [ { name: 'Email', type: 'line', itemStyle : { normal: { label : { show: true, // 是否展示数值 position: 'bottom', // 数值展示位置 color: 'blue' // 数字的颜色
2022-02-17 16:09:40
925
原创 echarts-柱状图，纵向多柱一组
效果图思路：以此图为例，有两个维度的top10, 第一组分别是两个维度的top1,第二组分别是两个维度的top2// 图表数据 const series0 = [{ name: '温度传感器', value: 200 }, { name: '设备二', value: 300 }, { name: '设备三', value: 400 }, { name: '设备四', value: 300 }, { name: '设备五', value: 250 }] const series
2022-01-11 11:53:37
1888
原创 vue中的computed计算属性，报错Computed property “xxx“ was assigned to but it has no setter
vue中的computed计算属性模板内可以是变量，可以是变量的逻辑表达式，也可以是方法。{{ message }}{{ message.split('').reverse().join('') }}{{ messageFunction }}以上均可，模板内尽量使用简洁的声明变量，这些复杂的表达式或者方法会使模板很重难以维护，这个时候需要用到计算属性既然说计算属性和方法都能渲染，那区别是什么呢？计算属性基于它们的响应式依赖进行缓存的，即变量发生变化以后才会执行计算函数，如果变量没有发生变化则
2022-01-06 14:31:42
5724
原创 echarts双轴图-年龄分布
安装插件npm install element-resize-detector公共方法，图标自适应窗口大小import elementResizeDetectorMaker from "element-resize-detector";drawLine(id, option) { const erd = elementResizeDetectorMaker(); let myChart = echarts.init(document.getElementById(id)); .
2021-11-03 10:37:11
1439
原创 vue移动端从第三方登录访问项目，路径携带token自动登录
问题描述最近有一个项目需要从“随申办”登录，角色权限分三种，每种身份的人进去需要跳到不同的首页。因为实在随申办登录过的，所以系统不需要专门的登录页让用户进行二次登录，需要直接进入系统。思路：后端从“随申办”拿到用户登录的token返回给前端，前端在初次进入各角色首页时拿到url上的token参数进行自动登录，登录成功后把token存在本地，把url上携带的token去掉（防止用户返回到首页的时候再次登录，此时token已失效）代码main.js中封装公共方法Vue.prototype.reLo
2021-10-28 10:23:11
2153
原创 vue中使用echarts实现双轴图
vue中使用echarts实现双轴图效果图echarts自适应方法安装插件npm install element-resize-detector公共方法drawLine(id, option) { const erd = elementResizeDetectorMaker(); let myChart = echarts.init(document.getElementById(id)); // 绘制图表配置 // 窗口大小自适应方案 myChar
2021-07-06 14:43:59
792
3
原创 socket-express
安装npm add socket.io expresssocket.emit 表示触发某个事件，如果需要给浏览器发送数据，需要触发浏览器注册的某个事件socket.on 表示注册某个事件，如果需要获取浏览器的数据，需要注册一个事件等待浏览器触发 io.socket: 广播事件 io.emit服务端服务器给浏览器发送数据，只要触发浏览器监听的事件即可var app = require('express')()var server = require('http').Server(app
2021-04-23 13:56:12
87
原创 websocket
websocket 的基本概念WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。websocket的属性Socket.readyState 表示连接状态0 表示连接尚未建立1 表示连接已建立，可以进行通信2 表示连接正
2021-04-20 18:45:21
1067
2
原创 TypeScript基础篇--类型介绍
// 布尔类型let boo: boolean = true;// 数值型let num: number = 123;// 字符串let str: string = 'abs';// 数组let arr: Array<number> = [1, 2, 4];let arr1: Array<string> = ['a', 'v'];let arr2: string[] = ['a', 'b'];// undefined, nulllet und: undefin.
2021-04-13 15:04:04
84
原创 vue/cli3添加自定义icon图标
1、从阿里巴巴矢量图表库将需要的图标，加入购物车；点击购物车2、选择添加至项目3、下载到本地，放到项目中4、在main.js中引入iconfont.css文件，以实际位置为准import './assets/fonts/download/font_1610031_odfhr0q6koc/iconfont.css'5、使用：icon-neirong是图标名<i class="iconfont icon-neirong"></i>...
2020-12-04 12:01:46
1472
原创 Uncaught TypeError: Cannot read property ‘offsetHeight’ of undefined
记录一个今天被折磨了一上午的关于vue的坑，引用element报错用cue/cli构建项目，本地的vue版本是4.5.8的，在用element时，在main.js中全局引用样式总是报错Uncaught TypeError: Cannot read property ‘offsetHeight’ of undefined解决办法有两种：卸载现有的版本，安装指定版本npm uninstall -g @vue/clinpm install -g @vue/cli@3.0.4构建项目时自定
2020-11-12 15:31:03
3652
原创 VUE中点击切换样式（切换）
点击选项一，选项一变色点击选项二，选项二变色<template> <div id="app"> <div> <span @click="select(1)" :class="index ==1?'blue':'gery'">选项一</span> <span @click="select(2)" :class="index ==2?'blue':'gery'">选项二</span>
2020-08-27 17:54:03
4737
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人