- 博客(13)
- 收藏
- 关注
RSS订阅原创 增加vue项目水印
1.下载依赖npm install watermark-dom2.在app.vue中使用引入：import watermark from 'watermark-dom'methods设置参数loadWatermark(str) {watermark.load({watermark_txt: str || " ",watermark_x_space: 100, //水印x轴间隔watermark_y_space: 100, //水印y轴间隔watermark_width:
2022-04-06 11:07:20
1386
原创 解决vue2热部署失败
随着项目越来越大，每次编辑一些公共组件或者方法保存后热部署到94%左右就会崩掉，必须重新启动项目，特别麻烦，后面百度了很多方法终于解决，记录一下在node_modules\.bin\webpack-dev-server.cmd这个文件里面把"%_prog%" "%dp0%\..\webpack-dev-server\bin\webpack-dev-server.js" %*改成"%_prog%" --max-old-space-size=4096 "%dp0%\..\webpack-dev-server
2022-03-25 10:29:47
2034
原创 拷贝对象键值到另一个对象
Object.keys(this.formData).forEach(key=>{this.formData[key]=data[key]||this.formData[key]}) //复制data中与this.formData相同的键的值，如果键值为对象，则复制的为对象地址this.formData1=Object.assign({},data) //复制data中属性到this.formData1this.formData1=Object.assign({},this.for
2021-08-13 09:48:12
497
原创 vue移动端横屏手写签名
最近项目组要求做一个移动端手写签名的组件，效果图如下去查了很多资料，也借鉴了很多别人写好的例子，最终完成，记录一下因为需要横屏签名，所以有监听手机屏幕，如果是手机屏幕锁定的情况下就通过代码旋转页面div实现横屏效果，如果手机屏幕自己旋转了，那就直接正常显示项目签名的canvas是在sign-canvas组件的基础上修改的https://github.com/richerdyoung/vue-sign-canvas，同时横屏显示借鉴了关于移动端页面强制竖屏https://www.cnblogs
2021-07-30 17:32:46
5426
2
原创 vant实现select多选效果
背景：移动端需要和pc端select多选相对应，但是并没有现成的组件，vant只提供了picker选择器可以实现单选效果，所以需要自己封装组件方法：把cell单元格和checkbox复选框结合，实现多选效果代码(js代码根据需要去写就可以啦) <van-popup v-model="showPicker" :value="true" @close="closePopup" position="bottom" :style="{
2021-07-26 18:10:32
5076
原创 el-table设置多行显示省略号
show-overflow-tooltip自带属性是超出一行显示省略号，如果不满足要求需要自己修改的话可以借助插槽和el-tooltip去实现 <el-table-column width :label="$t('用户角色')" prop="roleNameList"> <template slot-scope="{row}"> <el-tooltip effect="dark" :content="row.ro
2021-07-23 16:25:01
2623
3
原创 粘性定位的使用
背景：项目中需要把按钮固定在可视区域，所以采取粘性定位，如果内容较少就在内容底部，当内容过多按钮固定在屏幕下方，居中显示之前想过用固定定位但是发现数据少的时候按钮在下面很怪，而且当我父盒子宽度改变时按钮并不会变化，原本的居中就歪了，后面发现粘性定位加盒子可以完美解决问题方法：封装了一个粘性定位组件，是一个盒子，里面可以放需要定位的按钮或者文字，然后给盒子粘性定位，这样的好处是盒子宽度直接100%，内容设置居中，不管父元素宽度怎么变化都不影响组件（组件是公司大佬写好的）：<templa
2021-07-14 18:31:42
1581
原创 页面拖拽更改左右宽度
效果图代码部分<div class="box" ref="box"> <div class="left pd20" ref="left1"> <div style="height:100%"> <el-input v-model="search.roleName" placeholder="搜索角色" clearable .
2021-07-12 21:35:18
833
1
原创 el-tree全选，父子联动，展开折叠，以及多选和默认选中
html部分 <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')" >展开/折叠</el-checkbox > <el-checkbox v-model="menuNodeAll" @ch
2021-07-12 21:20:58
3493
2
原创 $refs获取子组件获取不到
问题：在弹框打开的时候用$refs.child.getList()调用子组件方法报错分析：打印发现弹框打开的时候打印this.$refs可以获取到所有的子组件，但是打印$refs.child是undefind,后面发现是组件刚打开的时候子组件渲染还未完毕，所以获取不到解决方法：添加一个$nextTick异步更新就可以啦...
2021-06-30 11:19:36
2390
1
原创 element组织树总结
页面效果主要代码 <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" class="trees" defau
2021-06-29 19:06:51
495
原创 vue-treeselect问题总结
1.做下拉框组织树，本来打算自己封装组件，但是发现自己封装的组件会有各种问题，就去搜了下组件，然后找到了这个功能比较完善的下拉框组织树，官网链接：https://www.vue-treeselect.cn/#node2.组织树最终效果：3.组织树代码下载npm install --save @riophae/vue-treeselect导入import Treeselect from '@riophae/vue-treeselect'import '@riophae..
2021-06-29 09:55:42
2812
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人