- 博客(17)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 vue 实现手风琴折叠面板
这里代码是用的uni-app的，都一样！<view class="leaderboard_cont_list" v-for="(item, index) in list" :key="index" @click="clickListShow(item,index)"> <view class="leaderboard_cont_list_for"> <view class="leaderboard_cont_list_left"> {{item.name}
2022-05-31 09:29:04
804
原创 输入框只可输入正数和小数(保留两位)
js输入框只可输入正数和小数(保留两位)<input type="number" step="0.01" min="0" onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''">
2021-11-08 16:14:12
148
原创 vue路由第二次进入页面created和mounted不执行
因为路由中created和mounted默认会进行缓存的，除非在router.js中配置：keepAlive: false；这样是把这个页面的路由缓存给关闭了；true为开启，false为关闭；meta: { keepAlive: false},还有一种办法就是使用activated钩子就可以了1、将要处理的方法，放在activated函数中总结1、router-view路由跳转使用keep-alive方式2、created和mounted只执行一次3、使用activated钩子，每
2021-10-26 15:14:03
3326
原创 vue 实现进度条效果
这里实现进度条用到了es6语法的模版字符串，通过更改css样式实现正常显示进度的进度条和一种显示剩余余额的进度条：html代码不需要改变：<div class="scheduleCont_1_left_1" :class="10 >= 100 ? 'nobg' : ''"> //10为展示的进度，100为总的进度数量 <div :style="{ width: `${(10 / 100).toFixed(2) * 100}%` }" class="un_xg_1_3
2021-10-18 14:43:06
4269
3
原创 vue 动态表单 点击增加添加输入框，删除根据下标删除
效果图：基础数据为一个数组，点击添加后判断之前数据中是否有空，有空不可以添加，没空值则向数组中添加一个新得对象：html：<div class="rechargeSetCont"> <div v-for="(item,index) in addParamList" :key="index" style="margin-bottom: .3rem"> <div> <div class="recharg
2021-09-18 10:49:26
1330
原创 es6 判断数组中是否有相同值
定义个数组let array= [1,2,3,3,4,4,5];根据es6 new Set方法去重后的长度和原本数组的长度对比，长度不一样则代表有相同值；if(new Set(array).size !== array.length){ alert(存在相同的元素);}感谢
2021-09-17 16:10:48
2797
原创 vue 无插件实现点击复制！
使用浏览器本身的复制方法：document.execCommand("Copy"); // 执行浏览器复制命令直接按钮中点击事件传值即可：<el-button size="mini" @click="copy(parentData.inviteCode)">复制</el-button>script中方法： /** * 复制 * @param data {string} 要复制的值 */ copy(data){ let u
2021-09-06 14:44:15
129
原创 vue中使用vue-baberrage生成弹幕
~~vue-baberrage这个插件本身有好多属性使用后不生效，不知道是不是自己使用的问题 T_T安装弹幕插件；npm install vue-baberrage --save创建vue组件，在组件中引用vue-baberrage； import Vue from 'vue'; import { vueBaberrage, MESSAGE_TYPE } from 'vue-baberrage'; Vue.use(vueBaberrage);html部分；其中有几个属性设置后不生效
2021-09-03 09:53:38
3226
4
原创 vue Cli ElementUi封装Table表格加分页组件，使用render渲染函数提升组件复用性
Vue cli二次封装Element Ui的Table表格加分页组件，使用render渲染函数提升组件复用性；因为项目每个页面都需要Table表格和分页，所以就想着把表格和分页封装成组件，废话少说直接上干货：Table组件内容：新建commonTable.vue文件(直接全部复制，组件引用自己去看全局引用组件)：<template> <div> <el-table :data="tableData" size="medium" fit
2021-06-09 17:01:24
900
原创 vue v-for循环数据点击父元素，里面得子元素样式改变
vue v-for循环数据点击父div，里面得子元素样式改变：html：<div class="timeRoomFloorCont" v-for="(item,index) in dormitory" :key="index" @click="clickDormitory(item,index)" :class="{timeRoomFloorCont1:classi===index}"> <div class="timeRoomFloorContTop">
2021-03-26 11:23:47
826
转载 基于VUE的后台管理系统
一、vue-element-admingithub地址: https://github.com/PanJiaChen/vue-element-admin文档地址：https://panjiachen.gitee.io/vue-element-admin-site/zh/预览地址：https://panjiachen.gitee.io/vue-element-admin/#/login?redirect=%2Fi18n%2Findex二、vue-admingithub地址: https://g
2020-12-18 17:23:37
6436
1
原创 vue 上传图片进行压缩图片
afterRead(file){ if(this.fileList.length > 1){ this.fileList.splice(1); this.$msg({ text:'只能选择这么多!', type:'info' }) return false;
2020-09-25 10:30:53
1989
原创 vue v-for循环多个标签，点击标签变色，再点击取消，可以同时多选点击多个
vue v-for循环多个标签，点击标签变色，再点击取消，可以同时多选点击多个效果：html：<div class="relFacilityTitcon"> <i v-for="(item,index) in facilityList" :key="index" @click="changeSpan(index);" :class="{'bgcolor':spanIndex.indexOf(index)>-1}" >{{item}}</i><
2020-08-12 18:43:45
3263
1
原创 vue elementUi在表单中修改数据，表格的数据也跟着修改的问题
在表单中修改数据，表格的数据也跟着修改的问题最近遇到一个问题，在表单中修改数据，表格的数据也跟着修改，且不管是不是按确定或取消按钮，表格的数据还是被修改了，部分代码如下：editUser(row) { this.operateType = 'edit' this.isShow = true this.dialog.operateForm = row},刚开始还以为是table...
2020-04-14 10:17:36
7705
12
原创 Vue实现导出Escel表格
有一个项目需求，要求在前端项目中导出Excel表格，经过查找代码,Vue.js确实可以实现，具体实现步骤为：安装依赖//npm npm install -S file-saver xlsxnpm install -D script-loader或者//yarnyarn add file-saveryarn add xlsxyarn add script-loader --d...
2019-11-21 16:05:05
172
jQuery全屏滚动插件fullPage.js演示.zip
2020-04-14
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人