
vue
小趴菜呢
风生水起靠自己
展开
-
树形数据的增、删、改、查、排序
树形数据进行上下排序,修改,新增原创 2023-02-23 17:11:19 · 864 阅读 · 0 评论 -
vue递归渲染树形结构数据
一个可以通过其“name”选项递归渲染自己的组件原创 2023-01-11 16:29:53 · 1119 阅读 · 0 评论 -
vue函数式组件
vue的函数式组件原创 2022-11-15 15:06:29 · 739 阅读 · 3 评论 -
绘制路线轨迹,设置标记
echarts画路径图原创 2022-11-10 10:59:20 · 384 阅读 · 0 评论 -
前端计算常用方法
2、decimal插件计算(用decimal可以解决精度缺失的问题)3、moment的diff函数计算时间段的时间间隔。1、Math.abs()得到结果的绝对值。原创 2022-10-14 16:09:52 · 927 阅读 · 0 评论 -
vue实现锚点功能
锚点功能实现原创 2022-08-09 14:08:26 · 1823 阅读 · 0 评论 -
vue中使用微信jssdk语音聊天功能
原创 2022-03-22 14:53:48 · 2945 阅读 · 0 评论 -
从当前页面返回上个页面,并在当前页面修改上个页面的数据
目前的需求是这样的,在A页面发布图片内容,在A页面有一个按钮选择定位,要跳转到B页面,选择之后并返回A页面展示,A页面之前填写的信息要保留。(1)在 原生微信小程序中实现方法:在B页面中返回A页面的方法中写入: let pages = getCurrentPages(); let prevPage = pages[pages.length - 2]; prevPage.setData({ title:this.data.title, }) wx.navigateBack({原创 2021-09-10 10:18:57 · 1267 阅读 · 0 评论 -
vue轮播图插件
百度了一下常用的有三种:1、vue-awesome-swiper使用:npm install vue-awesome-swiper@3 --save-dev(要注意这个时候安装就是一个坑,一定要指定版本号,要不然你接下来就是一堆错);页面引入: <div> <swiper class="banner" :options="swiperOption" ref="mySwiper"> <swiper-slide v-f原创 2021-08-04 17:02:46 · 8487 阅读 · 9 评论 -
移动端pdf文件预览
在vue项目中使用pdf插件安装:npm i -D vue-pdf页面引入import pdf from 'vue-pdf' // 引入插件注册组件components: { pdf, },使用:当你的pdf文件只有一页的时候可以直接使用://url是你pdf的文件路径<pdf :src="url"></pdf>当你的pdf有多页时:<pdf :src="url" ref="pdf" v-for="i in page" :key="i"原创 2021-06-28 16:54:36 · 522 阅读 · 0 评论 -
echarts使用总结
1、圆环图,设置显示百分比效果图:代码如下://el是绑定的数据名称,val是所占的数据,sum是总数,persent是数据占总数的百分比,color是设置环的颜色,是一个数组。在这里要注意的是了解echart的这些配置。(1)、title用于设置圆环中间的文字,当你中间文字的大小不同,颜色不同时,可以参考下列格式设置text。textStyle.rich可以分开设置样式。 makeUpEcharts(el, val, sum, persent, color) { var opt原创 2021-04-20 17:27:54 · 1148 阅读 · 0 评论 -
使用elementui表格全选功能总结
项目需求:表格中添加全选功能,然后还要单独点击的时候进行一个请求,后台判断是否可以选中。点击全选的时候不进行判断是否可以选中,并且有分页切换时要记住上一页选中的数据。解决方法:1.单独点击进行校验使用select事件: <el-table :data="tableData" style="width: 100%" @selection-change="selectionChange" ref="table" :border="border" @select="selectionRowChan原创 2021-04-09 15:52:07 · 6247 阅读 · 0 评论 -
h5页面的头部返回箭头或者手势返回到指定的页面
解决这个问题我们需要用到window.history的pushState方法,不了解这个可以去百度了解一下:(下面粘贴上我百度的对他的解释)window.history.pushState(data, title, targetURL);@状态对象:传给目标路由的信息,可为空@页面标题:目前所有浏览器都不支持,填空字符串即可@可选url:目标url,不会检查url是否存在,且不能跨域。如不传该项,即给当前url添加data。1.我的h5页面时使用webview嵌套在小程序中的,我想在打开的多个h5原创 2021-01-28 10:41:13 · 3886 阅读 · 0 评论 -
webview内嵌h5和微信小程序的相互跳转
1.在微信小程序里面使用内嵌h5页面,需要主要要在微信公众平台:开发管理——开发设置——业务域名中配置你内嵌的页面用到的域名。2.微信小程序跳转到h5页面使用标签:主要如果页面跳转到这个webview标签页面,src后面的参数是带不过去的比如:’…/webview/webview?src=https://api.com/list?id=1&token=sdjiwboaxne’你会发现list后面的参数都带不过去,你需要进行编码一下:let src = "https://api.com/lis原创 2021-01-21 14:06:34 · 5790 阅读 · 2 评论 -
vue中使用百度地图获取地理位置
1.首先要在百度地图官网(http://lbsyun.baidu.com/)上面新建实例,获取百度地图的密钥:ak2.index.html页面引入百度地图的js <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>3.在你的项目webpack.base.conf.js文件里面加上下面这句:使用标签上传文件图片设置type='file’时,去除input自带的原有的样式 input[type="file"] { display: none; }(2)设置文字超出一行隐藏或者超出多行隐藏显示省略号white-space:nowrap; /* 强制文本一行显示 */text-overflow:ellipsis; /*添加省略号*/word-wrap:break-word;/*英文长单词换行,默认长单词是不换行的*//* 超出原创 2020-12-22 18:51:13 · 680 阅读 · 2 评论 -
编辑和添加使用同一个elementui组件封装弹框遇到的问题
这类问题一般会在同一个弹框里面用v-if和v-else判断显示那个表单出现的问题:1.遇到打开页面新增弹框就出现了校验是否非必填项的情况?比如这种情况:我们可以在弹框关闭和打开弹框的时候设置一下重置表单或者清空验证。但是要注意在打开弹框的时候要使用nextTick,不然在dom没有加载渲染完,重置表单会报错openDialog(){ this.openDialog = true; // 打开弹框,要注意重置表单要写在打开弹框的后面,不然不起作用. this.$nextTick(()原创 2020-11-25 10:18:48 · 747 阅读 · 0 评论 -
前端加密js库--CryptoJs
前端有的时候为了信息安全,我们需要对一些数据进行接口加密处理,如编码、将明文转化为暗文,加密对比,AES+BASE64算法加密等。使用步骤:1.使用npm安装$ npm install crypto-js2.在until文件下新建crypto.js文件,粘贴下列代码:import CryptoJS from "crypto-js";//密钥const key = CryptoJS.enc.Utf8.parse("1234567890000000"); //16位//加密向量const i原创 2020-09-21 10:16:32 · 2838 阅读 · 3 评论 -
下载、上传、预览功能实现总结
1.在小程序上的实现(1)小程序的上传不支持上传整个文件对象(可以看微信小程序开发文档进行了解),上传文件:// 上传 upload(){ // let that = this; wx.chooseMessageFile({ count: 1, type: 'file', success : (res) => { // tempFilePath可以作为img标签的src属性显示图片 const tempFil原创 2020-08-06 11:20:59 · 665 阅读 · 0 评论 -
三元运算符的使用总结
1.需要注意一般在 :style 和 :src 这些中使用放置在assets文件中设置静态的图片资源会不起作用的比如:<img :src="photo ? imgUrl+photo : '../../assets/photo.png'">这样设置时我们会发现不起作用,因为打包之后的assets文件夹中的资源会找不到,这是因为网页吧根域名作为相对路径了。有两种方法可以解决此类情况:(1)将静态图片地址赋值给一个引入的变量<script>import nologo from原创 2020-08-05 18:34:41 · 1567 阅读 · 0 评论 -
vue中的mixin
mixins是一种混合机制,用来更高效的实现组件内容的复用。组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,本质上两者还是泾渭分明,性对独立的。而mixins则是在引入组件之后,则是将组件内部的内容如data等方法method等属性与父组件相应的内容进行合并。相当于在引入后,父组件的各种属性方法都被扩充了。单纯的组件引用:父组件 + 子组件 >>> 父组件+子组件mixins:父组件 + 子组件 >>> new父原创 2020-07-27 17:16:38 · 330 阅读 · 0 评论 -
用户登录保存用户信息,退出清理用户信息
1.使用sessionStorage的时候登录时保存用户的登录信息:如果只是想单纯的保存用户的token或者id的话可以这样写:window.sessionStorage.setItem('userid', result.data.userid);window.sessionStorage.setItem('token', result.data.userid);但是当我们需要保存整个用户信息的时候,我们可以把返回的JSON对象转化为JSON字符串进行保存: window.sessionSto原创 2020-07-23 16:53:45 · 1278 阅读 · 1 评论 -
elementui的el-select组件的change方法
1.当el-select组件中的el-option标签中绑定的value值不是我们想要的时候,我们可以使用@change方法,获取到当前选中的对象。<el-form-item label="选择院系:" prop="college" :rules="{required: true, message: '请选择院系', trigger: 'blur'}"> <el-select v-model="dynamicValidateForm.college" placeholder="请选择学原创 2020-07-13 11:43:38 · 51574 阅读 · 2 评论 -
elementui动态生成表单项,并添加动态校验
1.定义一个表单dynamicValidateForm: { operatorid: "", domains: [] //动态生成的表单项都放在表单中的这个数组里面 },点击事件,点击按钮生成表单项//动态添加表单addDomain(){this.dynamicValidateForm.domains.push({ graduateyear:'', //需要动态添加的表单项 college:'' , //需要动态添加的表单项 .........})}原创 2020-07-13 11:10:19 · 1995 阅读 · 0 评论 -
vue页面中引入css
1.当你的css样式中没有使用sass的时候,可以直接引用后缀名为.css的样式文件<style>@import '../../satic/index.css';</style>或者使用<style>@import url('../../static/index.css');</style>2.当你使用了sass的时候,引入的样式文件后缀名一定要是.scss<style lang="scss">@import '../../原创 2020-07-09 10:01:51 · 2033 阅读 · 0 评论