vue
weixin_46156770
这个作者很懒,什么都没留下…
展开
-
cesium +vue3 +vite 实现点线面功能
学习cesium原创 2023-01-29 16:30:41 · 931 阅读 · 2 评论 -
vue+elementUI el-menu出现多级菜单项目中用到的比较多,记录一下
el-menu多级菜单原创 2023-01-16 15:19:12 · 804 阅读 · 0 评论 -
vue3学习
学习vue3原创 2022-11-24 16:28:40 · 239 阅读 · 0 评论 -
blob数据与json数据互相转换
blob和json互相转换原创 2022-10-14 15:54:52 · 1083 阅读 · 0 评论 -
elementUI中el-table中使用el-upload
el-table中使用el-upload原创 2022-09-19 17:06:21 · 3026 阅读 · 0 评论 -
修改el-checkbox 选中后的颜色
修改el-checkout 选中后的颜色原创 2022-07-19 10:56:25 · 4704 阅读 · 0 评论 -
在 HBuilder X 创建Uni-app项目运行时报错
在 HBuilder X 创建Uni-app项目运行时报错原创 2022-04-13 14:59:10 · 2094 阅读 · 0 评论 -
修改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原创 2022-03-15 10:22:56 · 1046 阅读 · 1 评论 -
e-icon-picker 图标库
elementUI+e-icon-picker配合使用原创 2022-03-14 09:59:28 · 1947 阅读 · 0 评论 -
el-tree 树的全部展开和收起
架构树el-tree需要实现全部展开和全部收起功能,查阅资料借鉴别人的经验终于实现this.$refs.tree.store 打印出来的是这样的数据,里面的expanded就是控制展开收起的功能<div class="expand"> <el-button size="small" @click="expandHandle">{{ expandAll ? "全部收起" : "全部展开" }}<原创 2022-01-26 16:00:39 · 8649 阅读 · 0 评论 -
利用el-tree实现搜索的联动功能
今天公司做项目碰见这样一个需求点击搜索,出现搜索框,左中右出现联动效果一个选中,其他都选中,右侧出现选中的内容,搞了三天终于可以了html<el-card> <div class="distribution"> <div class="people"> <div class="search"> <el-input placeho原创 2022-01-24 17:58:51 · 1814 阅读 · 2 评论 -
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">原创 2021-12-27 14:38:42 · 2364 阅读 · 0 评论 -
小程序同声传译语音播报功能
项目中有需求,需要把文字用语音播报,看文档查资料总结// app.json"plugins": { "WechatSI": { "version": "0.0.7", "provider": "wx069ba97219f66d99" } } <view bindtap="test">{{content}}</view>// index.js 代码data: { content: '测试语音播报原创 2021-11-24 17:44:38 · 2240 阅读 · 0 评论 -
JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别测试
借鉴别人的文章,自己记录一下,https://blog.csdn.net/u014205965/article/details/45606797clientX:当鼠标事件发生时(不管是onclick,还是omousemove,onmouseover等),鼠标相对于浏览器(这里说的是浏览器的有效区域)x轴的位置;clientY:当鼠标事件发生时,鼠标相对于浏览器(这里说的是浏览器的有效区域)y轴的位置;screenX:当鼠标事件发生时,鼠标相对于显示器屏幕x轴的位置;screenY:当鼠标事件发生时,转载 2021-07-13 16:18:46 · 470 阅读 · 0 评论 -
项目中用到了websocket协议,今天总结一下
websocket协议WebSocket是基于TCP的应用层协议,用于在C/S架构的应用中实现双向通信WebSocket实现了客户端与服务器之间的长连接,这样服务器可以主动推送消息给客户端WebSocket与Http的区别通信方式不同WebSocket是双向通信模式,客户端与服务器之间只有在握手阶段是使用HTTP协议的“请求-响应”模式交互,而一旦连接建立之后的通信则使用双向模式交互,不论是客户端还是服务端都可以随时将数据发送给对方;而HTTP协议则至始至终都采用“请求-响应”模式进行通信。也正原创 2021-07-08 17:04:27 · 369 阅读 · 0 评论 -
文件上传添加进度条,配合elementUI使用
//文件上传 upload(o, callback) { return httpRequest({ url: `${uploadService}/file/upload`, method: "post", data: o, onUploadProgress: progressEvent => { // 对原生进度事件的处理 .原创 2021-07-06 18:52:27 · 902 阅读 · 0 评论 -
vue获取url请求地址
有时候需要前端请求地址的ip,所以找到了如何获取url请求地址window.location.href原创 2020-09-24 10:37:23 · 3407 阅读 · 0 评论 -
今天新学了两个vue上的方法$attrs,$listensters;总结一下
vue组件之间传值很多,父与子传值用的最多的是emit和props,如果多层级传值可以用emit 和props,如果多层级传值可以用emit和props,如果多层级传值可以用attrs,$listeners**$attrs:**包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs"$lis原创 2021-06-28 15:33:37 · 542 阅读 · 0 评论 -
elementUI table隐藏行
项目中遇到一个问题,就是数组中的全部内容左侧需要全部展示,右侧列表中又需要部分展示,所以右侧把不需要展示的部分隐藏掉,看了文档才发现可以实现这个内容官方文档有说明<template> <el-table border :data="editor.result" stripe style="width: 100%" :row-class-name="tableRowClassName"> <el-table-column prop="name" label="原创 2021-06-03 11:32:56 · 4051 阅读 · 0 评论 -
项目中有需求,需重新定义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原创 2021-05-31 10:45:45 · 296 阅读 · 0 评论 -
前后端数据传参详解
这篇文章是有选择性的摘抄的前辈的,方便以后自己看摘抄地址1. Http数据传参的两种方式uri传参数据参数写在uri地址中,可以为查询参数,也可以为路径参数,一般get请求方式用的多。优点:一个TCP传输就可以将参数传递给服务器,速度快。缺点:参数直接暴露在浏览器中,不安全。body传参数据参数写在body体中,有多种content-type格式:json、xml、form-data,一般post请求方式用的多。优点:相对安全,没有大小限制。缺点:需要两个TCP传输,第一次传输head,转载 2021-05-26 17:36:04 · 346 阅读 · 0 评论 -
根据数组对象中的某一个属性进行排序
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,原创 2021-05-26 16:50:04 · 390 阅读 · 0 评论 -
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原创 2021-05-24 13:25:30 · 6586 阅读 · 11 评论 -
el-date-picker 修改时数据可回显,但无法修改问题,查试搞半天才把问题解决
1、template模板中2、数据回显时,要不用$set设置回显时间3、el-date-picker change事件捕获不到,用blur原创 2021-04-30 16:18:13 · 895 阅读 · 1 评论 -
项目中有用到轮播图的地方并且一屏中竖着展示两个,我用的是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原创 2021-04-21 13:45:23 · 545 阅读 · 0 评论 -
修改滚动条的背景颜色和滚动条颜色
<style> ::-webkit-scrollbar-thumb { background:#419be3; //滚动条颜色 border-radius: 4px; }::-webkit-scrollbar-track { background: #021c75 ; //背景颜色}</style>原创 2021-04-15 16:30:09 · 2737 阅读 · 0 评论 -
监听路由的变化
遇到一个问题,就是路由携带的参数变了,如何可以刷新页面,由此引出了可以监听路由的变化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:原创 2021-03-26 13:48:16 · 216 阅读 · 0 评论 -
项目中需要课程章节和课时可随意拖拽,借鉴前辈的文章+自己总结,记录一下
项目开发中需要用到拖拽组件,因为前端技术框架是vue,这里就使用了vue的一款拖拽插件vue.draggable,一般基本的需求都能满足,这里使用了多个draggable嵌套,达到两级之前相互拖拽的功能。首先,要搞清楚draggable的api,这里提供以下博主自己发现的一个vue.draggable中文api地址vue.draggable中文文档(http://www.itxst.com/vue-draggable/tutorial.html),里面基本属性和方法都用讲到,有时间的可以去学习一下,要查看原创 2021-03-23 13:35:34 · 154 阅读 · 0 评论 -
利用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原创 2021-03-08 13:53:26 · 375 阅读 · 0 评论 -
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原创 2021-03-05 13:54:30 · 1577 阅读 · 0 评论 -
elementUI上传文件限定文件格式
原创 2021-03-05 13:27:40 · 687 阅读 · 0 评论 -
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原创 2021-03-05 13:22:46 · 2056 阅读 · 2 评论 -
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原创 2021-03-03 17:22:06 · 517 阅读 · 1 评论 -
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原创 2021-02-26 13:25:25 · 3940 阅读 · 0 评论 -
vue如何整个页面添加loading
整个页面添加loadingconst loading = this.$loading({ lock: true, fullscreen: true, text: '启动中', background:'rgba(0, 0, 0, 0.8)'});关闭loadingloading.close()原创 2021-02-22 13:18:50 · 2035 阅读 · 0 评论 -
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转载 2021-02-20 13:56:45 · 663 阅读 · 1 评论 -
实际项目中用到数组的方法很多,自己老是记混或者记不住,借助别人的力量自己再总结的数组方法
实际项目中用到数组的方法很多,自己老是记混或者记不住,借助别人的力量自己再总结的数组方法背景介绍使用JavaScript数组常常需要对数组进行遍历、迭代操作。而我们常用的就是for语句对数组进行迭代。然而在ECMAscript5已经为数组定义了5个迭代的方法,分别是:filter()对数组中的每一项运行给定函数,返回该函数会返回true 的项组成的数组,原数组不变arr是其本身,如何没有符合条件的值,会返回[]可以看出filter() 把原数组arr每一项返回为true的项,重新组成数组,并打原创 2021-02-09 17:53:54 · 118 阅读 · 0 评论 -
git 命令的基本操作
git 命令的基本操作切换分支git checkout master** 创建分支**git branch hotfix** 查看分支命令**git branch创建并切换到当前分支git checkout -b log原创 2021-02-07 13:56:57 · 201 阅读 · 0 评论 -
关于Elementui输入框有值,校验一直有提示问题
关于Elementui输入框有值,校验一直有提示问题1、prop的值必须要和v-model的值一致2、只要用到prop,validate这些校验,form必须有model这个属性官方文档也有介绍原创 2021-01-28 13:17:25 · 2274 阅读 · 2 评论 -
因项目需要,transter需要单选,不要多选按钮,通过查资料自己修改终于可以实现,以此记录一下
因项目需要,transter需要单选,不要多选按钮,通过查资料自己修改终于可以实现,以此记录一下1.template中<div v-show='isShowTransfer' class="dataform"> <div class="transfer_panel transfer_left"> <p class="transfer_panel_header">全部试题</p>原创 2021-01-13 12:48:51 · 572 阅读 · 0 评论