- 博客(59)
- 资源 (3)
- 收藏
- 关注
原创 自己封装类似tabs标签切换组件
1、element里面有tabs标签切换组件,但是产品每次设计页面的时候嫌弃样式不好看,所以自己封装了个组件。3、可以在main.js全局引用,也可以在自己要使用的页面引用。2、可以在自己项目公共文件夹下面新建页面。
2023-01-14 16:49:21 360
原创 当前时间往后推至5天或15天怎么计算
1、首先utils下面新建一个js : formatTime.js,写入一些公共方法,在页面使用哪个方法就引入哪个方法。2、页面中先获取当日时间,根据自己得需要定义变量,例如 nowfiveTime 等。最近项目中遇到了用当前时间计算5天 15天时间。
2022-10-14 11:06:41 2015
原创 el-date-picker 时间控件 重新选择时间没有更新值
最近项目中遇到选择时间控件不能重新赋值得问题,最后解决办法就是加上一个时间清空。这样子就解决了重新选择没有更新值问题。
2022-10-11 14:07:20 1088 2
原创 有趣的网站
7.#在线文档DevDocs。3.#可视化正则表达式。9.#好看的背景渐变色。1.#全自动去除背景。5.#在线绘制流程图。6.#海量CDN资源。4.#美化你的代码。10.#插图也很美。
2022-08-01 11:41:45 78
原创 img加载图片失败展示占位图的onerror事件
项目开发经常会遇到图片加载失败,要求在图片加载失败时,显示默认占位图片,经常是图片字段为空或null显示占位图,第一次遇到这样的。这样就解决了一部分加载不出来的图片。目前是可以满足两个标签。......
2022-07-19 14:56:46 2527
原创 使用el-upload封装得组件怎么清空已上传附件
最近项目中一处附件上传,点击取消得时候要清空列表。因为本身附件上传组件已有删除,而这个取消按钮是不调用接口得。但是用组件属性就是会报错,因此就让他局部刷新一下:
2022-06-15 09:44:28 845
原创 uni-app---uni.navigateTo跳转传参使用
uni-app有自己语法。我们使用的时候传参,传字符串或对象,字符串传参数:可以拼接地址 goreportdetails(id) { uni.navigateTo({ url: '/pages/reportdetails/reportdetails?id=' + id + '&name=edit' }) },对象传参数:有些时候参数会丢失,所以借助encodeURIComponentuni.navigateTo({ url: '/pages/
2022-05-26 14:03:38 1715
原创 数据存在store里一刷新数据丢失解决方法
前几天做移动端,需要设置按钮权限,所以需要storea保存数据,但是问题是一刷新页面数据丢失了,查阅了办法就是在app.vue里面加几行代码,本人测试了下果然好用: created () { // 在页面加载时读取sessionStorage if (sessionStorage.getItem('store')) { this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessi
2022-05-20 13:48:29 972
原创 element-- el-tree 组件封装使用( 新增、编辑、删除节点)
项目中会遇到需要树来展示数据的,要求每个节点需要增删改的,具体需要的根据自己实际项目需求可进行代码修改如图:el-tree组件封装:<template> <div class="white-body-view"> <el-tree id="my-tree" ref="tree" class="tree-view structure-tree scroll-bar" :data="
2022-05-11 15:20:07 8014 9
原创 el-date-picker--默认显示时间
<el-form-item label="开始时间" required> <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" v-model="queryParmas.startTime" ...
2022-05-06 11:50:54 2156
原创 el-dialog-----弹出层拖拽、双击全屏
弹出框要求添加拖拽和双击头部全屏1、创建jsimport Vue from 'vue'// v-dialogDrag: 弹窗拖拽属性 (重点!!! 给模态框添加这个属性模态框就能拖拽了)Vue.directive('dialogDrag', { //属性名称dialogDrag,前面加v- 使用 bind(el, binding, vnode, oldVnode) { //弹框可拉伸最小宽高 let minWidth = 400 let minHeight = 3
2022-04-26 10:27:51 629
原创 vue-tree-chart简单的使用
项目中需要动态展示组织结构,这里只是展示简单的实现,如果需要更复杂的就需要去深入去实现。插件安装:npm i vue-tree-chart --save组件内容:vart.vue<template> <table v-if="treeData.name"> <tr> <td :colspan="Array.isArray(treeData.children) ? treeData.children.length * 2
2022-04-25 14:00:06 4865
原创 vue--纯前端预览pdf、word文件
项目中需要对已上传得附件根据后台传回得url地址进行文件内容得预览读取并渲染。文件类型为pdf或word2种类型1、word类型–.doc/.docx安装插件:npm i [email protected] npm i jszip 2、pdf类型npm install --save vue-pdf 3、页面中使用:<template> <div class="essential"> <div class="cont-ess">
2022-03-31 15:07:32 3818 3
原创 js 数组去重
项目中经常会遇到要数组去重,我们采取得方法就是循环再循环得防范,现在可以不用循环采取简单得方法:定义一个数组:let a=[1, 2, 3, 4, 1, 6, 7, 1, 2, 8];数组去重,Set方法得到一个对象b;let b = new Set(a);使用Array.from() 方法将类数组对象转化为数组mlet m = Array.from(b)...
2022-03-31 09:21:12 48
原创 element-----el-calendar 使用自定义内容标记
项目中需求是展示讲师课程时间:代码部分:根据后台返回去对比判断:当status=1.就是有课,2是就是没课程<template> <el-calendar id="calendar" v-model="value"> <template slot="dateCell" slot-scope="{ date, data }"> <!-- 获取日历日期全展示年月日 data.day.split("-") .slice(1).join("-"
2022-03-24 11:52:48 1033
原创 table表格动态展示另一种方式
用原生table去实现,尤其跨行跨列得时候,循环会非常让人抓狂,之前写过一篇简单得循环,这次可以不循环用嵌套来写。当然也可以用element的表格组件去写都可以实现: <div class="title"> <table> <tr> <th></th> <th width="140">岗位标准胜任力得
2022-03-22 15:03:39 595
原创 el-menu--多级菜单封装使用
代码只做简单记录,细节需要去调试1、组件:menuItem.vue<template> <div> <template v-for="(item, index) in data"> <!-- 因为有子集和无子集渲染html标签不一样,所以要分为两种情况 情况一:有子集的情况: --> <el-submenu :key="index" :index
2022-03-16 11:15:08 2670
原创 Vue component动态组件
动态组件:多个组件使用同一个挂载,并动态切换,使用is特性 :is="" <div class="content"> <Component :is="tabList && tabList[active] && tabList[active].component"></Component> </div>is绑定组件的是组件name属性值,也可以绑定一个组件的构造器选项对象。<script&g
2022-03-02 10:02:34 328
原创 js--math对象属性
math对象不需要使用new来创建,可以直接使用。Math对象不需要使用new来创建,可以直接使用。Math.PI 获取圆周率Math.abs() 取某个数的绝对值Math.ceil() 向上取整Math.floor() 向下取整Math.round() 四舍五入取整Math.max() 取一组数字的最大值Math.min() 取一组数字的最小值Math.pow(x,y) 取x的y次幂Math.random() 取随机数 范围0~1 >=0 <
2022-03-01 10:39:40 194
原创 js基础知识及冒泡排序
一、数组中的方法(api):1、toString() 将数组中的元素转为字符串,按逗号分隔2、join(‘-‘) 将数组中的元素转为字符串,指定分隔符。3、concat(arr1,arr2…) 拼接两个或者更多个数组4、silce(start,end) 截取数组中的元素,start开始的下标,end结尾的下标,不 包含end本身,如果负数表示倒数5、splice(start,count,value1,…) 删除数组中的元素,start开始的下标,co
2022-03-01 10:35:13 65
原创 element---在el-table中el-switch用法
项目中操作此数据:<el-table-column prop="custom" label="是否展示" align="center"> <template slot-scope="scope"> <el-switch v-model="scope.row.custom" active-value="1" inactive-value=
2022-02-15 16:08:17 5505 3
原创 element---el-input只能输入正整数,不带其他特殊标点或符号
项目中经常会遇到输入框输入数字的情况,输入正整数不特殊符号的: <el-input v-model.trim="form.code" style="width:60%" maxlength="6" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请填写短信验证码"></el-input>通过正则来限制输入只能是数字,一些特殊符号不能输入,例如:.*value.replace后面的可以去替换正则
2022-02-15 13:45:19 2856 1
原创 什么时候用methods,computed,created,watch
所有事件处理函数和根据自定义的函数,都放在methods中;所有需要计算才能显示的属性,都放在computed中;希望vue对象加载后自动执行的操作,放在created中;希望实时监控一个变量的变化时,都放在watch中...
2022-02-08 10:32:53 185
原创 vue 关闭弹框重新打开时element输入框验证规则还在提示
1、表单中输入经常使用验证,但是每次提交后关闭弹框。再打开弹框验证还在作用,这个时候我们可以这样处理:2、我们可以使用这2种方法处理:①:在关闭弹框的地方: this.$refs.form.clearValidate();this.$refs.form这个form必须是和图片上的名称一致;这种方法适合全部②:如果是单个的可以使用:this.$refs.form.validateField('unitName')如果这样报错的话,可以试一试这样写,不会报错:this.KaTeX p
2022-01-21 16:49:12 3153 1
原创 vue--获取手机短信验证码
1、初始化秒: return { //初始值 show: 'false', count: '', }2、页面中:<el-form-item prop="code" label="短信验证码"> <el-input v-model.trim="form.code" style="width:60%" maxlength="6" oninput="value=value.replace(/[
2022-01-20 15:59:44 1859 1
原创 vue-@media媒体查询使用
1、vue需要安装sass-loader和node-sass2个插件来使用①安装sass:npm install sass-loader --save-dev②安装node:npm install -g cnpm --registry=https://registry.npm.taobao.org2、直接在每个页面中使用我这里是:样式写的适配小于750px和大于750px是什么样的大家可以根据需要去使用...
2022-01-17 11:36:13 2756
原创 安装 node-sass报错
可以试一试这个方法安装:npm install -g cnpm --registry=https://registry.npm.taobao.org
2022-01-10 15:08:05 194
原创 vue 手机号中间四位隐藏
punliceFilters:{ mobileFilter(val){ let reg = /^(.{3}).*(.{4})$/ return val.replace(reg,'$1****$2') } },页面使用:{{formLabelAlign.username | mobileFilter}}在这里插入代码片这里最好判断一下是否有值,不然会报错的...
2021-12-17 11:09:41 899
原创 el-popover 切换不同的图片和内容
<template> <div class="weTel"> <div class="cents"> <div @mouseenter="getTelop('top1')" :class="top_type===0?'top hand isp': 'topAvtive isp hand'"> <img v-if="top_type" :src="require('@/assets/images/lian1.png')
2021-12-16 10:11:27 924
原创 vue 奇偶数动态判断展示不同内容
设计图这样:那么内容是后台传入,所以需要判断不同位置;奇数行:index%2 != 1偶数行:index%2 != 0
2021-12-09 10:01:27 1707
原创 vue 父子路由跳转 (默认选中主路由)
最近项目遇到路由,父子路由跳转默认选中路由。每次一看到路由就懵逼主页面:导航的菜单是循环路由得出来的,因此点击跳转子页面是这样的导航菜单代码: <el-menu router :default-active="defaultActive" mode="horizontal" active-text-color="rgba(68, 100, 255, 1)"> <template v-for="(item,val) in data" >
2021-12-08 15:24:44 1477
原创 css 左右布局分布
今天一个左右布局的页面写了我半天,用组件也好、flex也好,实现的都不是我想要的,然后问同事给写了一个也不是我想要的,设计图这样,其实左右有背景图的用css实现: <div class="product-type"> <div class="proleft"> <img style="height:710px" :src="require('@/assets/images/pro5.png')" alt="">
2021-12-07 14:38:34 1282
原创 vue 点击动态展示不同的图片
代码部分:可以用三目运算根据状态判断 <div class="svt-s mainSty-center"> <div class="svs hand" v-for="(item,val) in data" :key="val" @click="select(val)"> <img :src="item.status ? item.icons1 : item.icons" alt=""> <div class.
2021-12-06 14:13:08 859
原创 vant 图片上传处理压缩
不是最好的代码和方法,先记录一下在改进一下:<template> <div style="margin: 10px 0px 0px 0px"> <van-uploader :deletable="false" :show-upload="true" upload-text="请选择上传" :accept="accept" :max-size="20 * 1024 * 1024" :after-
2021-11-22 09:44:44 592
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人