小金的口袋-CSDN博客

除了一些简单的表单验证之外，我们还会有一些稍微复杂点的多层级表单的验证，如下图所示可点击添加，删除对数组进行操作，当点击确定时需要验证每一条form-item不能为空其tempalte部分主要代码如下所示：<el-form :model="form" ref="cardForm" :rules="rules" label-position="top" > <el-form-item v-for="(item, index) in form.CARD_RIGHTS_LIST" :l

2022-05-25 09:34:36 3811 1

原创 JS中的与、或、空值合并运算符、可选链操作符运算符

javascript有不少好用的运算符，合理的使用可以大大提高工作效率，以下简单介绍了4种，具体如下：&&逻辑与运算（&&）是 AND 布尔操作。只有两个操作数都为 true 时，才返回 true，否则返回 false。具体描述如表所示:条件一条件二结果演示true1true2true21 && 2 => 2truefalsefalse1 && 0 => 0falsetrue

2022-05-06 08:44:45 728

原创 Vue中组件通信的几种方法（Vue3的7种和Vue2的12种组件通信）

Vue3组件通信方式：props$emitexpose / ref$attrsv-modelprovide / injectVuex使用方法：props用 props 传数据给子组件有两种方法，如下方法一，混合写法// Parent.vue 传送<child :msg1="msg1" :msg2="msg2"></child><script>import child from "./child.vue"imp

2022-02-18 11:39:34 595

原创 Vue项目中实现文件下载到本地的功能

公司业务需求，我需要实现一个合同模板，自定义输入内容后生成合同随后导出下载合同。(自定义部分用到的是)为了实现这个文件下载到本地的功能，真的是废了九牛二虎之力，以至于差点放弃（主要还是自己菜）。刚开始自己用到的是Window.open()的方法，发现这个方法只能将你的合同在新页面打开，并不能实现下载功能；然后就换了html5 Bolb方法，弄了些许时间后发现还是不能达到自己的需求，最后在不断的挣扎中找到了**FileSaver.js** 首先需要安装即：npm install file-saver --s

2022-02-11 17:35:41 5817 2

原创春节将至，喜庆的烟花安排上（js实现烟花）

一年一度的春节即将来临，然后苦逼的我还在使劲的摸鱼，未能回家体验小时候路边放爆竹的快乐时光，所以只能在网上来实现这个小小的心愿了。烟花静态效果图如下：为了大伙复制方便就不分开写，直接复制即可，具体实现代码如下所示：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> b

2022-01-22 09:28:06 738

原创 css怎么实现雪人

冬天来了，怎么能少的了雪人呢，不管是现实中还是程序员的代码中统统都的安排上，那就一次安排几个雪人兄弟，咱们先看效果图：有喜欢的就赶紧cv拿走吧！！！其详细代码如下：图1html部分： <div class="snowman"> <div class="snowman-face"></div> <div class="snowman-nose"></div> <div class="mouth">&l

2021-12-30 15:43:50 848

原创如何用CSS实现角标

需要实现如下图所示的角标其代码如下所示，可直接cv复用，根据自行需要进行修改：html部分代码：<div class='card-wrap'> <div class='news1'> <div class='ribbon'> <div class='ribbon1'>热点</div> </div> </div> </div>CSS部分代码：.card-wra

2021-12-21 09:27:50 5636

原创纯css实现文字跳动的动画效果

以下图片为截图所得，所以为静态展示具体实现的详细代码如下，可直接cv复用：html部分代码：<h1 class="my-words"> <span>H</span><span>e</span><span>l</span><span>l</span><span>o</span><span> </span><span>w&lt

2021-12-18 15:00:56 3477

原创 canvas绘制圣诞树（动态效果）

