- 博客(75)
- 收藏
- 关注
RSS订阅原创 vue + antd 动态增加表单并进行表单校验
<template> <a-modal v-model:visible="visible" :title="formData.id ? '编辑渠道' : '添加渠道'" :width="850" :mask-closable="false" :destroy-on-close="true" @ok="onSubmit" @cancel="onClose" > <a-form ref="formRef" :model="formData" :
2023-11-16 16:25:59
1492
原创 vue3+vite assets动态引入图片的几种方式，解决打包后图片路径错误不显示的问题
因为vite构建的vue3项目，无法使用require导入图片，需要处理。1.新建 utils/require.js 文件。
2023-05-31 17:16:41
8396
3
原创 Vue换肤主题
navbar导航sidebar / 整体背景// sidebar//这里需设置透明度 若设置入定颜色 一键换肤对 菜单栏部分不起作用:export {下篇文章对 一键换肤修改 tagsView 有做说明。
2023-05-11 14:23:20
1511
原创 Css中使用Vue的变量
var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。变量名大小写敏感，–header-color和–Header-Color是两个不同变量。应用场景:(Vue一键换肤 – 修改 tagsView 动态选中样式)声明css变量的时候，变量名前面要加两根连词线（–）。第二个参数不处理内部的逗号或空格，都视作参数的一部分。var()函数用于读取变量。
2023-05-11 11:17:25
3982
2
原创 Vue-弹层显示样式
定义一个数据记录当前鼠标经过分类的ID，使用计算属性得到当前的分类推荐商品数据。3.鼠标经过li 的时候 layer显示。2.写好之后 将样式隐藏。2.然后渲染左侧数据。
2023-05-09 11:59:33
1114
1
原创 VUE中使用element-china-area-data
数据示例：codeStr=‘110000,110100,110101’, codeArray=[110000,110100,110101]TextToCode[‘北京市’] [‘市辖区’] [‘朝阳区’].code输出110105。TextToCode[‘北京市’] [‘市辖区’].code输出110100,①regionData是省市区三级联动数据（不带“全部”选项）②CodeToText是个大对象，属性是区域码，属性值是汉字。③textToCode是个大对象，属性是汉字，属性值是区域码。
2023-04-22 11:51:50
2892
1
原创 H5水波纹动画 及加载样式countTo插件获取当前值的使用
由于 countTo 并没有 API 能够直接监听到它这个数字的变化 . 所以我们只能够手动去监听，利用 defineProperty 来进行数据的劫持。H5用到了Vant组件库 和countTo插件(数字跳动)
2023-04-05 14:49:15
327
原创 element Table 展开行功能 （单击行展开 且只展开一行，隐藏藏icon方式）/ 自定义表头（table表头加按钮）render渲染下 按钮禁用
/ 自定义表头 renderHeader(h , params) {type = "primary" style = "" size = "small" //加入点击事件--------- onClick = {() => this . ReadChange() } > 标记已读 < / el - button > < el - button。
2023-02-27 14:37:51
1199
原创 密码框限制xxs注入字符处理
/遍历数组 验证数组中的每一项是否存在于输入的字符串里。//方法可返回某个指定的字符串值在字符串中首次出现的位置。//xss攻击特殊字符过滤。"密码长度应为5-20位""请输入正确的格式密码"// 密码输入校验。//判断条件是否成立。
2023-01-18 15:07:54
775
原创 el-date-picker实现通过其他方式触发日期选择器
el-date-picker 目前只能通过点击input输入框触发日期选择器，项目中需要通过其他方式触发日期选择器同时把input输入框去掉，如点击按钮。图中隐藏了el-data-picker日期组件，手动添加样式展示时间栏选择的数据进行 +0 回显。点击时间时，让日期组件显示出来时存在一个问题 就是每次点击 需要点击两下才能完成年份的选择。给el-date-picker 一个类名，找到类名下的input手动触发focus。需求左右切换 可以快速找到年份，于是添加了element选择年份的日期组件。
2023-01-17 17:37:49
5550
原创 修改elementUi中的下拉框el-select样式问题
在项目中需要改变这个样式，由于多个地方都需要用到这个小组件，所以必然写在公共样式中，但是项目中并非所有el-select组件都需要改成一样的样式，所以需要在组件上加class名，然后把需要改正这种样式的组件加上这个class名，就能对应的改了。如果想给组件一个class改变上下部分的样式并不现实，只能单独给下半部分DOM节点一个class。如下图中两行代码，加上以后就可以给下部分DOM一个class名。控制台显示组中件上半部分的DOM和下半部分的DOM是分开的。此时就可以通过类名单独进行相关的样式操作了。
2023-01-09 17:52:14
1055
原创 Vue 时间栏日期选择
- arrow=“never” 不显示自带左右按钮。// chang事件两个参数，区分向左点击还是向右点击。3.自行加上一个左右的按钮样式，添加事件进行左右区分。用el-carousel 的轮播组件 将样式修改。上面会有个小bug，向左点击时时间会向右跳一下。//月份是从0月开始获取的，所以要+1;添加change事件 区分左右点击。2.取消该change事件。获取当前年 和 当前月。
2023-01-05 11:01:13
1331
原创 vue element 动态增加表单并进行表单验证
表单验证：需要注意的一点是：普通表单验证单项依靠的是prop…而动态生成的表单要用:prop书写的语法是:prop=“‘cloudAccounts.’ + index +’.objectDetails’”，cloudAccounts是v-for绑定的数组，index是索引，objectDetails是表单绑定的v-model的名称，然后用.把他们链接起来。所以总结起来的语法就是:prop=“‘v-for绑定的数组.’ + index + ‘.v-model绑定的变量’”还有一个需要注意就是v-for的写法
2022-12-07 13:36:13
880
原创 vue使用el-upload实现formData文件上传功能
在底部确认按钮点击的时候 使用fd.append(‘key’,value) 整合为formData 格式。最开始单个文件上传 没用到element el-upload 组件。//多文件上传 用到了el-upload组件。这是后端以文件流形式返回的结果。//这里只能实现单个文件上传。
2022-11-17 09:37:19
1060
原创 接口返回的是一个图片文件而不是url 前端如何显示？
请求后端接口 返回的时一张图片 如何在img中显示?preview里查看就是显示一张图片。以下是处理方法： （亲测有效）
2022-11-09 15:58:25
1958
转载 vue路由传参-如何使用encodeURI加密参数
这篇文章主要介绍了vue路由传参-如何使用encodeURI加密参数，具有很好的参考价值，希望对大家有所帮助。那么需要将参数转换为JSON字符串，在使用encodeURI加密，需要注意的是通过路由跳转的时候会自动解密一次，所以需要加两次密。我这边用到的是通过路由的path进行传参，感觉加密的话用path传比较好，同时也方便其它端在调用你页面时，获取参数。在路由切换时页面需要使用地址栏传参，但地址栏会暴露参数的值，然后想到了encodeURI加密参数。使用encodeURI加密参数。
2022-11-08 10:11:23
3228
原创 el-tooltip配合el-button禁用时显示提示
比如项目中有这样的一个需求，就是在某个页面上有一些按钮，这些按钮的状态不固定。所以总结下来就是：如果是禁用状态，当鼠标悬浮的时候，出现文字提示；饿了么ui中的el-tooltip组件具有开启和关闭的功能，但是如果我们直接把组件套在el-button外面，我们会发现，el-tooltip无法开启了，好像也被el-button的禁用，无法打开了。解决方案就是在el-button的外层，再加上一个div包裹起来，这样的话，类名el-tooltip就会加到div身上，就不会受到按钮禁用的影响了。
2022-10-12 16:21:37
4457
2
原创 el-tree 根据节点属性控制节点显隐
用render-content方法实现树节点的内容区的渲染，根据节点属性判断是否渲染内容区，若不显示，则删除该节点。根据canEdit 控制节点隐藏/显示。只有总公司canEdit 为true。
2022-09-21 16:20:02
4180
原创 vue项目刷新当前页面的推荐方式
通过location.reload()或是this.$router.go(0)两种强制刷新方式，相当于按F5，会出现瞬间白屏，体验差，不推荐。推荐方式：定义一个空白路由页面，路由跳转到该空白页后立马跳回当前页，实现路由刷新。因为vue-router判断如果路由没有变化，是不会刷新页面获取数据的。在vue项目中，经常会遇到需要刷新当前页面的需求。这种方式，基本上能够应付绝大多数情况，推荐使用。1.在router路由表中定义一个空白路由，方式1：go(0)和reload()3.在需要刷新的页面使用。
2022-09-07 18:03:28
1173
原创 JavaScript 提取数组的属性名 组成新的数组
需求：对象数组中每个对象包含很多属性，批量操作只需要要用到一两个属性，可以提取原数组中的属性组成一个新的对象数组。Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。
2022-09-02 17:12:22
799
原创 图片引入的几种方式
1.直接引入2.通过绑定的形式引入3.通过import引入4.作为背景图时引入注：backgroundImage: ‘url(’+imgSrc1+‘)’ 相当于 key:value
2022-07-13 16:04:45
1622
原创 vue-element-template增加多标签页tagsview
vue-element-template增加多标签页tagsview最后如果你要固定住tagsView,那么这里你需要设置下。
2022-07-11 17:08:15
1561
2
原创 两个数组判断含有相同项并添加K：V属性值
场景：两个不同的数组，一个数组和另一个数组比较，如果另一个数组存在某一项与自身数组的某一项相符合，就往自身添加某个属性， 比如用于控制disabled
2022-07-07 10:03:19
1077
原创 Vue中echarts的使用将接口返回的数据渲染出来
vue项目中使用echarts:1.安装依赖yarn add echarts -S2.文件中引入echarts (所有图表)import * as echarts from 'echarts'3.hello.vue组件<div id="myChart" :style="{width: '100%', height: '380px'}"></div>export default { data() { return { ...
2022-04-23 18:23:53
3811
1
form-generator 表单设计
2022-11-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人