vue
浮生666
只为代码更简洁,向更好,更快的方向发展。
展开
-
vue实现多选点击、点击谁谁变色,一键重置颜色如何实现?
vue中实现多选按钮,点击变色,点击一键清除按钮,重置所有选中的按钮颜色原创 2022-09-28 16:37:35 · 1671 阅读 · 1 评论 -
provide inject 如何传递响应式的值?
provide inject 如何传递响应式的值原创 2022-09-05 14:44:03 · 129 阅读 · 0 评论 -
vue点击dom节点,显示下拉框;点击dom节点外,隐藏下拉框怎么实现?
vue点击dom节点外,隐藏下拉框原创 2022-08-17 14:00:41 · 419 阅读 · 0 评论 -
vue对象新增属性、删除属性,直接通过下标修改数组、页面未更新如何处理?
使用this.$set()方法处理,具体如下:<template> <div class="home"> <div v-show="obj.sex"> 性别:{{obj.sex}} </div> <button @click="addSex">添加性别</button> <div> {{arr}} </div> <button @原创 2022-03-23 15:13:46 · 1781 阅读 · 0 评论 -
vue 隔代传值provide/inject方法如何使用?(响应式)
vue 组件传值的方法有很多,但是项目中有些时候需要隔代传值,例如从曾祖父代网曾孙子代传值,普通的父子传值就比较麻烦,而使用vuex又不太划算,那么这个时候可以使用provide/inject方法;可以隔很多代往下传,但是必须是从上往下传代码如下所示:爷爷组件代码如下:<template> <div class="home"> <button @click="tap">爷爷组件传值</button> <child1><原创 2022-03-03 15:57:07 · 927 阅读 · 0 评论 -
element 表格里,每一行都循环使用el-popover组件,关闭按钮失效问题如何解决?
代码如下,拿去就用:<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <style> .item:hover原创 2022-03-02 16:55:26 · 1330 阅读 · 0 评论 -
vscode搜索内容后,编辑器卡死问题如何解决?
按照下图操作,完成重启即可原创 2022-01-10 14:56:30 · 740 阅读 · 1 评论 -
element 表格翻页勾选带分页(记忆勾选)如何实现?
不多bb,代码拿走不谢,代码如下:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></head><body> <di原创 2021-12-24 09:48:26 · 1414 阅读 · 1 评论 -
vue手写轮播图
代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu原创 2021-11-05 17:06:08 · 788 阅读 · 0 评论 -
vue 监听刷新事件如何写?
在网上找了很多都不能用,用下方这串代码,亲测有用,直接放在mounted执行即可: mounted() { window.addEventListener("load", () => { //写入你想要执行的代码 }); },原创 2021-10-21 16:15:29 · 1705 阅读 · 5 评论 -
vue rem自适应布局如何实现?
找到main.js,最下方加上如下代码即可实现(页面中写代码时把设计稿除以100即可,例如:100px就是1rem):;(function(win) { var tid; function refreshRem() { let designSize = 1920; // 设计图尺寸,如果是移动端改为750 let html = document.documentElement; let wW = html.clientWidth;// 窗口宽度 let r原创 2021-09-26 19:53:41 · 417 阅读 · 0 评论 -
vue 项目中 sass 如何复用?
前言:vue项目中,我们在使用scss编写代码的时候,有些时候可能会有很多样式代码是重复的,这个时候我们可以把公共的部分提取出来,文件结构如下图:步骤1:在assets目录下新建css目录,存放css资源,在css目录下新建styles.scss 文件,编写代码如下:@mixin publicCss($width,$height){ //publicCss是css方法; $width和$height是入参变量,动态变化 .childBox { > div {原创 2021-09-23 17:01:28 · 662 阅读 · 0 评论 -
vue 子组件直接修改父组件props传来的值报错如何解决?
报错信息: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value.原因:报错原因:props传值是单向数据流,只能由父组件传递给子组件,子组件被动接受,一旦子组件自己试图修改props中的值,就会报上述错误,这样原创 2021-08-23 10:36:21 · 2144 阅读 · 0 评论 -
vue的slot插槽如何使用和理解?
slot插槽:分为三种类型:匿名插槽、具名插槽、作用域插槽;简单来说,就是在子组件内放一个slot标签,作为占位符;具体展示什么,是父组件决定的,下面举三个小例子;1、匿名插槽子组件代码如下:<template> <div> <header>公用头部</header> <section>公用主体部分</section> <slot></slot> <!--此为匿原创 2021-08-05 15:49:07 · 1086 阅读 · 1 评论 -
vue 注册组件的方法有哪些?
vue 注册组件的常用方法有局部注册和全局注册局部注册使用就是哪里需要就引入,全局注册就是在main,js中挂载局部注册组件使用:父组件代码如下:<template> <div> <childA></childA> </div></template><script>import childA from "@/components/childA"; //导入组件export default {原创 2021-08-05 11:27:41 · 1132 阅读 · 1 评论 -
vue父传子、子传父、兄弟组件之间传值如何实现?
1、父传子:在子组件标签上绑定自定义属性名toChildVal,属性值为父组件需要传递的数据val;子组件内部通过props接受自定义属性名toChildVal输入框输入传值父组件代码如下:<template> <div> <input type="text" v-model="val"> <childA :toChildVal="val" style="margin-top:20px"></childA> <原创 2021-08-04 19:21:38 · 568 阅读 · 1 评论 -
vuex使用方法(语法糖和modules使用)
上一篇文章我们介绍了vuex的基本使用方法,但是当你项目比较大,vuex的数据比较多,使用过程中,你就会发现,有很多问题第一个问题是:数据不太容易维护改进方案:因为你的所有同步和异步方法都写在了一个index.js文件中,其实我们可以通过modules划分来解决这个问题第二个问题是:我们获取数据,更改数据代码过于繁琐之前写法如下:获取数据时:使用 this.store.state.xxx提交同步方法时:使用this.store.state.xxx提交同步方法时:使用 this.store.原创 2021-08-03 17:19:07 · 767 阅读 · 1 评论 -
vuex的基本使用(超级详细)
vuex在vue中起到一个数据状态共享的作用,类似于一个数据大仓库,接下来具体讲下vuex的使用方法。主要讲述如何定义数据,组件内如何获取数据,如何同步,异步更改数据1、在src目录下新建store文件夹,在store文件夹下新建index.js文件2、main.js引用import store from './store'new Vue({ router, store, render: h => h(App)}).$mount('#app')3、index.js下代码如下原创 2021-08-03 15:14:41 · 2758 阅读 · 1 评论 -
vue3.0在ie11浏览器打开空白问题如何解决?
不说废话,直接修改 vue.config.js,修改完保存重启项目即可代码如下:// An highlighted blockmodule.exports = { transpileDependencies: process.env.NODE_ENV === "development" ? ["*"] : []}原创 2021-07-27 10:07:21 · 1020 阅读 · 3 评论 -
前端怎么解析pdf流文件,并展示在页面上
前言:最近做了一个在前端展示发票的功能,后端接口返回ofd格式的文件,前端获取到ofd格式的下载文件url,然后通过url调用后端接口,获取到pfd流文件,之后前端需要把流文件转为blob链接在页面展示,步骤如下:1、前端下载vue-pdf插件命令行输入: npm install --save vue-pdf导入组件: import pdf from ‘vue-pdf’注册组件: components: {pdf}data中定义: src: ‘’2、前端请求接口获取pdf流文件页面里展示,不原创 2021-05-27 15:46:49 · 11107 阅读 · 26 评论 -
vue_等多个请求执行完再执行下一个方法(Promise.all用法)
vue_等多个请求执行完再执行下一个方法(Promise.all用法)getData1() { return new Promise((resolve, reject) => { request1(requestParams).then((res) => {//接口1 xxx resolve(res); }).catch(e =>{ reject(e) }) });转载 2021-02-02 11:03:07 · 10240 阅读 · 0 评论 -
vue中点击li列表,点击谁,谁变色,如何实现?
按钮样式比没写,根据自己的需求自己修改就行,示例代码如下,拿走即用:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>原创 2020-11-05 17:41:40 · 2929 阅读 · 2 评论 -
vue.js如何将字符串当做变量使用?
vue.js如何将字符串当做变量使用?前言:最近做管理端字典管理,需要用到函数三元运算返回,return后的值是字典接口里面返回拼接的,但我发现return函数中不能直接使用拼接后的字符串,于是就查了一下,得到可以使用eval()函数;eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。使用步骤如下:下面展示一些 内联代码片。// A code blockvar foo = 'bar';text(){ //这个是拼接后得到的字符串 this.str = "text原创 2020-10-26 11:15:19 · 5469 阅读 · 1 评论 -
vue表格实现固定表头和首列
前言前段时间做移动端的项目,项目中需要一个固定表头和首列的表格,但由于是移动端的,组件库里没有类似的,于是,就去网上找看有没有类似的,结果越找越气,10个文章9个抄,抄也行,你倒是抄个能用的啊,一篇根本就不能用的文章,你们抄个什么劲?有意义???没办法,只有自己写一个了。效果图实现思路1、首先分为四部分,左上角固定不动的表头,表头部分,首列部分,表格主体部分2、整个表格添加定位position: relative;左上角表头添加position: fixed;3、给白色主体部分添加滚动监听事原创 2020-07-08 15:26:38 · 8338 阅读 · 9 评论 -
vue全局过滤器的使用
1、在src目录下创建 filters.js2、filters.js文件代码如下:const goodFlls = value => (value) => { // 商品状态过滤,value值就是需要过滤的值 if (value == "1") { return "待发货"; } if (value == "2") { return "已发货"; } if (value == "3") { return "待收货"; }}export { goodFll原创 2020-06-11 18:10:20 · 1008 阅读 · 3 评论 -
vue怎么让子元素横向内容过多,产生滚动条
vue子元素过多,产生横向滚动条1. 步骤:完整代码如下<template> <div> <div class="box"> <div v-for="(item,i) in 4" :key="item"></div> </div> </div></template><style scoped lang="scss"> .box{ width:375原创 2020-06-09 21:59:17 · 2256 阅读 · 4 评论