- 博客(98)
- 收藏
- 关注
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
901
原创 vue3+vite assets动态引入图片的几种方式，解决打包后图片路径错误不显示的问题
因为vite构建的vue3项目，无法使用require导入图片，需要处理。1.新建 utils/require.js 文件。
2023-05-31 17:16:41
7240
3
原创 Vue换肤主题
navbar导航sidebar / 整体背景// sidebar//这里需设置透明度 若设置入定颜色 一键换肤对 菜单栏部分不起作用:export {下篇文章对 一键换肤修改 tagsView 有做说明。
2023-05-11 14:23:20
1429
原创 Css中使用Vue的变量
var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。变量名大小写敏感，–header-color和–Header-Color是两个不同变量。应用场景:(Vue一键换肤 – 修改 tagsView 动态选中样式)声明css变量的时候，变量名前面要加两根连词线（–）。第二个参数不处理内部的逗号或空格，都视作参数的一部分。var()函数用于读取变量。
2023-05-11 11:17:25
3771
2
原创 Vue-弹层显示样式
定义一个数据记录当前鼠标经过分类的ID，使用计算属性得到当前的分类推荐商品数据。3.鼠标经过li 的时候 layer显示。2.写好之后 将样式隐藏。2.然后渲染左侧数据。
2023-05-09 11:59:33
967
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
2127
1
原创 H5水波纹动画 及加载样式countTo插件获取当前值的使用
由于 countTo 并没有 API 能够直接监听到它这个数字的变化 . 所以我们只能够手动去监听，利用 defineProperty 来进行数据的劫持。H5用到了Vant组件库 和countTo插件(数字跳动)
2023-04-05 14:49:15
242
原创 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
908
原创 密码框限制xxs注入字符处理
/遍历数组 验证数组中的每一项是否存在于输入的字符串里。//方法可返回某个指定的字符串值在字符串中首次出现的位置。//xss攻击特殊字符过滤。"密码长度应为5-20位""请输入正确的格式密码"// 密码输入校验。//判断条件是否成立。
2023-01-18 15:07:54
700
原创 el-date-picker实现通过其他方式触发日期选择器
el-date-picker 目前只能通过点击input输入框触发日期选择器，项目中需要通过其他方式触发日期选择器同时把input输入框去掉，如点击按钮。图中隐藏了el-data-picker日期组件，手动添加样式展示时间栏选择的数据进行 +0 回显。点击时间时，让日期组件显示出来时存在一个问题 就是每次点击 需要点击两下才能完成年份的选择。给el-date-picker 一个类名，找到类名下的input手动触发focus。需求左右切换 可以快速找到年份，于是添加了element选择年份的日期组件。
2023-01-17 17:37:49
4427
原创 修改elementUi中的下拉框el-select样式问题
在项目中需要改变这个样式，由于多个地方都需要用到这个小组件，所以必然写在公共样式中，但是项目中并非所有el-select组件都需要改成一样的样式，所以需要在组件上加class名，然后把需要改正这种样式的组件加上这个class名，就能对应的改了。如果想给组件一个class改变上下部分的样式并不现实，只能单独给下半部分DOM节点一个class。如下图中两行代码，加上以后就可以给下部分DOM一个class名。控制台显示组中件上半部分的DOM和下半部分的DOM是分开的。此时就可以通过类名单独进行相关的样式操作了。
2023-01-09 17:52:14
936
原创 Vue 时间栏日期选择
- arrow=“never” 不显示自带左右按钮。// chang事件两个参数，区分向左点击还是向右点击。3.自行加上一个左右的按钮样式，添加事件进行左右区分。用el-carousel 的轮播组件 将样式修改。上面会有个小bug，向左点击时时间会向右跳一下。//月份是从0月开始获取的，所以要+1;添加change事件 区分左右点击。2.取消该change事件。获取当前年 和 当前月。
2023-01-05 11:01:13
1196
原创 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
744
原创 vue使用el-upload实现formData文件上传功能
在底部确认按钮点击的时候 使用fd.append(‘key’,value) 整合为formData 格式。最开始单个文件上传 没用到element el-upload 组件。//多文件上传 用到了el-upload组件。这是后端以文件流形式返回的结果。//这里只能实现单个文件上传。
2022-11-17 09:37:19
787
原创 接口返回的是一个图片文件而不是url 前端如何显示？
请求后端接口 返回的时一张图片 如何在img中显示?preview里查看就是显示一张图片。以下是处理方法： （亲测有效）
2022-11-09 15:58:25
1682
转载 vue路由传参-如何使用encodeURI加密参数
这篇文章主要介绍了vue路由传参-如何使用encodeURI加密参数，具有很好的参考价值，希望对大家有所帮助。那么需要将参数转换为JSON字符串，在使用encodeURI加密，需要注意的是通过路由跳转的时候会自动解密一次，所以需要加两次密。我这边用到的是通过路由的path进行传参，感觉加密的话用path传比较好，同时也方便其它端在调用你页面时，获取参数。在路由切换时页面需要使用地址栏传参，但地址栏会暴露参数的值，然后想到了encodeURI加密参数。使用encodeURI加密参数。
2022-11-08 10:11:23
2892
原创 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
3801
2
原创 el-tree 根据节点属性控制节点显隐
用render-content方法实现树节点的内容区的渲染，根据节点属性判断是否渲染内容区，若不显示，则删除该节点。根据canEdit 控制节点隐藏/显示。只有总公司canEdit 为true。
2022-09-21 16:20:02
3404
原创 vue项目刷新当前页面的推荐方式
通过location.reload()或是this.$router.go(0)两种强制刷新方式，相当于按F5，会出现瞬间白屏，体验差，不推荐。推荐方式：定义一个空白路由页面，路由跳转到该空白页后立马跳回当前页，实现路由刷新。因为vue-router判断如果路由没有变化，是不会刷新页面获取数据的。在vue项目中，经常会遇到需要刷新当前页面的需求。这种方式，基本上能够应付绝大多数情况，推荐使用。1.在router路由表中定义一个空白路由，方式1：go(0)和reload()3.在需要刷新的页面使用。
2022-09-07 18:03:28
1083
原创 JavaScript 提取数组的属性名 组成新的数组
需求：对象数组中每个对象包含很多属性，批量操作只需要要用到一两个属性，可以提取原数组中的属性组成一个新的对象数组。Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。
2022-09-02 17:12:22
678
原创 图片引入的几种方式
1.直接引入2.通过绑定的形式引入3.通过import引入4.作为背景图时引入注：backgroundImage: ‘url(’+imgSrc1+‘)’ 相当于 key:value
2022-07-13 16:04:45
1432
原创 vue-element-template增加多标签页tagsview
vue-element-template增加多标签页tagsview最后如果你要固定住tagsView,那么这里你需要设置下。
2022-07-11 17:08:15
1424
2
原创 两个数组判断含有相同项并添加K：V属性值
场景：两个不同的数组，一个数组和另一个数组比较，如果另一个数组存在某一项与自身数组的某一项相符合，就往自身添加某个属性， 比如用于控制disabled
2022-07-07 10:03:19
850
原创 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
3664
1
原创 小程序 uni.previewImage 实现图片预览
uni.previewImage是uniapp提供的预览图片的方法渲染轮播图区域1.使用 v-for 指令，循环渲染如下的轮播图 UI 结构：<!-- 轮播图区域 --> <!-- 小圆点 / 自动轮播 / 轮播间隔时间 / 当前页轮播开始到结束耗时 / 无缝衔接轮播 --><swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"
2022-04-16 09:25:06
3160
原创 uniapp小程序 subPackages分包加载配置
使用场景:uniapp开发各种小程序时候遇到主包过大，无法上传的情况uniapp的分包机制: 参照官网uniapp subPackages使用小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示。此时终端界面会有等待提示。所以分包后的页面是在打开分包内的某个页面以后才会加载分包的内容每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者
2022-04-15 14:11:35
2763
原创 uniapp 分类筛选及结构
效果实现:整体思路:1.定义页面结构如下<template> <view> <view class="scroll-view-container"> <!-- 左侧的滚动视图区域 --> <scroll-view class="left-scroll-view" scroll-y :style="{height: wh + 'px'}"> <view class="left-scr
2022-04-15 13:28:45
3911
原创 Vue 中 router和route的区别
routerrouter是VueRouter的实例对象,也是一个全局的路由对象，里面有很多的属性和方法 ，比如：router.push,route.options等等。跳转链接就可以用 this.$router.push，和router-link跳转一样。routeroute是当前正在跳转的路由对象，可以从route里面获取hash，name ，path，query，mathsr ， fullPath等属性方法比如接受参数时使用this.$route.query.参数名 ---- t
2022-04-13 15:04:54
2259
原创 JSX 基本使用说明
JSX 是 JavaScript XML 的简写，表示可以在 JavaScript 代码中写 XML（HTML） 格式的代码。优势：声明式语法更加直观，与 HTML 结构相同，降低了学习成本，提高了开发效率，JSX 是 React 的核心之一。JSX 基本使用使用 JSX 创建 React 元素const title = <h1>Hello JSX</h1>使用 createRoot() 方法渲染 React 元素到页面中// createRoot(渲染到哪儿)
2022-04-13 14:55:07
1181
form-generator 表单设计
2022-11-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人