vue
晏紫苏_cc
应该说点什么的
展开
-
悬浮按钮,可拖动元素,并且具有惯性和边缘反弹效果
手机端实现悬浮按钮,可拖动元素,并且具有惯性和边缘反弹效果原创 2020-07-28 17:27:20 · 438 阅读 · 0 评论 -
vue $attrs、$listeners、inherit的用法
文章目录input事件与change事件的区别vue $attrs 和 $listeners 和 inheritAttrsinput事件与change事件的区别注: 每当元素的 value 改变,input 事件都会被触发。这与 change 事件不同。change 事件仅当 value 被提交时触发,如按回车键,从一个 options 列表中选择一个值等。vue $attrs 和 $listeners 和 inheritAttrslisteners:想要孙组件修改父组件的值:在子组件中绑定v−o原创 2020-07-13 15:58:40 · 283 阅读 · 0 评论 -
vue webpack动态的引入组件
vue项目中会创建很多公共的组件,使用这些组件时需要每个页面都需要引入一次,有时会是同一个组件多个页面都需要引入,就会觉得很繁琐,可以使用下面这段代码进行动态的引入当前目录下的所有vue文件,截取组件名称,统一注册后,就可以在任何一个也i按直接使用,从而不再需要import。也可以配置路径,获取任意路径的组件进行注册。/** * 借助webpack使用require.context()方法创建自己的(模块)上下文,从而实现自动动态require组件。 * 该方法需要三个参数:要搜索的文件夹目录、是原创 2020-05-25 13:19:56 · 1683 阅读 · 0 评论 -
查看vue版本号
正确查看vu版本号原创 2020-05-22 19:36:39 · 49442 阅读 · 8 评论 -
js 生成barcode条形码和qrcode二维码
1:生成条形码npm install jsbarcodenpm install qrcode<!-- 条形码区域 --> <div class="barcode center" > <img id="barcode"> <div class="barcode-text">1234567890</div...原创 2019-07-22 19:08:04 · 3971 阅读 · 0 评论 -
多行文本显示省略、解决vue build 打包不生效问题
多行文本显示隐藏<style>.text { text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient:vertical;}</style>遇到的问题:-webkit-box-...原创 2019-05-17 15:53:31 · 635 阅读 · 0 评论 -
vue build 之后页面 -webkit-line-clamp: 2; -webkit-box-orient: vertical;失效不起作用
找到./build/webpack.prod.config.js 文件 找到下面的这段代码 注释掉 重新打包即可// -webkit-line-clamp、-webkit-box-orient vue打包后不起作用 注释下面这段代码 new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSo...原创 2018-10-29 16:36:24 · 1365 阅读 · 0 评论 -
vue修改element-ui el-table的样式,如header的字体颜色、背景色和tr的字体颜色、背景色
<template> <el-table :data="tableData" :row-style="tableRowStyle" :header-cell-style="tableHeaderColor"> <el-table-column property="name" label="原创 2018-08-30 13:56:50 · 67965 阅读 · 11 评论 -
vscode 使用ESLint 自动检查,保存时自动格式化
1:全局安装eslint npm install -g eslint2: 打开vscode 点击 “文件”-----》“首选项”----》“设置”,在右侧“用户设置”里加入一下配置:{ //eslint 代码自动检查相关配置 "eslint.enable": true, "eslint.autoFixOnSave": true, "eslint...原创 2018-08-29 11:23:22 · 17281 阅读 · 0 评论 -
vue 实现全选,反选功能
一般需要用到全选和反选的示例比如:购物车,批量添加,批量删除等 //需要用到的变量itemList: [], // 商品列表totalPrice: 0, //商品总价格isCheckAll: false, //全选的checkbox是否选中isChecked: false, //某个checkbox是否选中checkedIdList: [], //选中的商品的id组合...原创 2018-06-28 14:56:10 · 1188 阅读 · 0 评论 -
vue实现图片上传
项目中用到的是上传头像,前端通过input[type="file"]来选择图片,给后端传递一个formData格式的数据,然后上传。代码如下:我写了个组件,参数如下:uploadType: 上传类型width: 图片显示的宽度height: 图片显示的高度imgUrl: 如果之前有图片,图片的路径地址getImgUrl: 在组件里上传成功之后,会得到图片路径的相关参数,该...原创 2018-06-28 14:00:52 · 45849 阅读 · 6 评论 -
vue实现word,pdf文件的导出
vue实现word或pdf文档导出的功能,我的项目是:后端返回一个文档流(下图),然后前端对文档流做处理进行下载,代码如下: import axios from 'axios'; axios.get(`url`, { //url: 接口地址 responseType: `arraybuffer` //一定要写 }) ....原创 2018-06-28 11:17:48 · 18626 阅读 · 1 评论 -
用vuex state实现headerNav组件的购物车数量实时更新(双向绑定)
加入购物车时,使用vuex state保存数据,及时更新header组件里购物车按钮的数量headerNav组件代码:<el-badge v-if="cartCount" :value="cartCount" :max="99"> <el-button class="cart-btn" round size="small">原创 2018-07-16 14:56:14 · 1758 阅读 · 0 评论 -
vue 使用axios,请求头headers 获取不到cookie问题
axios默认是不允许ajax请求头携带cookie,所以要手动配置允许才能通过请求头传递或获取cookie。代码如下:import axios from 'axios'axios.defaults.withCredentials = true; //让ajax携带cookie...原创 2018-06-08 11:56:43 · 36593 阅读 · 5 评论 -
vue vue-router路由参数可选,可传可不传
由于项目需求会遇到进入某个页面获取模默认信息,但有时需要传递一个id获取对应的信息,为了兼容同一个页面的路由的参数,可传可不传,可以针对路由做以下处理:{ path: '/index/:id?', //获取参数:this.$route.params.id name: 'index', component: Index} ...原创 2018-06-08 11:19:54 · 13492 阅读 · 0 评论 -
js实现两个日期的时间段,或距离当前时间的时间段,如:几秒前,几天前,几个月前
项目中需要显示在多久之前的更改记录,比如:3天前,2个月前。或者是工作的时间,比如:2010-06-01到2015-04-01是几年几个月。下面是time.js文件的代码:export default { //字符串日期转换成日期格式 stringToDate: function(dateStr, separator) { if (!separator) { ...原创 2018-06-13 17:27:45 · 2505 阅读 · 0 评论