最近不知道咋的都玩起了用备忘录手绘圣诞树，作为万能的程序员，肯定也要跟上潮流，那用代码来实现圣诞树吧。实现效果如下：具体代码如下，可直接cv复用<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> html, body { width: 100%;

2021-12-17 15:05:49 1248

原创新建Vue项目时的一些初始化配置（项目运行，浏览器自动打开；src文件夹简写，即配置别名）

新建一个Vue项目时，为了在后续更加方便的使用，通常会设置一些比较省时省力的配置：1.运行项目浏览器自动打开：在package.json文件下的scripts进行简单配置："serve": "vue-cli-service serve --open",2.配置别名：在示例app中创建一个jsconfig.json的文件夹，文件夹的配置如下：{ "complierOptions": { "baseUrl": "./", "paths": {

2021-12-14 11:11:44 1077

原创 uni-app（Vue）中(picker)用联动（关联）选择以至于完成某些功能

如下图所示，在项目中需求是通过首先选择学生的专业，选好之后在每个专业下面选择对应的学期，每个学期有对应的学费，因此就需要联动选择来实现这一功能。以下仅展示此功能主要代码：<div class="item"> <div class="item-left"> <span class="star">*</span> <span>目标专业 :</span> </div> <pi

2021-11-03 16:26:16 777

原创 uni-app中正则表达式验证手机号，身份证号输入格式是否正确

在用户提交信息的时候通常会输入手机号之类的，所以需要前端在提交的时候验证其输入的格式是否正确，以是在uni-app项目中，仅展示验证部分内容手机号：let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/ //正则表达式定义手机号正确格式if (!this.tele) { //判断如果手机号（this.tele）为空，提示用户输入手机号 uni.showToast({ title: '请输入手机号', icon: 'none' })

2021-10-24 15:06:24 4292

原创 2021年9月程序员薪资出炉

2021年9月全国招收程序员435501人，2021年9月全国程序员平均工资15052元，工资中位数13000元，其中北京最高工资可达50000元。接下来我们一起来看看新出炉的9月份程序员工资表~城市：9月程序员薪资排名靠前的城市几乎全是一线+新一线+省会，IT行业还是在大城市的薪资高一些，尤其是北京、上海、深圳，平均工资、中位数、最高工资都遥遥领先~职能：不同的岗位薪资差异较大，与算法相关职位薪资领先。很多大厂招聘中，也要求应聘者熟悉算法，初级工程师容易犯错忽略基础知识，一味去专研算法，基础

2021-09-23 09:08:07 371

原创适合程序员七夕，生日，520等日子发给女朋友的心意小礼物

图中仅显示部分内容，可根据自己需求进行内容修改，效果图如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> @import url("https://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.cs

2021-08-14 09:36:06 616

原创 uni-app 使用API中的uni.chooseImage 上传照片以及uni.previewImage图片预览（身份证照片为例）

在uni-app项目中通常需要用户上传照片，如下图所示：代码如下：<template> <div class="container"> <div class="user-info"> <div class="id-info">身份证照片</div> <div class="tips">*请上传本人的身份证照片（单张照片限制1M以内）</div> <div> <img

2021-08-04 15:55:00 2195

原创通过vue在uni-app中设置当前北京时间（动态时间）

在项目中通常需要在页面中显示当前时间，具体代码如下所示：<template> <div class="container"> <div class="times"> <span>{{ hour }} : {{ minutes }}</span> <span style="font-size: 38upx;margin-left: 10upx;;">{{ seconds }}s</span> </

2021-08-02 10:21:11 1220

原创 uni-app中当uni.navigateTo传的参数为object时，通过传递的不同参数，在显示单页面内通过v-if判断显示出对应的内容（可实现多页面效果）

通过uni-app中当uni.navigateTo传的参数为object时，通过传递的不同参数，在显示单页面内通过v-if判断显示出对应的内容（可实现多页面效果）起始页跳转到对应页面，并传递参数（object），如下图所示：<template> <div> <div class="item" v-for="(item,index) in className" :key="index" @click="nextPage(item)"> <div cl

2021-07-20 14:33:30 704

原创 HBuilder X中新建uni-app项目中的Hello uni-app模板后，自己添加的页面为什么运行时不显示，找不到入口？

在HBuilderX中新建了一个uni-app项目，然后选择了Hello uni-app模板进行测试编译，发现自己在pages目录下新建一个my-test文件夹后在此文件下进行编写测试，发现运行起来没有自己的测试文件，这是怎么回事？解决方案：(以下图为例)![在这里插入图片描述](https://img-blog.csdnimg.cn/20210714172306162.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow

2021-07-14 17:26:12 2170 1

Jimyking的博客

原创 Three.js引入和加载3D 模型

原创 echarts中文字过长时，tooltip属性换行显示

原创前端（vue）导出pdf

原创 echarts 滚动条

原创 Failed to resolve component: router-view at ＜App＞

原创 nvm 安装教程（mac）

原创 mac 安装 Homebrew教程

原创一文解决Vue中实现 Excel下载到本地以及上传Excel

原创 Vue实现批量选择操作（上下架，删除等）

原创 el-form 中的数组表单验证(数组可动态添加删除)