- 博客(59)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 自己封装类似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
2525
原创 使用el-upload封装得组件怎么清空已上传附件
最近项目中一处附件上传，点击取消得时候要清空列表。因为本身附件上传组件已有删除，而这个取消按钮是不调用接口得。但是用组件属性就是会报错，因此就让他局部刷新一下：
2022-06-15 09:44:28
844
原创 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
1714
原创 数据存在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
971
原创 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
8012
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
4862
原创 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
3149
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
2752
原创 安装 node-sass报错
可以试一试这个方法安装：npm install -g cnpm --registry=https://registry.npm.taobao.org
2022-01-10 15:08:05
193
原创 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
1705
原创 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关注的人