weixin_46156770的博客

原创 cesium +vue3 +vite 实现点线面功能

学习cesium

原创 vue+elementUI el-menu出现多级菜单项目中用到的比较多，记录一下

el-menu多级菜单

原创 vue3学习

学习vue3

原创 blob数据与json数据互相转换

blob和json互相转换

原创 elementUI中el-table中使用el-upload

el-table中使用el-upload

原创 javascript常用正则表达式

javascript常用正则表达式

原创 修改el-checkbox 选中后的颜色

修改el-checkout 选中后的颜色

原创 在 HBuilder X 创建Uni-app项目运行时报错

在 HBuilder X 创建Uni-app项目运行时报错

原创 修改el-table中expand中展开收起按钮

/*1.取消原本展开的旋转动效（没有这个时有时图片展开的方向不对）*//deep/.el-table__expand-icon { -webkit-transform: rotate(0deg); transform: rotate(0deg);}/*2.展开按钮未点击的样式是加号带边框*//deep/.el-table__expand-icon .el-icon-arrow-right:before { content:url("../../../assets/images/img02

原创 e-icon-picker 图标库

elementUI+e-icon-picker配合使用

原创 el-tree 树的全部展开和收起

架构树el-tree需要实现全部展开和全部收起功能，查阅资料借鉴别人的经验终于实现this.$refs.tree.store 打印出来的是这样的数据，里面的expanded就是控制展开收起的功能<div class="expand"> <el-button size="small" @click="expandHandle">{{ expandAll ? "全部收起" : "全部展开" }}<

原创 利用el-tree实现搜索的联动功能

今天公司做项目碰见这样一个需求点击搜索，出现搜索框，左中右出现联动效果一个选中，其他都选中，右侧出现选中的内容，搞了三天终于可以了html<el-card> <div class="distribution"> <div class="people"> <div class="search"> <el-input placeho

原创 elementUI中的table的数据实现全部展开和收起功能

elementUI中的table的数据实现全部展开和收起功能用row-key这个属性和toggleRowExpansion这个方法即可实现<template><el-table :data="tableData" row-key="id" class="table" ref="table"> <el-table-column prop="resourceName" label="资源名称" align="center">

原创 小程序同声传译语音播报功能

项目中有需求，需要把文字用语音播报，看文档查资料总结// app.json"plugins": { "WechatSI": { "version": "0.0.7", "provider": "wx069ba97219f66d99" } } <view bindtap="test">{{content}}</view>// index.js 代码data: { content: '测试语音播报

转载 密码必须含有“小写字母”、“大写字母”、“数字”、“特殊符号”中的任意三种正则表达式

项目需要对密码进行校验，找到前辈的博客添加链接描述，顺带自己备份一份已方便用第一种：/((^(?=.*[a-z])(?=.*[A-Z])(?=.*\W)[\da-zA-Z\W]{8,16}$)|(^(?=.*\d)(?=.*[A-Z])(?=.*\W)[\da-zA-Z\W]{8,16}$)|(^(?=.*\d)(?=.*[a-z])(?=.*\W)[\da-zA-Z\W]{8,16}$)|(^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[\da-zA-Z\W]{8,16}$))/第

转载 JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别测试

借鉴别人的文章，自己记录一下，https://blog.youkuaiyun.com/u014205965/article/details/45606797clientX：当鼠标事件发生时（不管是onclick，还是omousemove，onmouseover等），鼠标相对于浏览器（这里说的是浏览器的有效区域）x轴的位置；clientY：当鼠标事件发生时，鼠标相对于浏览器（这里说的是浏览器的有效区域）y轴的位置；screenX：当鼠标事件发生时，鼠标相对于显示器屏幕x轴的位置；screenY：当鼠标事件发生时，

原创 项目中用到了websocket协议，今天总结一下

websocket协议WebSocket是基于TCP的应用层协议，用于在C/S架构的应用中实现双向通信WebSocket实现了客户端与服务器之间的长连接，这样服务器可以主动推送消息给客户端WebSocket与Http的区别通信方式不同WebSocket是双向通信模式，客户端与服务器之间只有在握手阶段是使用HTTP协议的“请求-响应”模式交互，而一旦连接建立之后的通信则使用双向模式交互，不论是客户端还是服务端都可以随时将数据发送给对方；而HTTP协议则至始至终都采用“请求-响应”模式进行通信。也正

原创 文件上传添加进度条，配合elementUI使用

//文件上传 upload(o, callback) { return httpRequest({ url: `${uploadService}/file/upload`, method: "post", data: o, onUploadProgress: progressEvent => { // 对原生进度事件的处理 .

原创 今天新学了两个vue上的方法$attrs,$listensters；总结一下

vue组件之间传值很多，父与子传值用的最多的是emit和props，如果多层级传值可以用emit 和props，如果多层级传值可以用emit和props，如果多层级传值可以用attrs,$listeners**$attrs：**包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs"$lis

原创 elementUI table隐藏行

项目中遇到一个问题，就是数组中的全部内容左侧需要全部展示，右侧列表中又需要部分展示，所以右侧把不需要展示的部分隐藏掉，看了文档才发现可以实现这个内容官方文档有说明<template> <el-table border :data="editor.result" stripe style="width: 100%" :row-class-name="tableRowClassName"> <el-table-column prop="name" label="

原创 项目中有需求，需重新定义echarts的提示tooltips,里面有个formatter属性，可重新定义提示内容

<template> <div class="echarts"> <div id="mychart" style="width: 100%; height: 420px;"></div> </div></template><script> methods:{ //初始化echart initChart() { let _this = this

转载 前后端数据传参详解

这篇文章是有选择性的摘抄的前辈的，方便以后自己看摘抄地址1. Http数据传参的两种方式uri传参数据参数写在uri地址中，可以为查询参数，也可以为路径参数，一般get请求方式用的多。优点：一个TCP传输就可以将参数传递给服务器，速度快。缺点：参数直接暴露在浏览器中，不安全。body传参数据参数写在body体中，有多种content-type格式：json、xml、form-data，一般post请求方式用的多。优点：相对安全，没有大小限制。缺点：需要两个TCP传输，第一次传输head，

原创 根据数组对象中的某一个属性进行排序

let chapter=[{id: 792, courseId: 95, type: "lesson", number: 1, seq: 2, parentChapterId: 0, title: "1",…},{id: 794, courseId: 95, type: "lesson", number: 2, seq: 3, parentChapterId: 0, title: "2-1",…}, {id: 793, courseId: 95, type: "chapter", number: 1,

原创 elementUI 穿梭框右侧数据回显问题，查了许多资料都不是自己想要的，折腾一上午终于出来了

<el-transfer style="width:80%;margin:0 auto" v-model="selectedTransfer" :data="noRelation" @change="selectedData" :titles="dialogModel == 0 ? ['关联选手','已选关联选手'] : ['关联战队','已选关联战队']"></el-transfer>这里的v-model就是右侧数据回显的值，是个回显数据key的数组:da

转载 js事件详解

addEventListener()与removeEventListener()详解 点击打开链接js事件详解 点击打开链接

原创 el-date-picker 修改时数据可回显，但无法修改问题，查试搞半天才把问题解决

1、template模板中2、数据回显时，要不用$set设置回显时间3、el-date-picker change事件捕获不到，用blur

原创 项目中有用到轮播图的地方并且一屏中竖着展示两个，我用的是vue-awesome-swiper，感觉参数那不是很熟悉，记录一下

1.首先 需要安装vue-awesome-swipernpm install vue-awesome-swiper --save2.全局引入 main.js中引入//轮播图import VueAwesomeSwiper from 'vue-awesome-swiper'Vue.use(VueAwesomeSwiper)import 'swiper/dist/css/swiper.css'//(css 不显示的问题可能就在这)在组件中使用// template中<swipe

原创 修改滚动条的背景颜色和滚动条颜色

<style> ::-webkit-scrollbar-thumb { background:#419be3; //滚动条颜色 border-radius: 4px; }::-webkit-scrollbar-track { background: #021c75 ; //背景颜色}</style>

原创 监听路由的变化

遇到一个问题，就是路由携带的参数变了，如何可以刷新页面，由此引出了可以监听路由的变化1.组件内监听路由的方式：watch:{ '$route' (to,from) { console.log(to, from) if (to.query.id !== from.query.id) { this.id = this.$route.query.id this.name = this.$route.query.name } }},// 监听新老路由变化信息watch:

原创 项目中需要课程章节和课时可随意拖拽，借鉴前辈的文章+自己总结，记录一下

项目开发中需要用到拖拽组件，因为前端技术框架是vue，这里就使用了vue的一款拖拽插件vue.draggable，一般基本的需求都能满足，这里使用了多个draggable嵌套，达到两级之前相互拖拽的功能。首先，要搞清楚draggable的api，这里提供以下博主自己发现的一个vue.draggable中文api地址vue.draggable中文文档（http://www.itxst.com/vue-draggable/tutorial.html），里面基本属性和方法都用讲到，有时间的可以去学习一下，要查看

原创 利用websocket和stompjs建立多服务器之间的消息传送

websocket<script> import Stomp from 'stompjs'; mounted() { this.login = this.$store.state.account.id //从vuex state中获取登录id this.initConnect() }, methods:{ //建立websocket连接 initConnect() { this.socket = new WebS

原创 vue+elementUi 动态添加删除table表格

<div class="addPlus" style="margin-top:15px;"> <el-button type='primary' @click="addLevel" size='mini'>添加关卡</el-button> </div> <el-table :data="customList" size='mini' style="wi

原创 elementUI上传文件限定文件格式

原创 elementUI 中table表格展开收起实现手风琴效果（只展开一行）

<template> <el-table ref="table" :data="teamData" style="width: 100%;margin-bottom: 15px;" :row-key="getRowKeys" :expand-row-keys="expands" @expand-change="expndChange"> <el-table-column type="expand"> <template s

原创 vue input框只能输入数字

<el-input v-model="scope.row.extraScore" placeholder="请输入额外加分且只能为数字" @input="scope.row.extraScore = scope.row.extraScore.replace(/[^\d]/g,'')" size='mini' :disabled='isDetail'></el-i

原创 elementUI给dialog标题添加icon图标

利用插巢slot给dialog标题添加icon图标<el-dialog title="错误信息提示" :visible="fileVisible" @close="closeList" style="border-bottom: none;"> <div slot="title" class="header-title"> <span class="title-name"><i class="el-icon-warning" style

原创 vue如何整个页面添加loading

整个页面添加loadingconst loading = this.$loading({ lock: true, fullscreen: true, text: '启动中', background:'rgba(0, 0, 0, 0.8)'});关闭loadingloading.close()

转载 Vue.set()和this.$set()的介绍及区别

Vue.set()和this.$set()的介绍及区别data () { return { student: { name: '', sex: '' } }}mounted () { // ——钩子函数，实例挂载之后 this.student.age = 24}受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue

原创 实际项目中用到数组的方法很多，自己老是记混或者记不住，借助别人的力量自己再总结的数组方法

实际项目中用到数组的方法很多，自己老是记混或者记不住，借助别人的力量自己再总结的数组方法背景介绍使用JavaScript数组常常需要对数组进行遍历、迭代操作。而我们常用的就是for语句对数组进行迭代。然而在ECMAscript5已经为数组定义了5个迭代的方法，分别是：filter()对数组中的每一项运行给定函数，返回该函数会返回true 的项组成的数组，原数组不变arr是其本身，如何没有符合条件的值，会返回[]可以看出filter() 把原数组arr每一项返回为true的项，重新组成数组，并打

原创 git 命令的基本操作

git 命令的基本操作切换分支git checkout master** 创建分支**git branch hotfix** 查看分支命令**git branch创建并切换到当前分支git checkout -b log