vue
文章平均质量分 83
silence_xiang
这个作者很懒,什么都没留下…
展开
-
Vue3-H5页面结合Vant实现搜索历史记录超过两行的Tag的展开与折叠
文章目录问题描述效果解决思路代码1.html代码Js代码问题描述一个场景,在搜索记录的时候,搜索记录作为一个tag列表,超过两行的时候要折叠,然后支持展开效果先看一下效果图,因为只是demo,没有做展开收起的图标切换解决思路1.可以使用容器宽度跟每一个tag的长度去比较,加起来超过一行的时候,行数+1的方法,但是这里是用了容器用了padding 拿不到容器的width值,计算会不准确2.使用offsetLeft,每行的第一个的offetLeft值都是一样的,所以用着这个来判断行数代码1原创 2022-03-18 22:19:18 · 2312 阅读 · 1 评论 -
Vue-pc端实现瀑布流组件(基于vue-waterfall2)
文章目录目标效果使用库实现1.安装vue-waterfall22.在main.js中全局使用3.创建组件3.在页面中引入组件目标效果目标是一个很常见的瀑布流效果,能力有限,借助了大佬造的轮子来实现了使用库实现更详细的请参考官方文档vue-waterfall2这篇文章还有其他vue组件的介绍(略过vue项目的构建)1.安装vue-waterfall2 yarn add vue-waterfall2@latest --save或 npm i vue-waterfall2@latest原创 2020-12-18 21:41:42 · 3429 阅读 · 6 评论 -
Vue-解决使用xlsx库导出elementUI表格出现数据重复的问题
文章目录问题描述解决方法1.先上代码2.解决思路问题描述参考文章我参考这篇文章,可以进行表格的导出,但是我发现,出现了element历史遗留的数据重复的问题出现了下图的情况解决方法1.先上代码将导出方法写成一个全局方法,可以多处使用//导出文件工具类import FileSaver from "file-saver";import XLSX from "xlsx";/** * * @param {String} id 表格id,类名为.class id为#id * @para原创 2020-10-06 16:52:30 · 2706 阅读 · 14 评论 -
Vue-elementui的输入框删除边框
文章目录问题描述解决方法1.页面代码2.样式代码3.实际效果问题描述在项目中我想要删除element输入框的边框,看了看网上的解决方案,用了什么!important给样式加优先级,也有使用样式穿透的,我这里使用样式穿透的方式.解决方法1.页面代码展示的表格 <el-form :model="form" label-width="120px" > <el-form-item label="在线押金/元:">原创 2020-10-05 10:51:10 · 8097 阅读 · 6 评论 -
Vue-使用ElementUI级联选择器懒加载省市县数据
文章目录问题描述解决方法问题描述官网的描述这里就不说了在data里面定义一个props作为全局组件,请求异步方法,再通过resolve()去更新组件但是我们在实际项目中,要请求后台的,调用的是我们在methods里面定义的方法解决方法methods中请求后台的方法//请求省数据 async getProvince(callback) { let res = await this.$api.getProvince(); if (res.data.code == 200原创 2020-10-05 10:07:26 · 2226 阅读 · 1 评论 -
Vue-vuex简单使用和解决页面刷新state值清空的问题
文章目录简单使用vuex1.建一个全局store文件2.引入main.js中3.在页面中使用-保存值4.在页面总使用-获取值解决页面刷新state值清空的问题1.监听onload方法2.在store中拿缓存做赋值操作简单使用vuex我对vuex刚刚入门,但是项目中要使用vuex保存全局状态,所以在这里记录一下简单使用1.建一个全局store文件文件目录如下里面的内容如下:为什么要用一个sessionStorage.getItem(‘state’) 获取数据而不是直接初始化呢?后面有讲原因//原创 2020-09-19 15:09:49 · 3923 阅读 · 0 评论 -
Vue-教你实现一个订单列表倒数30分钟的功能
文章目录来看一个demo简单结合后台的demo现在来看功能实现部分来看一个demo这是我通过百度大法找到的简单demo,晒出来给大家看看,一个倒数计时器的功能<html><head> <meta charset="UTF-8"> <title></title></head><body> <div id="countdown">还剩 30 分 00 秒</div>原创 2020-09-19 14:41:54 · 2166 阅读 · 0 评论 -
Vue-原理01-双向数据绑定原理
理解defineProperty //1,使用defineProperty进行绑定 let obj = { // name: '小小香' } //为属性值改变属性 let oldValue = 'hyx'; Object.defineProperty(obj, 'name', { // writable: true, configurable: true,原创 2020-09-03 18:59:40 · 120 阅读 · 0 评论 -
vue-解决项目打包index页面空白详情方案
问题描述使用npm run build打包项目之后,dist文件夹下的index.html页面出现空白的情况.排除写代码时路径不正确的情况解决方法:1.修改在项目目录下的config文件夹下的index.js找到build这一块,assetsPublicPath:’/‘更改为’./’**注意是多加了一个点 **2.去掉路由history模式默认是hash,如果非要使用histor...原创 2020-03-02 20:15:35 · 2392 阅读 · 0 评论