vue
文章平均质量分 55
新时代农民工Top
不想做产品经理的 UI 不是一个好的程序员
展开
-
vue+elementui 项目 table表格自定义排序规则
在列中设置 sortable 属性即可实现以该列为基准的排序,接受一个 Boolean,默认为 false。可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。可以使用 sort-method 或者 sort-by 使用自定义的排序规则。如果需要后端排序,需将 sortable 设置为 custom,同时在 Table 上监听 sort-change 事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据。原创 2022-09-30 15:32:44 · 5734 阅读 · 2 评论 -
vue 项目css预处理语言伪元素样式乱码解决
vue 项目 dart-sass在打包过程中会将伪元素content中的内容转义,会出现乱码问题。原创 2022-09-22 16:15:27 · 1263 阅读 · 0 评论 -
vue 路由守卫 -- 全局前置守卫
beforeEach在这个守卫里面可以做一些防止用户非法进入页面的操作,在进入页面的时候可以做一些用户信息验证,判断是否具有 token ,不具有的话禁止用户进入页面,可以提高安全性router.beforeEach((to, from, next) => { const token = localStorage.token; if(token) { next(); } else { if(to.path === '/index') { next() } else {原创 2022-03-24 14:00:00 · 1056 阅读 · 0 评论 -
input 框只允许输入正整数数字
原生js – input在项目中有些时候我们希望 input 框之能输入数字,比如 购物车里的商品数量等等<body> <input type="text" class="inp" maxlength="5"> <script> let inp = document.querySelector('.inp') inp.addEventListener('input', (e) => { in原创 2022-02-25 16:45:00 · 3567 阅读 · 0 评论 -
vue 自定义多选框组件
自定义多选框组件<template> <div class="checkBox"> <input v-model="isInherit" @click="handlerChecked" :style="`width: ${width}px; height: ${height}px;`" type="checkbox" id="inp" /> <label for="inp"> <span :style="`font-原创 2022-02-17 16:28:16 · 1674 阅读 · 0 评论 -
vue + elementUI 手动控制 tree 组件节点的展开状态
vue + elementUI 手动控制tree组件节点的展开状态在日常工作中,会时常接触到 tree 结构的目录,在手动合并目录之后,不想一个一个再去展开,就需要一个按钮可以帮助用户一键展开 tree 结构,顺着这个需求寻求解决方法解决方案如下:<template> <div id="app"> <el-button ref="openBtn" @click="open">展开</el-button> <el-button r原创 2022-01-20 17:15:00 · 2154 阅读 · 1 评论 -
vue2 基础入门
vue2 基础入门一、vue 简介1.什么是 vue官方给出的概念:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的前端框架。2.vue 的特性vue 框架的特性。主要体现在两个方面数据驱动视图双向数据绑定2.1 数据驱动视图 在使用了 vue 的页面中,vue会监听数据的变化,从而自动重新渲染页面的结构好处:当页面数据发生变化时,页面会自动重新渲染!注意:数据驱动视图是单向的数据绑定。2.2 双向数据绑定在填写表单时,双向数据绑定可以辅助原创 2022-01-15 18:21:15 · 3911 阅读 · 0 评论 -
解决使用 element-ui 的 table 组件时,表格里面有按钮聚焦问题
在按钮点击事件里面添加如下代码即可let r= this.tableData.findIndex((item) => item.index === row.index)document.querySelector(`tbody tr:nth-child(${r+1}) .el-table_1_column_4 .el-button`).blur()原创 2022-01-07 15:54:49 · 760 阅读 · 0 评论 -
vue 中通过添加原生 input 实现文件上传
文件上传是通过 input 框 且 type = 'file' 来实现的文件上传功能,在页面标签合适位置添加<input type="file" name="avatar" accept="image/gif,image/jpeg,image/jpg,image/png" style="display:none" @change="changeImage($event)" ref="avatarInput" /><!-- 在点原创 2021-12-30 17:45:00 · 4849 阅读 · 2 评论 -
vue3.0 入门基础
vue3前置为什么学vue3目标:了解vue3现状,以及它的优点,展望它的未来Vue3现状:vue-next 2020年09月18日,正式发布vue3.0版本。但由于刚发布周边生态不支持,大多数开发者处于观望。现在主流组件库都已经发布了支持vue3.0的版本,其他生态也在不断地完善中,这是趋势。element-plus 基于 Vue 3.0 的桌面端组件库vant vant3.0版本,有赞前端团队开源移动端组件库ant-design-vue Ant Design Vu.原创 2021-12-18 19:15:00 · 679 阅读 · 0 评论 -
使用 Vue.js 构建 VS Code 扩展
使用 Vue.js 构建 VS Code 扩展Visual Studio (VS) Code 是开发人员在日常任务中最喜欢使用的代码编辑器之一。它的构建考虑到了可扩展性。在某种程度上,VS Code 的大部分核心功能都是作为扩展构建的。您可以查看 VS Code 扩展存储库 ( https://github.com/microsoft/vscode/tree/main/extensions ) 以了解我在说什么。VS Code 在底层是一个电子 ( https://www.electronjs.org翻译 2021-12-17 19:30:00 · 1342 阅读 · 4 评论 -
vue2 与 vue3 生命周期对比
周期对比vue2vue3beforeCreatesetupcreatedsetupbeforeMountonBeforeMountmountedonMountedbeforeUpdateonBeforeUpdateupdatedonUpdatedactivetedonActiveteddeactivetedonDeactivetedbeforeDestoryonBeforeUnmountdestoryedonUn原创 2021-12-16 15:15:00 · 1100 阅读 · 0 评论 -
vue中keep-alive的使用及详解
vue中keep-alive的使用及详解概念keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 transition 相似,keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中。作用在组件切换过程中将状态保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性原理在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中/在 render(页面渲转载 2021-12-13 17:35:42 · 339 阅读 · 0 评论 -
vue 中 v-if 和 v-show 指令的共同点与不同点
vue 中 v-if 和 v-show 指令的共同点与不同点共同点:都可以用来控制元素的显示与隐藏不同点:v-if 指令是通过动态的删除或者添加 DOM 元素,来控制元素的显示与隐藏,比较消耗性能,如果元素不是经常显示隐藏切换,可以考虑用 v-if 。v-show 指令是通过控制 css 样式中的 display: none/display: block,来控制元素显示与隐藏,适用于频繁显示隐藏切换的场景v-if<tamplate> <div>原创 2021-12-10 14:25:49 · 741 阅读 · 0 评论 -
vue 中使用文本编辑器 -- mavon-editor 插件
一、下载安装npm install mavon-editor二、全局注册// 引入 mavon-editorimport mavonEditor from 'mavon-editor'import 'mavon-editor/dist/css/index.css'// 挂载全局Vue.use(mavonEditor)三、使用<template> <div> <mavon-editor style="width: 100%; hei原创 2021-11-03 10:33:51 · 3667 阅读 · 6 评论 -
vue3 -- 封装消息提示方法
在实际开发中,为了更好地用户体验,我们会在用户执行了某些操作之后,予以反馈,告诉用户操作成功还是失败,因此需要一个消息提示反馈,这样的提示组件并不会像别的页面组件一样直接呈现给用户,而是通过某些操作来触发消息提示,因此我们会把他封装成全局方法原创 2021-10-05 22:17:32 · 1298 阅读 · 0 评论 -
vue3 -- 自己封装弹框组件 -- 支持 Promise API
在列表累的页面中最常见的就是增删改查,其中删除需要慎重操作,因为数据一旦删除就是永久性的不可逆的,所以在执行此类操作的时候,都会使用弹框进行二次确认,真的确定删除在执行删除操作,增强用户体验原创 2021-09-29 15:37:42 · 2075 阅读 · 0 评论 -
vue3 -- 自己封装计数器组件
vue3 – 自己封装计时器组件背景在一些商城类网页中打开商品详情都会有一个计数器来选择购买的数量,这样的计时器不仅会在商品详情页面显示还会在购物车里面有,那就可以把计时器封装成组件,以便于更好的服用以及后期维护落地代码<template> <div class="xtx-numbox"> <div class="label"><slot /></div> <div class="numbox">原创 2021-09-27 20:03:09 · 464 阅读 · 0 评论 -
vue 第三方方法 useIntersectionObserver 实现数据懒加载
vue 第三方方法 useIntersectionObserver 实现数据懒加载背景在开发网站的时候,有时候一个页面的数据会很多,一次性加载会降低性能,加载速度缓慢,其实只要让可是串口里面的数据加载即可,当页面部分内容还没有进入可视区域的时候,可以先不用加载数据,一旦进入可视区域通过事件监听元素位置进而选择数据加载的时机,这样做的好处就在于可以增强性能,避免没有必要的请求在 vue 项目中还有第三方方法可以帮助我们进行数据懒加载落地代码@vueuse/core 为我们提供的 useInters原创 2021-09-25 21:08:19 · 3246 阅读 · 0 评论 -
vue3 -- 封装自己的分页组件
vue3 – 封装自己的分页组件背景在浏览列表类型的数据的时候,如果数据比较多一次性全部请求会出现性能损耗以及加载延迟等问题,那么此时分页组件就起到了关键作用,它可以只请求一部分数据,也不会占用太多的页面空间,想看别的数据可以通过页码的改变来发起请求,刷新页面数据现在我们自己来封装分页组件组件所需参数total 属性 :用来传递数据总条数pagesize 属性 :每页展示几条数据currentPage 属性 :当前默认页码change-page 事件 :页码改变时触发的事件,参数为当前页码原创 2021-09-23 18:45:55 · 614 阅读 · 0 评论 -
vue3 项目中配置10kb下的图片转换成 base64格式
vue3 项目中配置10kb下的图片转换成 base64格式,在 `vue.config.js` 中添加如下配置原创 2021-09-20 23:29:58 · 866 阅读 · 0 评论 -
vue3 -- 自己封装类似京东商品详情页放大镜效果组件
vue3 – 自己封装类似京东商品详情页放大镜效果组件原创 2021-09-19 20:02:54 · 635 阅读 · 0 评论 -
vue3 - 仿 element-ui Breadcrumb 面包屑组件封装自己的面包屑组件
仿 element-ui Breadcrumb 面包屑组件封装自己的面包屑组件element-ui 面包屑结构<el-breadcrumb separator="/"> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item&g原创 2021-09-16 20:33:10 · 451 阅读 · 0 评论 -
vue项目优化--图片懒加载--封装自定义指令
项目优化–图片懒加载–封装自定义指令目的对于一些图片多的网站,图片懒加载是必不可少的一项性能优化,在图片进入可视区域再加载,这样可以避免不必要的性能损耗,增加网页的加载速度,在加载的时候处理一下加载失败web API IntersectionObserver原生 web API IntersectionObserver 简单介绍// 创建观察对象实例const observer = new IntersectionObserver(callback[, options])const obs.原创 2021-09-16 14:24:34 · 185 阅读 · 0 评论 -
vue3 项目封装侧导航文字骨架效果组件-全局封装
当显示页面的时候,有些数据是需要从后台加载,网络不好的时候可能需要等待,那就可以做一个骨架层闪动动画,增加用户体验原创 2021-09-13 19:38:53 · 198 阅读 · 0 评论 -
vuex利用第三方包实现数据持久化
Vuex–持久化目的:让在vuex中管理的状态数据同时存储在本地。可免去自己存储的环节。在开发的过程中,像用户信息(名字,头像,token)需要vuex中存储且需要本地存储。如果有别的模块也需要持久化,也存储在本地1)首先:我们需要安装一个vuex的插件vuex-persistedstate来支持vuex的状态持久化。npm i vuex-persistedstate2)然后:在src/store 文件夹下新建 modules 文件,在 modules 下新建 user.js 和 c.原创 2021-09-11 19:27:39 · 704 阅读 · 1 评论 -
vue 组件之间的常见的几种传值方式
一、父传子 (自定义属性–props)父组件向子组件传值,通过自定义属性的方式进行传值,在子组件中用 props 定义自定义属性,然后在父组件中通过 v-bind 指令把需要传递的数据绑定在子组件上,那在子组件中 props 里面的自定义属性可以直接使用代码演示父组件代码<template> <div class="app-container"> <h1>App 根组件</h1> <hr /> <di..原创 2021-09-08 16:14:36 · 3135 阅读 · 0 评论 -
Element UI中点击按钮后不失焦?如何强制给它失焦
在使用element-ui 中按钮组件的时候,会发现点击之前和点击之后按钮的颜色不一样,其实是点击时候按钮聚焦,当按空格键时还会触发按钮上绑定的事件,只有点击一下别处才会让按钮失焦那么该怎么解决这个问题呢?想想既然点击会让按钮聚焦,那么就可以在按钮事件里面加上让按钮失焦的方法即可document.querySelector('按钮选择器').blur()...原创 2021-09-05 14:40:43 · 1581 阅读 · 0 评论 -
element-ui中form表单input、select框宽度自适应
问题我们在使用 element-ui 组件库中的 form 组件的时候,发现让每个 el-form-item 呈现多行多列的时候会显得 input、select 框参差不齐,而且当页面的宽度足够大的时候在最左边回留有空隙原因由于它的内置样式无法自适应,所以需要自己来写样式覆盖掉内置样式解决方法在 form 组件内的 style 标签内添加如下代码.el-form-item { margin-right: 0 !important;}.el-form-item__label { po原创 2021-09-02 23:42:58 · 12394 阅读 · 1 评论 -
前端vue项目打包--性能优化
vue 项目打包优化打包优化项目开发完成打包 :用webpack做打包(把.vue, .js, .less ------> .js, .css, .html)在项目中都会提供命令: npm run build打包优化:在保证功能可用的前提下,让我们的文件尽可能小在保证功能可用的前提下,让我们的页面显示出来的速度更快一些打包之后,会得到dist目录,如果希望可以双击打开index.html,则需要提前在vue.config.js中配置:vue.config.js中{.原创 2021-09-01 22:56:45 · 1176 阅读 · 0 评论 -
项目打包去掉 console.log
打包去掉 console.log大家在项目开发的时候,需要看看一些后端接口返回的结果,会多次使用 console.log项目开发完成打包的时候,发现控制台一堆的 console.log ,非常头疼,下面给大家推荐一下在 Vue 项目中一次性屏蔽所有的 console.log 的办法在vue.config.js中,配置:chainWebpack(config) { config.optimization.minimizer('terser').tap((args) => {原创 2021-09-01 15:30:52 · 1190 阅读 · 0 评论 -
跨域问题以及解决方案
首先先了解一下什么是跨域:当浏览器的url地址的协议,域名,端口号和ajax的地址的协议,域名,端口号有一个对应不上就会发生跨域问题。跨域有几种解决方案呢?(jsonp、cros、代理转发)1. jsonp需要前端和后端同时支持前端用script+src属性, 发送函数名给后台, 同时准备好同名的函数, 准备接收数据后端返回的字符串一定用方法名(数据字符串)格式返回, 到script标签中执行调用函数名, 并传递数据<script> function callBackFn(原创 2021-08-06 13:25:13 · 116 阅读 · 1 评论 -
js数组转换tree树状结构
数组转成对象const arr = [ { label: '男', value: 0 }, { label: '女', value: 1 } ]转换为: {0: '男', 1:'女'}具体代码实现<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-原创 2021-08-04 20:19:21 · 1103 阅读 · 0 评论 -
Refusing to install package with name “element-ui“ under a package
npm安装包报错:Refusing to install package with name “element-ui” under a package可能是文件名称与包名相同,会造成npm不知道找哪个 就会报错原创 2021-08-04 15:26:08 · 242 阅读 · 0 评论 -
vuex 五大核心及其用法
vuex是什么Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理数据,以相应的规则保证状态以一种可预测的方式发生变化五大核心概念state 共享数据源直接使用:this.store.state.变量名//不分模块this.store.state.变量名 // 不分模块 this.store.state.变量名//不分模块this.store.state.模块名.变量名 // 分模块映射使用:import { mapState } from ‘vu原创 2021-07-20 10:35:20 · 149 阅读 · 0 评论