- 博客(31)
- 收藏
- 关注
RSS订阅原创 Element-ui下拉框多选样式——宽高自适应
Element-ui下拉框多选样式——宽高自适应高度自适应宽度自适应高度自适应在element-ui的文档中可以看到，多选时，高度自适应是默认就有的展示方式，select组件不需要设置额外属性，如下图显示：<el-select class="select" v-model="value" multiple placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :la
2022-09-27 16:05:46
3987
1
原创 vue列表无缝循环滚动
vue PC端列表循环滚动功能介绍：大致需求：整体思路：具体实现：完整代码：功能介绍：在PC端网页，包括大数据、官网、后台管理平台开发中，可能会用到这种列表循环滚动的展示。大致需求：列表可以使用数组循环遍历；每隔几秒中列表数据向上滚动一定距离，展示下一条数据；滚动到最后一条数据时重新显示第一条开始的数据（类似走马灯、banner图的循环效果）；整体思路：使用两个定时器嵌套实现；需要两个相同容器存放同样内容，实现无缝衔接效果；具体实现：完整代码：............
2022-05-26 11:25:39
2522
原创 Layui模板-laytpl
Layui模板-laytpl参考地址：示例：参考地址：Layui官方文档地址；laytpl在线调试地址；示例：// 第一步：创建视图标签，用于渲染模板内容<ul class="demo-ul" id="ulBox"></ul>// 第二步：编写模版，模板内容存放在script标签内<script id="ulBoxJs" type="text/html"> {{# layui.each(d, function (index, item) { }}
2022-05-20 16:40:56
2224
原创 vue+vant列表-复制可用
vue+vant列表-复制可用vant完整代码vantvant官网完整代码<template> <div> <!-- 外壳标签 --> <div class="page-body c-list-body"> <!-- 下拉刷新组件 --> <van-pull-refresh v-model="refreshLoading" @refresh="onRefres
2022-05-18 14:22:10
1309
原创 css总结（持续更新）
css总结（持续更新）一、总是记不住，每次用每次查的样式css显示省略号css阴影css边框滚动条样式二、一些有效技巧选择器:nth-child一、总是记不住，每次用每次查的样式css显示省略号单行文本省略： overflow: hidden; white-space: nowrap; text-overflow: ellipsis;多行文本省略： display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-
2022-05-13 22:59:44
242
原创 crypto-js-加密-html版-复制可用
crypto-js-加密-html版导入cdn加密js使用导入cdn<!-- 加密 --><script src="https://cdn.bootcss.com/crypto-js/3.1.9-1/crypto-js.min.js"></script>加密js// 十六位十六进制数作为密钥const key = CryptoJS.enc.Utf8.parse("1234567890hijklm");// 十六位十六进制数作为密钥偏移量const iv
2022-05-09 09:38:49
1403
原创 JavaScript数组数据处理
JavaScript数组数据处理原数组排序取值获取最大值或最小值创建新数组原数组const arr = [ { name: 'red', data: 3, value: 'S' }, { name: 'blue', data: 15, value: 'D' }, { name: 'yellow', data: 5, value: 'C' }, { name: 'pink', data: 10, value: 'N' }, { name: 'black', data: 12, value: 'A
2022-04-13 17:09:12
908
原创 AngularJS初学者日记-踩坑日记
AngularJS初学者日记1.ngOnInit()出现问题：问题原因：解决方法：知识点：第一次接触angular项目，此文档为摸索学习过程中的记录文档，所有内容均不保证正确，不要随便相信，如有更优解，请在评论中给出，多谢。有时间将不断更新。Mon 11Mon 18Mon 25踩坑第1天 踩坑第2天 踩坑第3天 踩坑第4天 踩坑第5天 踩坑第6天 踩坑第7天
2022-04-11 17:11:39
1504
原创 百度地图中心点偏移-Javascript
百度地图中心点偏移-Javascript功能介绍：整体思路：具体实现：一、变更代码执行顺序：二、map.panBy：功能介绍：本文记录了百度地图BMap实现中，出现中心点偏移问题解决方法，基于点聚合功能出现的问题。地图正常显示效果：地图实际显示效果：整体思路：原代码：注意：这里为了实现效果使用了原生js的代码直接控制display改变，实际应用中可能是jQuery的hide()、show()，vue中的v-if控制切换地图显隐。<body> <div id="map"
2022-04-11 13:18:56
2633
原创 百度地图点聚合-Javascript-复制可用
百度地图点聚合-复制可用功能介绍：整体思路：遇到问题：具体实现：一、cdn引用：二、使用：三、自定义标记点图标：功能介绍：本文记录了百度地图BMap实现点聚合效果。如下图实例：地图缩小时聚合效果：地图放大后显示效果：整体思路：使用html和JavaScript语言实现；使用百度地图cdn实现；遇到问题：之前大多是使用百度地图vue版本的，好几年没用过这种写法了，查看百度地图api都是 JavaScript API GL，实例对象名称为new BMapGL，不符合我的要求，有知道的小
2022-04-06 14:00:20
3990
原创 Element-ui组件踩坑记录
Element-ui组件踩坑记录-继续踩坑继续记录1.组件交互页面抖动：出现问题：解决方法：2.组件属性：出现问题：问题原因：解决方法：3.组件样式修改：出现问题：问题原因：解决方法：4.select下拉框：出现问题：问题原因：解决方法：1.组件交互页面抖动：出现问题：组件操作时，页面会出现抖动情况，文字会模糊；解决方法：1）Checkbox 多选框切换：.el-checkbox__inner::after { transition: none!important;}2）表单验证信息出
2022-02-26 14:14:01
794
原创 Element Select 选择器自定义样式在多选时出现样式错乱解决
Element Select 选择器自定义样式在多选时出现样式错乱解决问题描述开发解决方法问题描述在使用el-select组件时，需求提出的要求：1、select可以随便设置高度（不受size属性制约）；2、允许select多选显示tag并使高度自适应；开发设置select高度样式，注意，这里使用的是scss修改样式：<div class="elSelectBox"> <el-select v-model="valMult" multiple
2022-02-26 11:17:22
4168
11
原创 vue父子组件生命周期
vue父子组件生命周期具体情况解决方案：生命周期执行顺序验证：加载渲染过程执行顺序父组件子组件控制台打印数据数据更新过程执行顺序父组件子组件控制台打印数据页面销毁过程执行顺序父组件子组件控制台打印数据具体情况这是小伙伴在项目开发的时候遇到的问题：通过路由传参的数据，在父组件和子组件的mounted中都进行打印，父组件打印出了数据，子组件打印却是空，这种情况是生命周期执行顺序导致的，所以在这篇文章中记录一下。解决方案：在子组件中使用watch监听，即可获取到路由传过来的数据。生命周期执行顺序验证：
2022-02-24 15:20:29
891
原创 wangeditor富文本引用、表格使用问题
wangeditor富文本组件问题问题介绍：具体情况：解决方案：css修改说明：问题介绍：本文记录了wangeditor开发中遇到的一个问题，之前在使用wangeditor的时候因为时间紧张没有过多研究，后续项目测试，测出来发现编辑器中添加的表格和引用，在展示时和编辑器里显示的样式不一样，这里记录一下解决思路。具体情况：在编辑器中显示效果：编辑器在控制台中显示效果：可以看到该引用功能是有样式的，标签名为"blockquote"。打印出当前编辑器的内容：可以看到只有标签名没有标签样式，所以
2022-02-18 11:11:46
2729
1
原创 wangeditor富文本组件-复制可用
wangeditor富文本组件功能介绍：整体思路：具体实现：一、安装：二、引入并使用：功能介绍：本文记录了wangeditor最基本的用法，其他更多用法可去官网查找。整体思路：Typescript 开发的 Web 富文本编辑器， 轻量、简洁、易用、开源免费（摘自官网）。具体实现：一、安装：npm i wangeditor --save二、引入并使用：<template> <div> <div ref="richText" style="height:
2021-12-28 09:45:45
651
原创 vue移动端文件预览
vue移动端文件预览前言：整体思路：具体实现：一、外壳（vViews.vue）：二、文件预览：1.图片预览：2.pdf文件预览：3.docx文件预览：4.excel表格预览（xls、xlsx格式表格）：5.txt文件预览：三、补充外壳文件css样式：前言：最近遇到一个移动端需求，要求在移动端预览上传的附件，在网上找了很多资料，最后参考CSDN博主「蛋蛋fighting哈湫」的原创文章实现了功能，并结合自己的项目情况，整理了这份文档。原文链接：https://blog.csdn.net/u0124396
2021-12-10 16:13:22
8237
13
原创 vue filters过滤器与字典项
vue filters过滤器与字典项功能介绍：大致需求：具体实现：一、过滤器js文件：二、引入并使用：功能介绍：在项目开发中，会遇到后台返回值为数字、字母等格式数据，具体显示则需根据字典项处理。可使用自定义过滤器，进行文本格式化。大致需求：使用公共js文件，调用减少代码量；考虑不同字典项key值对应不同，增加传参处理；具体实现：一、过滤器js文件：可存储在utils文件夹下。export default { filters: { /** * da
2021-12-06 15:27:17
1830
原创 vue移动端拖拽悬浮按钮
vue移动端拖拽悬浮按钮功能介绍：大致需求：整体思路：简单效果展示：具体实现：一、position:fixed布局：二、touch事件绑定：三、页面引入：功能介绍：在移动端开发中，实现悬浮按钮在侧边显示，为不遮挡页面内容，允许手指拖拽换位。大致需求：按钮在页面侧边悬浮显示；手指长按按钮，按钮改变样式，允许拖拽改变位置；按钮移动结束，手指松开，计算距离左右两侧距离并自动移动至侧边显示；移动至侧边后，按钮根据具体左右两次位置判断改变现实样式；整体思路：按钮实行position:fixed
2021-12-03 14:00:26
7628
4
原创 vue+vant文件上传组件
vue+vant文件上传组件功能介绍：大致功能介绍：整体思路：简单效果展示：功能介绍：大致功能介绍：整体思路：简单效果展示：
2021-08-04 08:44:25
4027
3
原创 在vue中使用echarts
vue+echarts自定义组件功能介绍：具体实现：一、安装echarts依赖：二、全局引入：三、自定义组件：四、增加宽高自适应：五、全局引用：六、使用：功能介绍：在vue开发中，希望实现eharts图表展示，节省init初始化、resize自适应代码。具体实现：一、安装echarts依赖：npm install echarts -S或者使用淘宝的镜像npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm inst
2021-08-02 14:45:31
213
原创 vue移动端touch拖拽排序
vue移动端touch拖拽排序功能介绍：大致需求：整体思路：简单效果展示：具体实现：一、display:flex+v-for布局：二、touch事件绑定：三、卡片移动：四、获取手指所在位置：五、操作数组（删除或插入元素）：六、手指离开屏幕：功能介绍：在移动端开发中，希望实现类似支付宝应用管理页面的可拖拽排序交互。大致需求：卡片按照一定顺序排序，超出横向范围换行显示；手指长按卡片，可进行拖拽控制，卡片追随手指移动；卡片移动到相应位置，该位置上的卡片向后或向前更换位置，当前位置空出；松开手指，卡
2021-03-15 20:18:02
1508
9
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人