![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
不会么么哒
如果你觉得好用,求个收藏
展开
-
vue中伪类元素 根据数据改变颜色
【代码】vue中伪类元素 根据数据改变颜色。原创 2023-07-21 13:56:49 · 268 阅读 · 0 评论 -
table中的select,共用数组,其中一个选中A另一个不显示A
table中的select,共用数组,其中一个选中A另一个不显示A原创 2022-08-25 17:28:06 · 251 阅读 · 0 评论 -
vue3.0 vite-config配置
vue3.0 跨域配置原创 2022-08-18 16:22:17 · 3293 阅读 · 0 评论 -
js判断一个字符串是否是数字
functionisNumber(val) {varregPos = /^\d+(\.\d+)?$/;//非负浮点数varregNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/;//负浮点数if(regPos.test(val) || regNeg.test(val)) {returntrue;...转载 2021-11-15 16:07:35 · 387 阅读 · 0 评论 -
el-input输入中文替换成空
<el-inputname="username"type="text"id="username"value=""onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"></el-input>原创 2021-11-12 10:16:37 · 857 阅读 · 0 评论 -
vue列设置 多选框加上拖拽效果
<template> <div> <div class="container"> <div class="handle-box"> <div class="condition"> <span class="textfont">创建日期范围:</span> <el-date-picker v-model="form.value2" type="daterange" align=".原创 2021-10-14 10:31:00 · 1088 阅读 · 1 评论 -
vue 子页面调用父页面方法,同步改变父页面data的值
父页面正常写一个方法通过provide 把方法爆露出来方法:methods: { updateTitle(data){ console.log(data + '111111') this.chenname=data; }, }爆露出来:export default { provide(){ return{ updateTitle:this.updateTitle原创 2021-10-11 17:12:41 · 1189 阅读 · 0 评论 -
transform标签配合keepalive使用时,画面重叠
<div class="content"> <transition name="fade-transform" mode="out-in"> <keep-alive :include="tagsList"> <router-view v-if="$route.meta.keepAlive && isRouterAlive">.原创 2021-07-01 15:03:52 · 426 阅读 · 0 评论 -
vue+element 制作页签
https://bhuh12.github.io/vue-router-tab/zh/guide/essentials/#%E8%B7%AF%E7%94%B1%E9%85%8D%E7%BD%AE原创 2021-06-29 16:12:05 · 298 阅读 · 0 评论 -
i18n input验证信息rules不改变
有两种方式可以解决表单验证更新问题第一种:通过computed属性以基础表单为例,代码如下:<template> <div> <el-form :model="form" :rules="rules" ref="form"> <el-form-item :label="$t('form.Name')" prop="name"> <el-input v-model=...原创 2021-06-21 17:19:29 · 406 阅读 · 0 评论 -
vue 数据不带响应式导致数据不能渲染
this.$set(原值, '对象名', 对象值)原创 2021-06-21 13:18:04 · 330 阅读 · 0 评论 -
前端实现雪花效果,粒子特效
<template> <div id="main"> <canvas id="canvas" ref="canvas" style="z-index: 100;position: fixed;top: 0;width: 100%;height: 90%;"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas> </div></template&...原创 2021-06-11 17:50:18 · 545 阅读 · 0 评论 -
element多个表单,对单个表单进行验证
this.$refs[formName].validateField('mobile', valid => { console.log(valid) if(!valid) { if (!this.timer) { this.count = TIME_COUNT this.show = false this.timer = setInterval(() =...原创 2021-06-11 15:35:49 · 342 阅读 · 0 评论 -
前端滑块验证码
npm i -S zx-verify新建文件 vabVerify.jsimport VabVerify from 'zx-verify'import 'zx-verify/dist/zx-verify.css'export default VabVerify页面模板<template> <div class="verify-container"> <vab-verify ref="slideDiv" ...原创 2021-06-11 11:02:30 · 697 阅读 · 0 评论 -
element table 加上了input输入框计算值,总计不发生变化
input的值输入后,写下面的方法this.tableData.push({});this.tableData.pop();原创 2021-05-24 16:10:08 · 844 阅读 · 0 评论 -
vue+element 动态添加一项下拉框
1.开发中有个实习生有一个需求,写了个demo记录下来了,东西不难,遇到同样的没头绪可以看看<template> <div style="margin: 48px;"> <el-table :data="list"> <el-table-column label="偏远地区加价" min-width="300"> <template #default="..原创 2021-05-17 14:22:44 · 1850 阅读 · 2 评论 -
对象中的几个值转成数组,对象的名字为一项
如图 转化成数组Object.keys(obj).map(v=>({name:v,value:obj[v]}))把obj 替换成你的对象 就变成了了原创 2021-04-27 15:48:08 · 185 阅读 · 0 评论 -
ele 多选框实现三级联动权限管理
<template> <el-form label-width="200px"> <el-button @click="aa">点击我打印结果</el-button> <el-form-item v-for="v1 in list" :key="v1.id" style="border-top: 1px solid red;padding-left: 24px;"> <el-c.原创 2021-04-01 15:14:06 · 263 阅读 · 0 评论 -
table里面套一个table,双重数组,并且对内部数组进行单元格合并
1.主数组为tabledata2.因为是双重数组,内部数组单元格合并,3.:span-method="data => spanMethod(scope.row.purchase, data)"这样写4.methods: {//判断当前值与上一个值对比,相同合并 spanMethod(data,name ){ console.log(name,data) if(name.columnIndex ...原创 2021-03-25 17:32:51 · 622 阅读 · 0 评论 -
数组中提取两个值组成新数组
letarrnew=this.multipleSelection.map((item,index)=>{returnObject.assign({},{'carton_id':item.carton_id,"logistics":item.wuliudanhao})})原创 2021-03-11 18:04:38 · 1002 阅读 · 0 评论 -
2021-03-11element合并单元格
数据格式[ { "carton_id": "10020711", "carton_name": "100207-1", "carton_sort": "0", "created_at": "0", "id": "1", "is_deleted": "0", "logistics": null, "order_id": "1002071", "state原创 2021-03-11 17:37:38 · 146 阅读 · 0 评论 -
判断数组中某个字段的值是不是空
if(this.multipleSelection.some((val)=>val.wuliudanhao==='')){this.$message.error('没有输入物流单号,不能发货');}else{}every,some遍历数组,every只要有一项不满足条件都返回false ...原创 2021-03-11 12:15:40 · 919 阅读 · 0 评论 -
基于element的多层级穿梭框
点击进入原创 2021-02-07 15:27:25 · 1435 阅读 · 0 评论 -
监听页面宽度,执行操作
//定义screenWidthdata() { return { screenWidth: document.body.clientWidth, }; },//打开监听mounted() { const that = this window.addEventListener("resize", function() { return(() => { window.screenWidth = document.body.clientWidth.原创 2021-02-06 18:06:16 · 266 阅读 · 0 评论 -
前端加水印
水印原创 2021-01-15 16:41:24 · 145 阅读 · 0 评论 -
在线敲代码工具
网站是这个在线敲代码特别是vue原创 2021-01-13 15:11:36 · 616 阅读 · 0 评论 -
对象中取出部分值组成新的对象,数组中某属性取出拼接成一个值并用逗号分隔
方法:const filterObj = (obj, arr) => arr.reduce(((t, i) => (t[i] = obj[i], t)), {});var newObj = filterObj(就对象,对象名数组)原创 2020-10-23 14:34:38 · 3275 阅读 · 1 评论 -
判断数组中某一个值是否为false,全部为true时执行,否则不执行
mounted(){ this.ticketArr=[ { name:'大师傅', isshow:false }, { name:'的风格', isshow:false } ] if(this.ticketArr.findIndex(target=>target.isshow===true)==-1){ console.log('验证通过') }else { console.log('.原创 2020-10-21 10:02:05 · 7395 阅读 · 1 评论 -
vue +element 实现倒计时,以及倒计时结束时启动计时器计时,最后用的vant 组件
<!--<template> <el-col :span="10" class="getCode"> <el-button :disabled="isDisabled" :class="isDisabled?'lightBrown opacity':'deepBrown'" @click="getCode.原创 2020-10-09 10:52:31 · 4400 阅读 · 0 评论 -
vue +element 数字键盘,vant 数字键盘使用
下载vant 不在赘述 可以看官网min.js 写入import 'vant/lib/index.css';import { NumberKeyboard } from 'vant';Vue.use(NumberKeyboard);下面是页面<template> <div > <van-number-keyboard :show="show" extra-key="." @input="onInput" @d...原创 2020-09-29 11:18:04 · 2260 阅读 · 0 评论 -
vue中 使用element-ui 图标和阿里字体图标结合使用
vue中 使用element-ui 图标和阿里字体图标结合使用1 登录阿里字体图标官网2 图标管理 --> 我的项目 --> 创建一个项目3 开始搜有想要的图标添加到我的项目中4 下载到本地5 解压,拷贝到src/asserts/icon下.├── demo.css├── demo_fontclass.html├── demo_symbol.html├── demo_unicode.html├── iconfont.css├── iconfon.转载 2020-09-24 12:03:43 · 767 阅读 · 0 评论 -
element全屏事件
handleFullScreen() { let element = document.documentElement; if (this.fullscreen) { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitCancelFull..原创 2020-09-23 16:32:46 · 329 阅读 · 0 评论 -
扫码枪实现input不能失去焦点,放在移动端不能弹出软键盘demo
用的vue+element框架<template> <div class="login-wrap"> <h2 class="dlone">登录</h2> <div class="iconcard"> <i class="el-icon-bank-card"></i> <p>{{logining}}</p> </div> <el-input type原创 2020-09-23 15:27:43 · 1290 阅读 · 0 评论 -
input 输入框默认获得焦点
JavaScript实现默认焦点:如下写<body>标签:<body onload="window.formLogin.user.focus()"> <form name="formLogin" action="" method=""> <input type="text" name="user" value=""/> <input type="password" name="password" v...原创 2020-09-21 15:39:35 · 1923 阅读 · 0 评论 -
element 时间选择器,控制只能选定特定时间数组
<el-date-picker v-model="value1" type="date" value-format="yyyy-MM-dd" :picker-options="pickerOptions" placeholder="选择日期" @change="bbbb"> </el-date-picker>aaaa: ['2020-09-11', '2020-09-15'], /*pickerOptions:...原创 2020-09-10 13:33:07 · 581 阅读 · 1 评论 -
数组中提出某个对象组成新数组 map
var arr = [ { 'id': '1', 'name': 'img1', 'imgUrl': './img1.jpg', }, { 'id': '2', 'name: 'img2', 'imgUrl': './img2.jpg', }, { 'id': '3', 'name': 'img3', 'imgUrl': './img3.jpg', }];arr.map(x => {return x.i...原创 2020-09-09 17:05:05 · 1881 阅读 · 0 评论 -
element 表格属性,其中一个字段为数组时
用 element formatter方法表格内<el-table-column prop="gname" label="角色" :formatter="gName"> </el-table-column>/*格式化数据*/ gName(row,column){ var gNamelist = [] for(var i = 0; i < row.role.lengt...原创 2020-09-08 17:40:53 · 2333 阅读 · 0 评论 -
this.$router.打开新页面
有些时候需要在单击事件或者在函数中实现页面跳转,新窗口打开router:path: '/user_details/:financialInstitutionId1在单击事件触发的方法里const {href} = this.$router.resolve({ path: `/user_details/${userId}` }); window.open(href, '_blank');...原创 2020-07-17 14:09:05 · 2649 阅读 · 0 评论 -
url 链接左边的小图标更改
需求:url 链接左边的小图标更改实现:1 cli3构建项目配置(0)ico文件位置:(1)index.html文件:(2)vue.config.js:2 cli2构建项目配置(0)文件放在根目录下(1)index.html文件中引入(2)开发环境,线上环境配置参数线上环境:webpack.prod.conf.js开发环境:webpack.dev.conf.js注意:图标大小为48*48,太大了不显示————————————————版权声明:本文为转载 2020-05-29 10:00:24 · 470 阅读 · 0 评论 -
vue+element 完美实现短信验证码
<template><el-form ref="loginForm" :model="loginForm" status-icon :rules="rules" class="login-form"> <el-form-item label="" prop="code" class="pr"> <el-input prop="code" v-model="loginForm.code" placeholder="验证码"></el-in...原创 2020-05-28 18:10:17 · 2804 阅读 · 0 评论