小莉爱编程
一起学习一起进步
展开
-
element+vue+高德地图模糊搜索(一)
标题高德地图api注册属于自己的key高德地图官网可以进去注册,这个我就不多说了找到element官网element中的远程搜索可以直接复制使用,远程搜索和普通的搜索的区别就是,每次搜索一次就会发送一次请求<el-form :inline="true"> <el-row :gutter="20"> <el-col :span="8" > <el-select v-model="ti原创 2020-12-29 10:43:00 · 1342 阅读 · 3 评论 -
vuex的入门教程
vuex的结构vuex官网基本掌握这四个即可,后续通过做项目实战进阶开始使用1. 创建一个vue项目2. 安装vuex npm install vuex --save3. 新建store目录,创建一个index.js4. index.js中写入基本结构import Vuex from 'vuex'import Vue from 'vue'Vue.use(Vuex)export default new Vuex.Store({ state :{}, get原创 2021-09-06 16:26:25 · 308 阅读 · 5 评论 -
前端上传大文件使用分片上传
前提:分片上传针对于一些大的文件、普通大小的文件使用element中的上传组件可以实现效果,例如几G的文件就会比较卡,所以这时候就需要用到分片上传~效果:(上传进度展示)效果:(上传成功的效果展示)原创 2024-01-23 10:33:07 · 423 阅读 · 0 评论 -
如何使用elementUi中的card卡片以及小数点转换百分比四舍五入
项目场景:后端给你的数据中是小数点、数组、对象,如何渲染在页面上。这是效果图,上面是自己用h5渲染的,下面用到element的card上代码<template><div> <el-row :gutter="20" style="margin-left: 10px"> <div style="height: 50px"> <ul class="rightTip"> <li class="leftTip原创 2021-03-03 15:18:16 · 2332 阅读 · 11 评论 -
elementUi导入excel手动上传绑定多个参数以及配置请求头
elementUi导入需求:点击一个按钮,弹出对话框,有一个下拉选择框进行选择,并且将这个选择的值跟这个文件一起传给后台,并且不能为空,在点击上传全部操作完毕才可以点击确定进行上传给后台1、按钮本身的属性2.导入的基本属性3.携带三个参数为什么只有两个参数?4.请求头5.上传成功方法需求:点击一个按钮,弹出对话框,有一个下拉选择框进行选择,并且将这个选择的值跟这个文件一起传给后台,并且不能为空,在点击上传全部操作完毕才可以点击确定进行上传给后台源码:<el-upload .原创 2021-03-08 10:19:07 · 1534 阅读 · 1 评论 -
element+vue高德地图标点(二)
之前我教了大家用element文当中的远程搜索进行搜索地点element远程搜索这是效果图,点一个点就会在input框刷新一次,首先当然需要给地图添加点击事件了mapClick(e) { // 地图点击事件 if (this.map !== undefined) { if (this.projectMapMarker !== undefined) { // 如果点标记已存在则先移除原点 this.map.remove(t原创 2021-01-27 11:31:51 · 1061 阅读 · 10 评论 -
vue3+ts+pinia+vite一次性全搞懂
简单来说:是一个vue3版本的vuexpinia官网地址建好一个store文件下面的index.ts文件这一步是官网中的描述,定义一个defineStoreimport {// 相当于datareturn {// 相当于计算属性getters: {//相当于vuex中的mutation+action,可以同时写同步和异步的代码actions: {原创 2023-04-21 11:20:33 · 1390 阅读 · 0 评论 -
echarts实现动态渲染多柱图
根据用户选择查询,发送给后端,处理成多个柱子的数据 进行展示渲染原创 2023-02-17 16:25:44 · 1009 阅读 · 0 评论 -
uniapp使用uview上拉加载LoadMore功能搭配tabs
当他为false就不用再向后端请求接口this.bossList = [ ] } let str = this.areaCode.slice(0 , 4) //请求接口this.bossList.push(el) }) //在这里要进行一个判断,当后端传给我的数据小于每页的数据时就显示没有更多了 if(res.data.list.length < this.pageSize) {//这里设置成false就不可以继续加载,不可以进入请求接口的方法里了。原创 2022-09-29 19:39:26 · 2211 阅读 · 0 评论 -
使用echarts如何绘制一根柱子展示两种颜色的数据
X轴放日期、Y轴放总数据量(total)各一个数据,还有折现放的是incr(增长量),柱状图有两个颜色 表示两个数据,一个使用过的,一个未使用的 加起来等于总量。我们需要 以下5个数据;bytesSizeG这个方法是我换算单位的,不需要的 可以换掉了。series是一个数组 所以可以多放几个就组成了一根柱子展示两个数据。这里是后端返回的数据,我们需要把需要的数据合并成数组;这里因为我需要加单位,所以我选择了自定义。这里是有柱状图和折线图混合的一个图表。原创 2022-09-16 14:33:47 · 3196 阅读 · 0 评论 -
echarts多个关系图如何实现
跟其他echarts图表一样,第一步新建一个容器用来展示图;里面有一些配置都是需要在文档中一个个的找到 然后进行设置的。这里用到的时候力引导布局;大概看一下数据结构吧。这里的id名称一定要对上哦~记得写上这个加载方法哦!...原创 2022-08-26 16:41:36 · 2060 阅读 · 1 评论 -
echarts一条折线图展示多个数据
第三个values是y轴的数据;还有一个sizes是我们说的第三个数据;sizes是一个数组,所以我们只要知道tooltip划到哪一个的索引就可以拿到数据;这里是正常的折线图的渲染;只是展示tooltip的时候 自己格式化了一下。这里就是上面3.2说的 知道数组的索引就可以拿到相应的值;这个params是我鼠标滑到哪里的整个对象;这个方法是将数据转化为G的单位的方法;根据时间展示某一数量的时候的数据大小。这里的size就是第三个数据。这个就是params。...原创 2022-08-09 10:45:03 · 3147 阅读 · 0 评论 -
后端给你返回文件流,前端实现下载文件
后端返回的文件流,前端如何实现下载导出文件原创 2022-07-01 15:02:58 · 9932 阅读 · 3 评论 -
vue中的过滤器
关于vue的过滤器介绍和传多个参数问题过滤器一定要return出去才可以显示出来在视图上a就是第一个参数,b是方法名a和c都是参数a c d都是参数接收原创 2022-06-16 11:53:23 · 175 阅读 · 1 评论 -
vue2基础面试题
ref的解释<template> <div id="app"> <img ref="logo" src="./assets/logo.png"> <button>111</button> </div></template>在vue的生命周期中,只有在mounted中是最先获得dom的,所以在这里可以打印出来<script> export default { mount原创 2022-04-28 11:28:26 · 291 阅读 · 0 评论 -
vue3中setup、ref、reactive、响应式
vue3语法格式vue3提供的都是按需导入的方法,函数setup函数是vue3中专门为组件提供的新属性。<template> <div> {{name}} </div></template><script>import { reactive } from "vue"export default { props:{ item:String } //setup函数会在beforeCreate之后,crea原创 2022-01-20 15:14:43 · 3481 阅读 · 0 评论 -
promise入门即巅峰
promise的介绍promise是一个构造函数,可以进行对象的实例化;promise是js中进行异步编程的新解决方案;旧的解决方案是使用回调函数去解决异步;es6推出promise,支持链式调用,解决回调地狱问题回调函数这就是一个典型的回调地狱问题,回调函数嵌套调用;外部回调函数异步执行的结果是嵌套的回调执行的条件;缺点呢,就是不利于阅读,不便于异常处理promise的初体验<body> <h1>promise初体验</h1> <原创 2022-01-18 16:03:13 · 1516 阅读 · 4 评论 -
vue3语法
vue3生命周期vue2和vue3的生命周期钩子函数非常相似,我们甚至可以访问相似的钩子函数;随着Composition API的引入,我们访问这些钩子函数的方式已经改变。setup()方法在旧的 beforeCreate 钩子函数之后和 created 的钩子函数之前立即调用 setup 方法。因此,我们不再需要这两个钩子,我们可以简单地将本应有的代码放在 setup() 方法中。如何添加生命周期函数import { onMounted, onUpdated, onUnmounted } fro原创 2022-01-13 10:05:57 · 480 阅读 · 0 评论 -
项目封装网络请求、请求拦截和相应拦截
封装网络请求这里是写在一个基本的js配置文件中,封装网络请求// 通用的网络请求,安装axiosimport axios from "axios";//设置每个请求的类型,比如post、get、delete,所以要写成活的export function request(config) { const instance = axios.create({ baseURL: 'https://域名.cn/', //这里是默认的域名 timeout: 5000 /原创 2022-01-13 09:17:05 · 739 阅读 · 0 评论 -
TypeError: Cannot read property ‘replace‘ of undefined
微信小程序报错TypeError: Cannot read property ‘replace’ of undefined感觉代码是没有问题的;刚开始:let bg1 = this.myData.backgroundImage.replace("http://fast.hnzhilv.com/mingpian/bg", ""); let url1 = item.url.replace("http://fast.hnzhilv.com/mingpian/%E5%90%8D%E7%89%87原创 2021-12-10 14:32:04 · 5390 阅读 · 0 评论 -
使用原生js实现多选,取消选中,以及动态切换class
效果图多选效果的实现<view class="item" :class="isActiveFn(item)?'active':''" v-for="(item,index) in list" :key="index" @click="getItem(item)"> {{item.name}}</view>点击某个块通过getItem拿到值this.listCustom是下面那个添加的框的listgetItem(item) { //判断已经是否添加过原创 2021-12-06 14:21:47 · 4117 阅读 · 0 评论 -
uniapp展示图片下载分享
效果点击下载之后;流程:从一个页面跳进另一个页面(展示图片的页面)携带好需要的值,在展示图片的页面掉接口拿到图片路径等值;进行展示图片下载流程代码第一步:跳页面跳页面,携带参数;uni.navigateTo({ url: '/pages/knowledge/document/document?id=' + item.tid + '&source=' + item.source + '&docType=' + this.docType ,});在第二个页面拿到原创 2021-10-27 16:56:58 · 535 阅读 · 1 评论 -
uniapp如何使用uview中的loadmore上拉加载
效果引入loadmore首先搜索和tab的样式<view class="tabPage"> <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs> <u-cell-group v-for="(item,index) in answerData" :key="index"> <u-cell-item :title原创 2021-10-27 11:27:44 · 3357 阅读 · 2 评论 -
uniapp授权登陆操作
效果分析:登录流程 1.用户点击登录按钮,弹出授权弹窗 2.用户确认授权,调用uni.login接口,拿到code 3.使用code调用后端接口,接收后端返回的自定义登录态,如token等 4.登录状态在本地保存起来,用的时候在vuex取用 5.用户信息由后端解密,统一返回,再存入本地 此处简化了流程,没有返回自定义登录状态,直接使用openid来判断用户,用户信息也没有做特别处理,获取到之后就进行了存储1.用户点击登录按钮,弹出授权弹窗一个按钮点击事件弹出授权弹窗<view原创 2021-10-27 11:04:56 · 16784 阅读 · 7 评论 -
vue如何配置代理解决跨域
报错、CORS跨域问题network中显示还是后台域名,说明没解决跨域打开配置文件,相当于是用本地的localhost去代理后台的服务,这样就可以解决跨域network中显示,代表解决跨域啦原创 2021-08-24 15:38:40 · 257 阅读 · 1 评论