![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 58
无人之岛08
这个作者很懒,什么都没留下…
展开
-
vue 弹层弹起 底部内容禁止滚动 并且保留当前滚动条高度
这是一个通用的需求,当页面提示框弹起禁止下边的内容滚动,并且保留滚动到的当前的高度,我是在vue公共的方法中写的,全局通用。第二步 :在你的公共js里边写入这个方法,导入全局,现在还不知道怎么注册全局方法的,请移步。关于vue全局引用公共的js和公共的组件的折腾。第一步:先在你的公共css里边写入这个样式。第三步 :在你的弹层组件内使用。转载 2022-09-07 14:00:24 · 763 阅读 · 1 评论 -
vue项目刷新当前页面的三种方法
想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种:如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://localhost:9530/#/supplier/supplierAll页面可以重新刷新下那么表格的数据可以重新加载,Dialog 对话框设置的数据可以在确定后刷新出现在页面上这时候我们最直接的思维就是想到下面这种:但是,试过的会发现用vue-router重新路由到当前页面,页面是不进行刷新的,转载 2021-12-09 15:56:40 · 2965 阅读 · 0 评论 -
使用require.context实现前端工程自动化
require.context是什么一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块什么时候需要用到require.context如果有以下情况,可以考虑使用require.context替换index.jsmodules在Vu..转载 2021-12-01 14:37:50 · 104 阅读 · 0 评论 -
vuecli3中移动端使用方法,postcss-pxtorem+amfe-flexible的适配方法
移动端适配配置npm install postcss-pxtorem -Dnpm i -S amfe-flexiblepostcss-pxtorem:可以把px自动切换为rem,如果需要使用px的时候改成 Px 就可以生效amfe-flexible:移动适配方案,自动计算html的 font-size 字体的大小。mian引入import 'amfe-flexible'index.html<meta name="viewport" content="width=d.转载 2021-06-15 11:47:18 · 495 阅读 · 0 评论 -
使用js-cookie实现两个vue项目的单点登录
需求是这样的:之前用vue做的两个系统,现在由于业务需要,要实现两个系统之间的相互跳转以及登录联动。分析需求:也就是说在登录了任意一个系统的情况下,另一个系统也默认登录,同理,任意一个系统退出登录另一个系统也要退出登录,也就是说我们要实现退出联动。两个系统之前都是利用localStorage进行存储登录相关信息的,但是localStorage无法实现跨域访问,那么我就想到cookie是可以通过设置domain来实现一级域名相同的两个系统之间实现跨域访问的,所以就想到使用js-cookie这个插件来实转载 2021-06-15 11:39:01 · 1841 阅读 · 0 评论 -
Vue3---路由权限动态管理:router.addRoute()
Vue2中,可以通过路由的addRoutes() 和 addRoute()两种方法实现路由权限动态渲染,但在Vue3中,摒弃了addRoutes() 方法,只保留了addRoute() 单个添加路由配置的方法。Vue2中路由对象Vue3中路由对象Vue3动态添加路由:在main.js中或者在登录回调中进行动态渲染路由。代码参考如下:const about = { //接口返回路由信息 path: '/about', name: 'About', comp...转载 2021-03-22 11:06:28 · 5329 阅读 · 0 评论 -
使用V-chart时踩过的一些坑
如何配置图表信息echart的配置项可谓是相当的海量,能不看就不看。而v-chart对其进行了不少的简化,所以我们想要自定义一个图表时,最好按照以下步骤来检查:图表私有属性v-chart每一个图表都有自己独有的设置项,想要配置这些项需要在组件上加入 :setting="chartSettings",然后在vue组建的data里设置chartSettings的值,如下:<template> <ve-line :data="chartData" :settings=.转载 2021-03-18 16:50:13 · 821 阅读 · 0 评论 -
vue.nextTick()方法的使用详解
什么是Vue.nextTick()??定义:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码;理解:nextTick(),是将回调函数延迟在下一次dom更新数据后调用,简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数, <template> <d..转载 2021-01-18 11:53:13 · 186 阅读 · 0 评论 -
Vue动态渲染本地图片
今天总结一下Vue动态渲染本地图片的一些问题~如果你直接使用本地图片地址,像下面这样<div> <img src="../../images/icon_01.png"></div>这是可以正常显示图片的,但是如果你想遍历渲染本地图片,直接引用图片地址是不行的,需要用require解析引入 <div class="box point" v-for="(item,index) in navList" :ke..转载 2021-01-14 15:58:56 · 3612 阅读 · 0 评论 -
优雅的elementUI table 单元格可编辑实现方法
最近在做可编辑特定列的单元格的elementUI table,看了N多的开源、文章,找到一个很优雅的实现方式,分享给大家。PS:单元格可编辑的table,用英文搜索:Inline editable table with ElementUI 会得到高质量结果。先上效果:APP.vue:<template> <div id="app"> <div style="margin-bottom: 30px"> <el-switch转载 2020-12-05 17:03:25 · 815 阅读 · 0 评论 -
element-ui 多选级联cascader 选择器回显问题
大家在使用element-ui的时候肯定会遇到这样一个问题就是在你使用级联选择器的时候,假设后台给你的数据是1,3,6,而你的的级联选择器选中后绑定的值可能是这样的[[1],[2,3],[4,5,6]],它直接将所有的父级都保存下来了。所以我们前端在编辑的时候进行回显就很难受,还要处理一下。今天是我带来的最笨的方法进行处理操作,话不多说直接看代码吧条件:1、后端接口需要的字段是interfaceCateId,值是字符串类型'1,2,3'2、前端请求到的接口是interfaceCate...转载 2020-12-01 10:51:30 · 3608 阅读 · 0 评论 -
解决element-ui中级联选择器(Cascader)出现空白选项的bug---空级联bug
在使用element-ui级联选择器的过程中,发现出现 空级联 的bug首先我们分析出现空级联原因是:由于数据是从后台传递过来的,当后端的老铁使用递归算出菜单,然后转换成json传递到前端的时候。就会出现最底层 的子项中 的 children 为空数组,这样就会造成,空级联 的bug存在。解决办法: 在前台js代码中,同样使用递归的方式,将最底层中的 children设为undefinedHTML部分: <el-cascader :change-on-...转载 2020-12-01 10:43:55 · 2101 阅读 · 0 评论 -
element ui 实现table序号递增
实现table序号递增element ui 实现table序号递增:(pageNo - 1) * pageSize + scope.$index + 1如何使用:<el-table-column label="序号" type="index" width="40" align="center"> <template slot-scope="scope"> <span>{{(pageNo - 1) * pageS转载 2020-12-01 10:29:32 · 937 阅读 · 0 评论 -
Vue使用bus总线时,第一次路由跳转时数据没成功传递的原因以及解决办法
bus总线是vue中路由跳转传递数据的常用方法,适用于传递数据不多的情况,但是在使用的过程中发现,bus总线在第一次路由跳转的时候总是不能够成功传递需要传递的数据。检查bus的配置以及调用方法,均没有出错,错就错在没有理解Vue的生命周期!!!我们知道bus的$on的监听应该位于$emit之前,如果在emit之前没有创建监听事件,那么肯定是得不到需要的数据。因此,我通过两个页面来了解路由跳转时两个页面的生命周期,下面给出其中一个页面的部分代码: //页面1 beforeCrea.转载 2020-12-01 10:23:43 · 1047 阅读 · 0 评论 -
element-ui 的el-cascader多选在IE中样式不正常
注意:ie缓冲比较严重,修改样式后,一定要ctrl+shift+del 进行缓冲清理,没准清理完缓冲你的样式就起作用了,问题就解决了<style> @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .el-cascader__tags > span { flex: auto; } i.el-cascader-node__postfix {转载 2020-11-27 16:34:24 · 521 阅读 · 0 评论 -
vue elementUI el-select 同时获取label 和 value 的值
<template><div><el-select v-model=“fruit” @change=“handleChange”><el-option v-for=“item in selectList” :key=“item.whsCode” :label=“item.fruitName” :value=“item.fruitEnName”></el-option></el-select></div></转载 2020-11-19 10:47:05 · 1934 阅读 · 0 评论 -
04_插槽
插槽基本的插槽解决了在组件标签中写内容无法被渲染的问题(如果我们想要像普通标签一样在标签中写内容会渲染出来)基本插槽的写法child.vue<template> <div> <slot></slot> </div></template>我们要给组件的使用者一个权限,可以自定义内容的权限,可以使用slot,slot放在哪,未来组件标签中的内容就会被渲染到哪parent.vue<template>原创 2020-10-19 22:19:13 · 185 阅读 · 1 评论 -
03_组件通信
组件通信组件之间的关系父子关系非父子关系组件通信-父子通信父子通信,利用在父组件模板中,给子组件添加属性的方法进行通信,一旦添加了属性,那么在子组件中可以通过props进行接收<template> <div> {{msg}} <Child :msg="msg"></Child> </div></template><script> export default { da原创 2020-10-17 09:50:35 · 84 阅读 · 0 评论 -
02_ json-server的基本使用
json-server的使用安装npm i -g json-server创建目录在电脑合适的位置创建一个文件夹,尽量是英文创建db.json在文件夹中创建一个db.json,并进行编辑json中数据对应关系{ "books": [], "users": []}当我们在db.json中写入以下内容时,未来会给你我们提供下列接口GET /books 获取所有信息GET /books/:id 获取单个信息POST /books 新增数据PATCH /books/:id 更新原创 2020-10-17 09:45:23 · 61 阅读 · 0 评论 -
01_Vue基础及指令
Vue基础引入vue.js<script src="vue.js路径"></script><script> // 这里写相关JS的代码</script>实例化vue对象const app = new Vue({ // 这里写相关的配置})配置el挂载点,讲对应符合选择器要求的挂载点,作为vue的模板(只有变成模板才能去使用模板语法)new Vue({ el: "#app"})data如果我们把数据放在data中,原创 2020-10-17 09:21:29 · 67 阅读 · 0 评论