![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE
阿啦ala
这个作者很懒,什么都没留下…
展开
-
数组计算:数组根据某个字段排序;判断数组中某个元素是否有重复项
判断数组中某个元素是否有重复项。原创 2022-07-01 16:48:30 · 136 阅读 · 0 评论 -
数组根据一个或多个字段进行匹配度排序
mounted() { let arr = [{ name: '张三', dept: '总裁办', position: '总经理' }, { name: '李四', dept: '人力资源管理管理', position: '主管' }, { name: '张武', dept: '运营部', position: '副经理' }, { name: '王芳',原创 2021-11-02 16:27:36 · 309 阅读 · 0 评论 -
关于vue3运行之后Network: unavailable问题
config.vue.js设置public,最后面修改自己的端口号 devServer: { host: "0.0.0.0", public: require('os').networkInterfaces()[Object.keys(require('os').networkInterfaces())[0]][1].address + ':8181', port: 8181, // 端口号}...原创 2021-09-16 15:22:41 · 857 阅读 · 0 评论 -
elementui-admin中阿里云oss后端签名直传
首先在utils文件夹中新建一个upload.js文件写入如下代码:import { vUploadImage } from '@/api/common'import axios from 'axios'import { Message } from 'element-ui'export function fileUpload(file) { // file是文件 return new Promise((resolve, reject) => { // 请求后端签名 v原创 2021-01-26 10:00:20 · 392 阅读 · 0 评论 -
elementui-admin后台设置代理的方法
根目录的 .env.development文件中设置VUE_APP_BASE_API = '/api'vue.config.js文件中配置代理,保存后重启即可proxy: { [process.env.VUE_APP_BASE_API]: { target: '', // 你请求的第三方接口 changeOrigin: true, pathRewrite: { // 路径重写 ['^' + process.env.原创 2021-01-15 10:16:05 · 1382 阅读 · 1 评论 -
elementui下拉框多选报[Vue warn]: <transition-group> children must be keyed: <ElTag>
elementui下拉框多选,选值报错[Vue warn]: children must be keyed: 选中一个值后所有的值都会被选中经检查,是由于我的下拉框的value值为一个对象而非单个值值为对象时需要填入value-key<el-select value-key="id" multiple v-model="personnelForm.deptUserArr" placeholder="" class="personnel"> <el-option v-for原创 2020-12-22 15:07:07 · 5159 阅读 · 1 评论 -
elementui select下拉框无法选值的解决办法
<el-select v-model="data" placeholder="请选择" @change="change"> <el-option v-for="(item, index) in 4" :key="index" :label="item" :value="item">{{ item}}</el-option></el-select>change: function() { this.$forceUpdate()}原创 2020-12-16 14:50:10 · 1254 阅读 · 0 评论 -
uniapp图片自适应显示,不裁剪
先看图:这是长图和方图的显示效果,都可以完全显示出来上代码:html部分:<view class="question-title" style="width: 100%"> <image @load="imageLoad" :style="{'width': images.width + 'px', height: images.height + 'px'}" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/原创 2020-11-20 10:12:27 · 4204 阅读 · 0 评论 -
vue-cropper裁剪图片后压缩上传
vue-cropper上传后返回一个file文件但是经常出现图片过大的问题所以上传后使用localResizeIMG进行压缩第一步:安装localResizeIMGnpm i lrz -S第二步: 在相应位置引入import lrz from 'lrz'第三步:压缩this.imgUrl = URL.createObjectURL(file, { quality: 0 })let quality = 1// 根据图片大小设置压缩比例 if (file.size >= 1024原创 2020-11-17 14:55:54 · 1372 阅读 · 0 评论 -
uniapp中onLaunch异步方法与onLoad执行顺序问题(登录获取token等)
问题描述app.vue里的onLaunch中如果有异步方法,比如登录方法,返回结果可能会在页面的 onLoad 之后,为了让页面的 onLoad 在 onLaunch 之后执行,使用以下解决方案1、main.js添加如下代码Vue.prototype.$onLaunched = new Promise(resolve => { Vue.prototype.$isResolve = resolve})2、在 App.vue 的 onLaunch 中增加代码 this.$isResol转载 2020-10-20 13:54:45 · 8787 阅读 · 0 评论 -
处理微信公众号图片防盗链
我这里是在vue框架中使用的方法就是用iframe加载图片html代码如下注意:需要在img标签外面再包裹一个div标签<div class="coverPicUrlBlock"> <img :src="item.coverPicUrl" alt="" class="coverPicUrl"></div>首先在utils文件夹中创建一个wxImgUrl.js文件添加如下代码// 用于处理微信图片的防盗链export function wxImgUrl原创 2020-10-09 14:34:23 · 1088 阅读 · 1 评论 -
elementui分页列表的全选、全不选和反选
先看一下结果图:官方文档:https://element.eleme.cn/#/zh-CN/component/checkbox其中需要注意的几点:单独选择的时候全选按钮应该变成indeterminate 状态;在已有部分选择时点击全选秩序添加未选择的元素,而非所有;页码切换后应当保留当页选择状态;<template> <div class="group"> <div class="box check"> <div clas原创 2020-09-24 14:23:31 · 1371 阅读 · 0 评论 -
数组元素的上移下移
项目中有一个需求,需要处理数组元素的上移和下移changeSort: function(index, type) { this.tweetsData.splice(type ? index : index - 1, 1, ...this.tweetsData.splice(type ? index + 1 : index, 1, this.tweetsData[type ? index : index - 1]))}其中,this.tweetsData表示整个数组,index表示需要移动的元素下原创 2020-09-24 13:59:13 · 1165 阅读 · 0 评论 -
vue判断数组中时间段无重复区间
原数组是这样的this.tableData = [{ "endTime": "2019-12-05 00:00:00", "startTime": "2019-11-01 00:00:00"}, { "endTime": "2020-08-31 11:29:14", "startTime": "2019-12-01 00:00:00"}]需要判断数组中所有元素的startTime和endTime组成的时间段是否存在重复区间save: function() { var startTime原创 2020-09-01 15:02:11 · 1637 阅读 · 0 评论 -
vue中计算属性和过滤器的区别和用法
首先来看一个例子:已知数学成绩和语文成绩,要求他们的平均值这里可以使用的方法很多:在methods()里面计算;在computed()里面计算;在filter()里面计算<template> <div> <div>平均值1:{{ avarage1 }}</div> <div>平均值2:{{ avarage2 }}</div> <div>平均值3:{{ math | avarage3原创 2020-07-07 10:18:39 · 2466 阅读 · 1 评论 -
VUE中如何使用echarts
第一步:安装echarts在命令行中输入npm install echarts --save提示版本号表名安装成功第二步:引入在main.js文件中,引入echarts// echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts第三步:使用在需要展示echarts的页面中,添加下列代码mounted() { // 基于准备好的dom,初始化echarts实例 var myChart =原创 2020-07-04 14:10:53 · 2663 阅读 · 0 评论 -
FroalaEditor富文本编辑器toolbarButtons顶部按钮配置
官网介绍:https://froala.com/wysiwyg-editor/docs/options/#toolbarButtons配置方法:config: { toolbarButtons: ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|', 'fontFamily', 'fontSize', 'color', 'inlineClass', 'i原创 2020-07-01 10:19:18 · 1467 阅读 · 0 评论 -
elementUI+froalaEditor实现仿微信公众号富文本编辑器
首先上图文章内容显示编辑器安装:https://blog.csdn.net/weixin_39152200/article/details/106941233下载地址:https://download.csdn.net/download/weixin_39152200/12564294原创 2020-06-30 17:10:52 · 2839 阅读 · 2 评论 -
vue监听json数据变化
普通数据export default { data() { return { descLength: 0 } }, watch: { 'descLength': function(newValue) { console.log(newValue) } }}json数据的某个元素export default { data() { return { activeArticle: { titl原创 2020-06-30 15:06:10 · 1887 阅读 · 0 评论 -
富文本编辑器froala Editor在vue中的使用
根据官方文档:https://froala.com/wysiwyg-editor/docs/framework-plugins/vue/第一步:安装froala Editornpm install vue-froala-wysiwyg --save第二步:在main.js文件中引入// Require Froala Editor js file.require('froala-editor/js/froala_editor.pkgd.min.js')// Require Froala Edi原创 2020-06-24 13:58:04 · 4076 阅读 · 1 评论 -
关于vue异步接口请求
方式一getData: async function() { // 异步方法 try { // 顺序请求 await this.getSetupList(); await this.getRoleList(); await this.getList(); } catch (e) {}}方式二login: function(code) { // 定义方法 return new Promise((resolve, reject) => { consol原创 2020-06-17 13:59:02 · 4029 阅读 · 0 评论 -
element-admin框架导出(可处理后端返回错误码)
示例场景:导出用户信息,后端接口成功则返回文件流,失败则返回错误状态码和错误信息请求接口地址api/user.js中export function exportAccountInfoByIds(params) { // 定义方法名 return request({ url: '/account/exportAccountInfoByIds', // 导出接口地址 method: 'get', responseType: 'blob', // 后台返回数据转换成blob类型原创 2020-06-17 13:58:24 · 415 阅读 · 0 评论 -
vue中组件与组件之间传值,调用
父组件给子组件传值<BlockHd :hdInfo="hdInfo"></BlockHd> //父组件中,绑定值props: ['hdInfo'] // 子组件取值父组件修改子组件的数据或调用方法<IndexTabList ref="reloadList"></IndexTabList> // 父组件绑定值,子组件中仅需定义数据或方法this.$refs.reloadList.status ='loading' // 父组件js中修改子组件的s原创 2020-06-17 13:57:35 · 200 阅读 · 0 评论