![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
_不是惊风
明天会吹拂着明天的风
展开
-
vue注册自定义指令,添加权限判断
添加按钮级权限判断原创 2022-12-14 14:49:08 · 225 阅读 · 1 评论 -
封装js方法,实现获取url参数
通用方法获取url参数原创 2022-12-05 11:11:33 · 300 阅读 · 0 评论 -
使用原生div制作table表格
在移动使用横屏表格功能,横屏后无法实现同向滚动功能,此时使用div制作table,实现容器内的滚动原创 2022-12-02 15:52:38 · 2170 阅读 · 0 评论 -
js常用方法 数组去重、数组排序等
常用方法原创 2022-08-12 10:05:06 · 174 阅读 · 0 评论 -
在vue3中使用echarts不显示tooltip问题
vue3无法出现tooltip原创 2022-08-11 10:43:19 · 1609 阅读 · 1 评论 -
el-table 排序
el-table排序原创 2022-07-26 10:01:33 · 5047 阅读 · 2 评论 -
el-table动态表头,动态数据处理
在el-table中遇到一个有意思的数据处理,以下数据表头为动态的数据此数据表头处理比较简单,难点在于表头对应的数据,当后端返回的数据只有部分时,如只有温度就返回温度,只有PM2.5就只返回PM2.5,而且后端没有返回其他没有的字段的默认值,此时我们就需要对数据进行处理对应好数据所在的位置不然则会出现PM2.5的值跑到了温度下面<el-table> <el-table-column align="center" label="序号" type="index"> </原创 2022-01-05 15:40:03 · 5545 阅读 · 7 评论 -
Vue导入上传Excel
对Excel的数据进行上传首先需要使用xlsx此文章的上传方式为手动上传(数据解析可在前端进行,也可交由后端处理)安装插件 npm install xlsx引入 import XLSX from ‘xlsx’使用el-upload进行上传 (el-upload在这不再做介绍)<el-upload :show-file-list="true" :headers="{ Authorization: token }"原创 2021-12-27 16:30:51 · 3193 阅读 · 0 评论 -
elementui 表格插入图片并且鼠标移入放大
先来看下效果图如果需要移入图片放大则可使用el-popover悬浮效果<el-table-column align="center" label="模板封面" prop="image"> <template slot-scope="scope"> <el-popover placement="right" title="" trigger="hover" > <!-原创 2021-12-23 10:36:22 · 2012 阅读 · 1 评论 -
vue3介绍
原创 2021-12-17 14:31:03 · 233 阅读 · 0 评论 -
vue数字滚动
1.安装依赖:npm install vue-count-to -D2.应用<template> <countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo></template><script> import countTo from 'vue-count-to'; export default { components: {原创 2021-12-15 16:19:41 · 1406 阅读 · 0 评论 -
vue 列表无缝实时滚动
1、安装vue-seamless-scrollnpm install vue-seamless-scroll --save 2.引入组件 import vueSeamlessScroll from 'vue-seamless-scroll' components: { vueSeamlessScroll}, 3.对vueSeamlessScroll进行配置computed: { ...mapGetters(["$selectionIndustry"原创 2021-12-15 16:09:30 · 271 阅读 · 0 评论 -
el-tree清空、设置默认值等功能
<el-tree ref="permissions" :default-checked-keys="permissionChecked" @check-change="handleCheckChangePermissions" //节点选中状态发生变化时的回调 @check="handleCheckChangeArea" //当复选框被点击的时候触发 :data="PermissionsTreeData" show-checkbox node-key="id" :check-原创 2021-12-15 15:41:47 · 2656 阅读 · 0 评论 -
Vue导出Excel
Excel 的导入导出都是依赖于js-xlsx来实现的。在 js-xlsx的基础上又封装了Export2Excel.js来方便导出数据。使用由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader。所以你先需要安装如下命令:npm install xlsx file-saver -Snpm install script-loader -S -D由于js-xlsx体积还是很大的,导出功能也不是一个非常常用的功能,所以使用的时候建议使用懒加载。使原创 2021-12-15 15:24:55 · 1051 阅读 · 0 评论 -
vue导出pdf
一、安装第一个.将页面html转换成图片npm install --save html2canvas 第二个.将图片生成pdf在这里插入代码片npm install jspdf --save二、定义函数,创建两个工具js文件新建utils文件夹 将htmlToPdf.js放入htmlToPdf.js:/* eslint-disable *///不使用JQuery版的import html2canvas from 'html2canvas';import JsPDF from 'jsp原创 2021-12-14 15:08:01 · 1214 阅读 · 1 评论 -
vue分页 对el-pagination进行二次封装
分页组件Pagination<template> <div class="container"> <el-pagination style="margin-left: 20px; margin-top: 20px" @size-change="handleSizeChange" @current-change="handleCurrentChange" :原创 2021-12-14 14:51:26 · 505 阅读 · 1 评论 -
vue 运行install 后缺失core-js
vue 运行install 后缺失core-js报以下错误These dependencies were not found:core-js/modules/es.regexp.dot-all.js in ./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js??ref–12-0!./node_modules/_babel-loader@8.2.3@babel-loader/lib!./node_modules/_cache-loader原创 2021-11-18 16:40:48 · 2223 阅读 · 0 评论 -
vue 响应式属性 VS 非响应式属性
响应式属性 VS 非响应式属性响应式当Vue组件的实例初始化的时候已有的数据就是响应式数据通过Object.defineProperty代理实例this身上的响应式属性的值发生改变会触发视图更新非响应式当Vue组件的实例初始化的时候没有,后期添加的属性没有通过Object.defineProperty代理实例this身上的非响应式属性的值发生改变不会触发视图更新如何设置响应式属性this.$set(target, propertyName/index, value)原创 2021-10-27 14:56:24 · 2144 阅读 · 0 评论 -
v-if和v-for的优先级
在同一级别以v-for优先永远不要把 v-if 和 v-for 同时用在同一个元素上。一般我们在两种常见的情况下会倾向于这样做:如果是一个列表中的项目 (如 v-for=“item list” v-if=“item.check”)。在这种情形下,请将 list 替换为一个计算属性 (比如 checkListNew),让其返回过滤后的列表,然后再进行渲染。computed: { checkListNew: function () { return this.list.filter(f原创 2021-10-26 17:57:34 · 2222 阅读 · 0 评论 -
什么是跨域?怎么解决跨域
跨域问题的出现小程序不存在跨域的问题,但如果当前的项目发布成H5模式,则会出现跨域以H5项目进行当前项目的运行如果没有配置web服务器内容,则会出现无法运行的情况需要配置浏览器的安装路径跨域问题的解决方式最为快速简单的方式是安装客户端浏览器调试插件,只需要利用CORS unblock插件,开启该插件,就可以直接进行本地跨域测试操作利用vue.config.js设置跨域代理操作,在项目根目录新建module.exports = { devServ原创 2021-10-26 17:37:52 · 3031 阅读 · 1 评论 -
Vuex的使用
Vuex的使用一、Vuex为什么需要使用Vuex,它的作用是什么集中管理状态数据用于给多个组件共享数据Vuex的基本概念store 数据仓库是storestate: 设置状态state ->mapStategetters:获取数据getters 根据已有的状态数据计算得到新的状态数据,等同于Vue中的computed -> mapGettersmutations: 修改数据mutations(同步修改)->mapMutationsactions: 异步操作原创 2021-10-26 12:39:25 · 2475 阅读 · 1 评论 -
uniapp 前后端通信实现
一. request功能的封装新建utils目录,并在该目录下新建config.js与request.js两个文件config.js地址参数配置export default { host:'http://localhost:3002'}request功能的封装,利用的是uni.requestimport config from './config'export default (url,data={},method="GET")=>{ return new Promi.原创 2021-10-26 11:46:11 · 4437 阅读 · 0 评论 -
uniapp关闭默认返回安卓和ios
页面加入生命周期onBackPress(e) { if(this.isModalShow){ this.isModalShow=false; return true;//返回true阻止默认操作 }},ios页面有默认手势关闭页面,需要在page.json配置单个页面或整个应用关闭ios的手势返回,那它就只能走我们的导航栏关闭了,就能监听了。{ "path": "pages/xxx", "style": { "navigationBarTitleText": "xx原创 2021-09-24 11:21:34 · 7240 阅读 · 0 评论 -
uniapp picker 在 ios中只有遮罩层或者 picker在app端第一次点击无法弹起,第二次几率性正常
1. uniapp picker 在 ios中只有遮罩层或者 picker在app端第一次点击无法弹起,第二次几率性正常解决:临时解决办法:在manifest.json中 修改 “nvueStyleCompiler” : “weex”官方在HBuilderX 3.1.7 已修复,但本项目未能解决,修改 “nvueStyleCompiler” : "weex"后正常不复现2.第一次加载白屏问题 ,添加加载动画页面3.uniapp APP端在区分ios和Android时,只有 uni.getSyste原创 2021-07-15 10:55:17 · 7510 阅读 · 0 评论 -
uniapp在顶部处添加按钮 和 动态修改标题、按钮文本
uniapp在顶部处添加按钮 和 对应的事件添加按钮:在pages.json中配置app-plus,{ "path" : "pages/myCollection/index", "style" : { "navigationBarTitleText": "我的收藏", "n原创 2021-05-26 15:58:39 · 5265 阅读 · 1 评论 -
vue过渡动画
vue过渡动画Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。对于这些在过渡中切换的类名来说,如果你使用一个没有名字的 transition,则 v- 是这些类名的默认前缀。 如果你使用了 transition name=“my-transition”,那么 v-enter 会替换为 my-transition-enter。transition组件Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用原创 2020-12-29 11:00:00 · 96 阅读 · 0 评论 -
Vue组件间通信深入,父向子 子向父 非父子
组件间传值父向子传值通过标签属性传值 如果子组件的props接收了 那这个标签属性就具有props特性 如果子组件的props没有接收 那这个标签属性就是一个普通的自定义属性 /*vue中父组件向子组件传递数据的套路: 1. 父组件通过子组件的标签属性向子组件传递数据 2. 子组件要通过props配置来选择性的接受父组件的数据*/<body> <div id="app">原创 2020-12-29 10:59:12 · 6431 阅读 · 0 评论 -
解决 Uncaught (in promise) Error: Navigation cancelled from “/...“ to “/...“ with a new navigation.
解决 Uncaught (in promise) Error: Navigation cancelled from “/Search#1608911018888” to “/Search#1608911019245” with a new navigation.这个错误是vue-router内部错误,没有进行catch处理,导致的编程式导航跳转问题,往同一地址跳转时会报错的情况push和replace 都会导致这个情况的发生解决方法如下:在路由器中进行配置import VueRouter原创 2020-12-25 23:56:44 · 15811 阅读 · 7 评论 -
vue手动封装分页组件
单独封装一个分页组件,进行全局注册,在需要使用的组件中进行引入,达到复用提高效率 1. total,总条数 (外部使用Pagination组件的区域传递进来的数据) 2. pageSize,每页显示多少条(外部使用Pagination组件的区域传递进来的数据) 3. totalPage, 根据1,2派生出总页数 4. lxyms,连续页码数(外部使用Pagination组件的区域传递进来的数据) 5. currentPage,当前页(内部数据) 6原创 2020-12-17 19:57:02 · 6927 阅读 · 0 评论 -
解决 Error in render: “TypeError: Cannot read property ‘name‘ of undefined“ found in
这是由于新增操作快,界面还未更新调用计算属性computed导致的错误可用async 和 await进行卡流程控制,如新增操作先改list 再改id原创 2020-12-08 20:04:59 · 9464 阅读 · 0 评论 -
解决vue在开发模式下警告 You are running Vue in development mode.
阻止你显示显示生产模式的消息You are running Vue in development mode.Make sure to turn on production mode when deploying for production.See more tips at https://vuejs.org/guide/deployment.html加入 Vue.config.productionTip = false;//屏蔽提示信息Vue.config.productionTip = fal原创 2020-11-29 17:37:36 · 13440 阅读 · 1 评论