自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(59)
  • 资源 (3)
  • 收藏
  • 关注

原创 uniapp打包成Android时,使用uni.chooseLocation在App端显示的地址列表是空白的解决办法

请查阅这位博主分享:

2023-12-26 11:25:23 576

原创 vue3 如何引入静态资源图片

vue3如何引入静态资源

2023-06-01 17:38:00 4953

原创 Lodash工具库

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

2023-04-17 11:18:58 348 1

原创 自己封装类似tabs标签切换组件

1、element里面有tabs标签切换组件,但是产品每次设计页面的时候嫌弃样式不好看,所以自己封装了个组件。3、可以在main.js全局引用,也可以在自己要使用的页面引用。2、可以在自己项目公共文件夹下面新建页面。

2023-01-14 16:49:21 375

原创 当前时间往后推至5天或15天怎么计算

1、首先utils下面新建一个js : formatTime.js,写入一些公共方法,在页面使用哪个方法就引入哪个方法。2、页面中先获取当日时间,根据自己得需要定义变量,例如 nowfiveTime 等。最近项目中遇到了用当前时间计算5天 15天时间。

2022-10-14 11:06:41 2095

原创 js 年月日时间转换

时间控件默认当前时间也可以使用这个方法。

2022-10-11 14:09:53 1702

原创 el-date-picker 时间控件 重新选择时间没有更新值

最近项目中遇到选择时间控件不能重新赋值得问题,最后解决办法就是加上一个时间清空。这样子就解决了重新选择没有更新值问题。

2022-10-11 14:07:20 1131 2

原创 有趣的网站

7.#在线文档DevDocs。3.#可视化正则表达式。9.#好看的背景渐变色。1.#全自动去除背景。5.#在线绘制流程图。6.#海量CDN资源。4.#美化你的代码。10.#插图也很美。

2022-08-01 11:41:45 82

原创 使用 vue2-org-tree 封装新增、编辑、删除节点 组织结构组件

vue2-org-tree

2022-07-27 09:52:03 3795 8

原创 img加载图片失败展示占位图的onerror事件

项目开发经常会遇到图片加载失败,要求在图片加载失败时,显示默认占位图片,经常是图片字段为空或null显示占位图,第一次遇到这样的。这样就解决了一部分加载不出来的图片。目前是可以满足两个标签。......

2022-07-19 14:56:46 2600

原创 使用el-upload封装得组件怎么清空已上传附件

最近项目中一处附件上传,点击取消得时候要清空列表。因为本身附件上传组件已有删除,而这个取消按钮是不调用接口得。但是用组件属性就是会报错,因此就让他局部刷新一下:

2022-06-15 09:44:28 862

原创 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 1756

原创 数据存在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 1014

原创 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 8123 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 2222

原创 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 646

原创 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 4958 1

原创 vue--纯前端预览pdf、word文件

项目中需要对已上传得附件根据后台传回得url地址进行文件内容得预览读取并渲染。文件类型为pdf或word2种类型1、word类型–.doc/.docx安装插件:npm i docx-preview@0.1.4 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 3848 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 54

原创 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 1072

原创 table表格动态展示另一种方式

用原生table去实现,尤其跨行跨列得时候,循环会非常让人抓狂,之前写过一篇简单得循环,这次可以不循环用嵌套来写。当然也可以用element的表格组件去写都可以实现: <div class="title"> <table> <tr> <th></th> <th width="140">岗位标准胜任力得

2022-03-22 15:03:39 604

原创 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 2704

原创 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 339

原创 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 202

原创 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 74

原创 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 5621 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 2971 1

原创 什么时候用methods,computed,created,watch

所有事件处理函数和根据自定义的函数,都放在methods中;所有需要计算才能显示的属性,都放在computed中;希望vue对象加载后自动执行的操作,放在created中;希望实时监控一个变量的变化时,都放在watch中...

2022-02-08 10:32:53 189

原创 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 3267 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 1876 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 2837

原创 安装 node-sass报错

可以试一试这个方法安装:npm install -g cnpm --registry=https://registry.npm.taobao.org

2022-01-10 15:08:05 199

原创 vue 手机号中间四位隐藏

punliceFilters:{ mobileFilter(val){ let reg = /^(.{3}).*(.{4})$/ return val.replace(reg,'$1****$2') } },页面使用:{{formLabelAlign.username | mobileFilter}}在这里插入代码片这里最好判断一下是否有值,不然会报错的...

2021-12-17 11:09:41 927

原创 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 939

原创 npm run build 打包报错为什么

打包报错很有可能你没有安装这个插件:script-ext-html-webpack-plugin

2021-12-13 16:31:34 565

原创 vue 奇偶数动态判断展示不同内容

设计图这样:那么内容是后台传入,所以需要判断不同位置;奇数行:index%2 != 1偶数行:index%2 != 0

2021-12-09 10:01:27 1752

原创 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 1518

原创 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 1299

原创 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 873

原创 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 600

qiankun 自己学习的组件练习

qiankun 学习

2022-06-07

vue+qiankun 父与子

vue+qiankun 仅供学习

2022-05-06

vue+element 主题背景颜色更换

vue+element 主题背景颜色更换demo

2022-05-06

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除