VUE+ElmentUI
关注
分享
扫一扫
禾小毅
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
vue2 实现 tagcanvas 抽奖名单 “球体旋转动画” 的组件封装和调用
希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~在public下的index.html 中引入 tagcanvas.min.js。原创 2025-01-08 15:42:21 · 457 阅读 · 0 评论 -
vue2 实现 canvas-confetti 的 “撒花动效” 以及组件的封装和调用
希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~原创 2025-01-08 15:03:47 · 287 阅读 · 0 评论 -
【vue】 实现 自定义 Calendar 日历
{{ date.split('年')[0]+'-'+date.split('年')[1].replace('月','')}}原创 2023-11-14 10:32:22 · 1929 阅读 · 0 评论 -
vue实现【简洁版软键盘】的封装以及调用
一、创建组件Keyboard.vue原创 2022-02-24 17:00:52 · 5810 阅读 · 13 评论 -
vue 实现 word/excel/pdf 等文件格式预览操作
/docx、excel、pdf文档预览组件，vue-office插件，其中docx文档预览是通过对docx-preview插件的二次封装，docx-preview插件不支持doc格式文件；docx文档预览是对exceljs插件的二次封装。希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~有文件大小限制，超过要收费！原创 2023-07-12 14:52:30 · 14493 阅读 · 20 评论 -
vue实现纯css直播点赞图标的动画效果组件
希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~轻映录屏 2023-02-23 17-23-41。原创 2023-02-23 17:33:17 · 1703 阅读 · 2 评论 -
【vue2】中 谷歌 Chrome 实现自定义页眉页脚打印
学号：${subjectItem.BaseInfo.ExamNo}【${subjectItem.BaseInfo.Subject}】原创 2023-02-15 17:04:57 · 5923 阅读 · 23 评论 -
iconfont 中图标以及字体库在页面中的引用
希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~B、将设计里的图标或者iconfont里的图标，以 svg 的格式，并且不同的命名，添加或上传到该项目里。font-family: 自定义名字。A、根据项目不同创建不同的项目。4、在需要的页面中调用。原创 2022-10-20 14:54:11 · 1292 阅读 · 0 评论 -
vue 实现 word、ppt、excel、图片、PDF、视频、音频等格式的文件下载，以及uniapp中文件包（文件流）的下载处理
希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~2、页面调用，client 中相关的属性需要自己去配置。1、安装 ali-oss。3、哪里需要哪里调用。原创 2022-09-07 15:51:49 · 6126 阅读 · 0 评论 -
vue 插件vue-awesome-swiper实现 三张图片，左右两边显示一半的效果的示例
希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~原创 2022-07-26 11:05:51 · 2913 阅读 · 0 评论 -
vue 实现阿里云 “录播/直播Aliplayer” 插件的封装以及调用
查具体属性文档： https://help.aliyun.com/document_detail/125572.html?spm=a2c4g.11186623.6.1179.131d10e43Evs78二、创建组件文件 Aliplayer.vue三、页面调用 希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~...原创 2022-07-01 10:07:11 · 4032 阅读 · 7 评论 -
vue 实现 “七选五” 类型试题的筛选删除功能
一、 需求：七个答案中选择五个与之对应。二、实现思路：1、将相关的布局写好2、当前选中一个答案后，就将答案赋值给每个 userAnswer ，同时将当前选中的答案移除 “ letterList ” 选项列表中，使其没有重复选项。3、点击每项后的删除按钮，就将当前值添加回letterList ” 选项列表中三、实现的代码如下：<template> <div class="topic_bottom"> <div class="gapB...原创 2022-04-28 11:25:57 · 271 阅读 · 0 评论 -
vue 中 elmentui下 el-tabs组件的 before-leave 切换拦截的使用
需求：1、判断当前试题是否做过，做过才可切换至下一题，反之加提示2、按题序往下做，已做过的题可切换查看历史记录，反之加提示一、参考el-tabs参数before-leave 方法进行拦截校验二、创建view页面此处question数组试题列表数据省略......<el-tabs v-model="qidValue" :before-leave="beforeLeave"> <el-tab-pane v-for="(quest,queIndex) o...原创 2022-04-26 12:00:02 · 5931 阅读 · 1 评论 -
vue下elmentui中 el-popconfirm 气泡确认框
问题描述：点击el-popconfirm 气泡确认框时，同时会影响外层div的@click事件的弹出解决方法：为el-popconfirm标签里层的el-button标签加上 @click.stop="" 事件即可<div v-for="(chi,chiIndex) in me.children" :key="chiIndex" @click="toDetail(chi,me.type)"> <div>标题</div> <el-popc....原创 2022-04-25 09:34:37 · 7249 阅读 · 1 评论 -
vue利用【v-viewer插件】实现单张图片以及多张图片的（触屏缩放和拖动）
1、安装 v-viewer 插件npm install v-viewer --save2、main.js全局引入import Vue from 'vue';import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'Vue.use(Viewer)Viewer.setDefaults({ Options: { 'inline': true, 'button': true, 'navbar': true, 'ti...原创 2022-01-13 16:35:06 · 2501 阅读 · 0 评论 -
vue 实现图片或者文件的【缩放、拖动】功能组件
1、安装插件 hammerjsnpm install -save hammerjs2、添加zoom.js，写入一下代码import Hammer from 'hammerjs'// 引用hammerjs// 定义缩放方法，接收一个element参数：使用export暴露该方法export function zoomElement (el) { var x = 0// x轴偏移 var y = 0// y轴偏移 var lastScale = 1// 上次缩放值 var原创 2022-01-11 14:28:10 · 1534 阅读 · 0 评论 -
vue中实现（el-table）表格中，【echarts柱状图】的封装和调用
1、创建 BarEcharts.vue 组件<template> <div> <div id="bar"></div> </div></template><script>import * as echarts from 'echarts'export default { props: { markList: { type: A...原创 2021-12-31 12:41:16 · 2458 阅读 · 0 评论 -
vue 实现【监听键盘按下事件】校验以下 “ 自定义键盘数字 ”，并且（按顺序按下键盘改变样式），否则给出提示
思路：将页面对应的键盘用v-for渲染出来，其中数组中有包含 某个键盘对应的 keyCode 值例如：回车 => 13；监听键盘事件；判断按下的键盘keyCode值是否与数组中的codeId相等，并且找到当前选中的那个值的codeId一、渲染要校验的键盘字符<template> <div class="equip_key"> <div class="equip_key_item" v-for="(k,kIndex) in list" :k...原创 2021-12-23 16:58:48 · 1323 阅读 · 0 评论 -
vue怎么实现模块化【单选切换】改变样式的功能
index.vue<template> <div class="learn_item" v-for="(task, taIndex) of taskDetailList" :key="taIndex"> <div class="l_item" @click="currentClick(taIndex)"> <div class="item_point" :class="taIndex!==0?'':'hidden'"> ...原创 2021-12-14 17:56:42 · 1370 阅读 · 0 评论 -
vue 实现【自定义模态弹窗】 组件
以上截图，红色边框部分，表示 “文字、图标或者图片” 是可更改部分一、创建弹窗组件 quitDialog.vue 组件<template> <transition-group name='fade'> <!-- 退出弹窗 --> <div class="quit_dialog" key="1" @click="isQuit = false" v-if="isQuit" ...原创 2021-12-13 15:01:04 · 2792 阅读 · 11 评论 -
vue怎么实现 【水波纹进度条】 组件封装，以及动画样式的效果
一组数据中，多个水波纹进度条的情况，自然要将相同的部分，封装成组件一、创建组件 WaterRipple.vue<template> <div class="water_progress" :style="'top:'+size.top+';left:'+size.left+';'"> <div id="num">{{numTxt}}</div> <div class="water"> ..原创 2021-12-13 10:11:11 · 2559 阅读 · 0 评论 -
vue中实现 【 Video视频进度条不能拖动，且能倍速播放 】，用vue-video-player插件，封装成组件的方法步骤
一、安装vue-video-player 插件npm install vue-video-player -S二、引入1、全局引入，main.jsimport VideoPlayer from 'vue-video-player'import 'vue-video-player/src/custom-theme.css'import 'video.js/dist/video-js.css'Vue.use(VideoPlayer)2、局部引入import { vide...原创 2021-12-07 11:07:49 · 16744 阅读 · 3 评论 -
vue中框架下elmentui的（el-tabs）标签怎么实现 【自定义图片切换】 和样式的切换
根据原型体，选一个最接近的UI组件 el-tabshtml：思路：通过el-tabs默认选中页签（v-model的值）与（切换列表循环的下标）进行判断，为true 表示当前选中项，就添加选中的图片，为false 添加默认的图片 <template> <div> <div class="know_content"> <el-tabs :tab-position="tabPosition" v-mod...原创 2021-11-12 15:10:11 · 5409 阅读 · 3 评论 -
（audio音频）播放组件的封装，使其【页面加载时主动播放】，同时点击也会播放
组件文件 audioPlay.vue<template> <div> <div class="entask_audio" :style="{color:isPlay ? '#03BA82' : '#999'}" @click="play()" > <div class="flex_x" v-html="phoneticSymbols"></div> &l...原创 2021-11-04 17:07:36 · 561 阅读 · 0 评论 -
vue中，实现 “文字” 超过设置的宽度后自动【走马灯向左滚动】，的（marquee）组件封装
创建组件文件marquee.vue<template> <div class="scrollText" ref="outer"> <div class="st-inner" :class="{'st-scrolling': needToScroll}"> <span class="st-section" ref="inner">{{text}}</span> &l...原创 2021-10-29 16:10:10 · 3793 阅读 · 0 评论 -
做试题中，实现答案选择后的 【 答题 “连对” 组件 】的封装以及页面中引用
需求：用户选择后，连续4道题答对，就出现一个great样式和音效思路：1、组件中没有点击事件，需要watch去监听传递过来的值，并且去赋值等相关操作2、在页面中引入组件，并判断 正确答案===用户答案，就初始化一个变量correctNum，判断为true时，correctNum++，为false时，correctNum=0创建组件文件 evenForCount.vue<template> <!-- 连对组件 --> <div clas...原创 2021-10-29 11:48:35 · 310 阅读 · 0 评论 -
做试题中，实现答案选择后的 “连对” 效果。 默认样式先隐藏，当满足 “4连对” 、“6连对” 的条件时，显示连对效果后再定时隐藏。
分析：一组试题中，根据选择的答案与正确答案做对比，判断是否正确，然后初始化一个变量名来存储正确的个数，最后根据正确的个数展示对应的连对样式连对html（4连对，6连对，8连对，10连对）<!-- 连对 --><div class="even_for"> <div class="even_item"> <img class="even4" src="@/assets/home/ok4.png" alt="" /> <...原创 2021-10-26 16:28:42 · 107 阅读 · 0 评论 -
vue如何实现从00:00:00:00开始【正计时】，以及再次进入显示之前的历史时间（即返回需要保留数据），并继续计时
html<span id="txt">{{txt}}</span><input @click="start()" type="button" value="开始计时"><input @click="stop()" type="button" value="结束计时"> jsdata () { return { timer: null, count: 0, clickStart: 0, txt: '...原创 2021-10-08 16:05:43 · 1223 阅读 · 0 评论 -
vue+swiper,【vue-awesome-swiper插件】实现页面“试题”内容左右滑动的切换；获取插件的activeIndex下标值 / realIndex；点击跳转到对应的index页面
1、安装vue-awesome-swipernpm install swiper vue-awesome-swiper --save2、引入（1）全局在main.js中引入import VueAwesomeSwiper from 'vue-awesome-swiper'import 'swiper/css/swiper.css'Vue.use(VueAwesomeSwiper)（2）局部引入import { Swiper, SwiperSlide } from 'v...原创 2021-09-23 18:32:32 · 3382 阅读 · 5 评论 -
vue怎么通过 （ “鼠标点击” 或者 “触屏” ），实现图片和内容【拖拽、缩放】
安装插件 vue-zoomernpm install --save vue-zoomer全局main.js引入注册import Vue from 'vue'import VueZoomer from 'vue-zoomer'Vue.use(VueZoomer)页面调用// 单图<v-zoomer style="width: 500px; height: 500px; border: solid 1px silver;"> <img src=".原创 2021-09-08 14:04:44 · 731 阅读 · 0 评论 -
Vue【搭建项目】，前端开始做项目前的准备工作流程
一、创建vue项目1.安装Node.js 官网下载，直接安装，安装完可查看node -v测试是否安装正确。npm包管理器，是集成在node中的，直接输入 npm -v 查看版本信息node下载地址：http://nodejs.cn/download/cmd -> node -v 和 npm -v2.安装vue-cli脚手架npm install -g vue-cli提示：如果执行npm install -g vue-cli时报错，执行以下某一条语句清理缓存...原创 2021-08-03 12:10:16 · 1145 阅读 · 0 评论 -
vue中（el-menu）怎么通过【自定义图片】代替原有图标，并切换成另一种颜色的图片？
html：js：在watch中加上事件监听：watch:{$route:{handler(val,oldval){this.activeId=val.path.replace('/task','/')//当前活动路由},//深度观察监听deep:true}}希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的...原创 2021-07-28 08:47:45 · 4028 阅读 · 0 评论 -
vue中怎么将（el-dialog）对话框改成【自定义弹窗】样式，2种方式
将以上弹窗组件，改成下面自定义样式的效果当加入自定义内容时，发现el-dialog存在背景色以及head部内容和关闭按钮，找到el-dialog的背景元素，并修改如下：/deep/.el-dialog{ // 取消阴影和背景色background:rgba(0,0,0,0);-webkit-box-shadow:01px3pxrgba(0,0,0,0);box-shadow:01px3pxrgba(0,0,...原创 2021-07-26 17:58:57 · 4713 阅读 · 0 评论 -
vue中（el-table）组件怎么通过js【自定义头部以及内容样式】，滚动条滚动功能，显示高亮行等......
html：js：//列表第一行样式cellStyle({row,column,rowIndex,columnIndex}){if(rowIndex===0){//指定坐标rowIndex：行，columnIndex：列return'background:#334356;color:#FFDE2B' // 除了表头第一行的文字，背景颜色}elseif(rowIndex<=3){ret...原创 2021-07-27 10:01:42 · 671 阅读 · 0 评论 -
vue使用（el-table）组件中 “ 父节点和子节点 ” 相关数据的【图标怎么自定义】？
问题是：当我在table中加入 “子集图标” 时，发现父节点也是存在图标的， 要求是只在子节点前加 “子集图标”，因此要将父节点的图标隐藏，el-table组件，一般都是先找到相关的元素才能修改，父节点的class名是expanded，因此在以下这个样式里面修改/deep/.el-table__row.expanded{ // 父节点行样式名.know_icon{display:none!important; // 隐藏子集图标}}延申一下：如果想要...原创 2021-07-23 11:14:59 · 686 阅读 · 0 评论 -
当（点击input）输入框时，平板出现键盘区域将页面中背景图片挤上去导致【背景图变形】的解决方法
以上图示是平板真机调试，当点击input时，背景图被挤上去的问题，原本是想着，获取到平板真机的键盘，然后加上浮动或者绝对定位，可是怎么获取呢？，最后发现行不通。原本我是在样式里面加入背景图将整个屏幕撑满，改进是==>将图片放在html标签中引入，再通过自动获取到屏幕的宽高便可。这样可以啦，效果如下：希望我的愚见能够帮助你哦~，若有不对的地方，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~...原创 2021-07-23 10:42:53 · 858 阅读 · 0 评论 -
【Popover 弹出框】在vue中，ElmentUI下Popover 弹出框组件 “ 自定义样式修改不了 ” 的解决方法
通过 /deep/ 深层查找并不能找到相关的元素，查找原因发现此组件的样式是全局样式，如果你style中加了scoped，如<stylelang="scss"scoped>，是在局部，限制了/deep/ 的查找，解决方法如下：...原创 2021-07-23 09:56:30 · 1956 阅读 · 1 评论