- 博客(47)
- 收藏
- 关注
RSS订阅原创 前端组件地址
https://www.antdv.com/docs/vue/getting-started-cn/ antdhttp://v1.iviewui.com/docs/introduce iView
2022-03-04 10:38:30
252
原创 vue table 单条删除+批量删除
<el-button type="primary" @click="handleSure()" :disabled="dataListSelections.length <= 0">批量确认</el-button> <el-table :header-cell-style="{ background: '#3e8ef7', color: '#fff' }" :data="dataList" @selection-c
2022-03-03 18:31:10
1587
原创 element table 多选框单行禁用
<el-table-column type="selection" header-align="center" :selectable='checkboxSelect' align="center" width="55"> </el-table-column>checkboxSelect (row) { if (row.checkState == 1..
2022-03-03 18:14:49
487
原创 element upload自动上传
<el-form-item label="业务合同 (PDF需要上传)" label-width="200px"> <el-upload ref="upload" :auto-upload="false" :show-file-list="true" :on-change="changeUploadCoverImg" ..
2022-03-03 15:40:21
413
原创 钉钉内嵌pc
index.html中引入–登录页html<div id="ding-login" class="a"></div>import qs from 'qs'// 钉钉后台获取的appid和appSecret，appSecret没有用到扫码中let appid= 'XXXXXXXXXXX'let redirect = encodeURIComponent(`xxxxxxxxxxxxxx`) //回调地址let http_url = encodeURIComponen
2022-02-25 14:46:40
2047
原创 vue项目PC端窗口大小自适应
一、npm安装依赖项目基础配置使用 vue-cli 生成自适应方案核心： 阿里可伸缩布局方案 lib-flexiblepx转rem：px2rem，它有webpack的loader px2remnpm i lib-flexible -Scnpm install postcss-px2rem --save二、在vue.config.js配置，这是按照1920*1080缩放css: { loaderOptions: { postcss: { plug
2021-08-19 16:00:52
2977
1
原创 el-button自定义颜色
//显示时按钮样式.el-button--primary { //需要更改的按钮类型 background: #d8821f !important; border-color: #d8821f !important;}//移入时按钮样式.el-button--primary:hover { background: #ecbd87 !important; border-color: #ecbd87 !important; color: #FFF !important;}..
2021-07-26 17:40:08
5076
1
原创 小程序扫码进入指定页面并携带参数
在进入的页面中 onLoad: function(query){ var that = this //打印一下query有没有接收到参数 console.log(query,'option'); const scene = decodeURIComponent(query.scene) console.log(scene,'scene'); if(scene) { var scene_arr = scene.split(",") c
2021-07-12 14:12:49
565
原创 ElementUI日期选择器实现禁用多时间段
禁用时间段为后端返回数据产品需求为：后台数据中返回时间段，在选择开始日期时为不可选状态。当开始日期选定后，1、截止日期输入框中早于当前日期前的日期禁用2、截止日期输入框中如果有已经禁用的日期，禁用日期中从最早的一天开始之后的日期全部禁用，只能选择开始日期当天~禁用日期中最早的一天的前一天3、截止日期输入框中如果没有已经禁用的日期，则开始日期当天和后续的日期都可以选择如上图，我选择的是17号那一天，那么在这里只有17-22号之前可选，后面需全部禁用掉下面上代码：组件： <el
2021-06-25 17:58:42
1900
原创 vue上传图片
<el-form-item prop="businessLicenseImg" label="营业执照"> <el-upload :auto-upload="false" :show-file-list="false" :on-change="changeUploadCoverImg" :on-preview="handlePictureC
2021-06-03 10:09:22
84
原创 table列表根据不同状态改变文字颜色
<el-table-column prop="state" header-align="center" align="center" label="状态"> <template slot-scope="scope"> <div :style="{color:getColorByNation(scope)}">{{scope.row.state == 0 ? '禁用': scope.row.state == 1 ? '正常' : ''}}<
2021-06-01 17:52:26
905
转载 除了广义的同步任务和异步任务，对任务更精细的定义
macro-task(宏任务)：包括整体代码script，setTimeout，setIntervalmicro-task(微任务)：Promise，process.nextTick不同类型的任务会进入对应的Event Queue，比如setTimeout和setInterval会进入相同的Event Queue。事件循环的顺序，决定js代码的执行顺序。进入整体代码(宏任务)后，开始第一次循环。接着执行所有的微任务。然后再次从宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务。听起来有点绕
2021-05-12 10:27:45
61
原创 select 获取value和lable值
使用@change方法<el-form-item label="部门：" prop="region"> <el-select v-model="ruleForm.level" @change="selectGet" placeholder="请选择部门名称" style="width:100%"> <el-option v-for="item in positionList" :key="item.dictCode"
2021-04-29 10:57:57
946
转载 在网页中的动漫人物互动
在html文件中写入<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/><script src="https://cdn.jsdelivr.net/gh/steve
2021-04-20 14:05:15
709
1
原创 form表单实现表格样式 -- 改css实现
效果图如下：因为是以弹框形式出现，所以外层包了dialog<el-dialog title="平台资金提现" :visible.sync="dialogTableVisible"> <el-form ref="ruleForm" :rules="rules" :model="ruleForm" label-width="250px" class="form"> <el-form-item label="基本户开户名">
2021-04-09 17:02:39
1523
原创 小程序navigator跳转携带参数
从index页面跳转到detailed页面，并在detailed页面获取idindex.wxml页面<view> <text class="dutyParagraph">{{item.businessInfo.creditCode}}</text> <navigator url="../detailed/index?id={{item.businessInfo.id}}" class="scroll-view2">查看明细</navigat
2021-03-31 10:34:08
737
原创 vue实现点击按钮返回上一页
<el-button type="text" @click="$router.back()">返回上一步</el-button>添加@click="$router.back()"方法即可.
2021-03-25 11:32:45
1044
2
原创 js 向数组中的对象添加属性和属性值
bankEditHistoryList：[{“name”:“1”},{“name”:“1”}]；循环最佳属性：bankEditHistoryList.forEach(item => { item.phone= 22; })输出结果为：bankEditHistoryList：[{"name":"1","phone":"22"},{"name":"1","phone":"22"}];...
2021-03-25 11:31:35
1202
转载 代码优化技巧
1.多表达式多 if 判断我们可以在数组中存储多个值，并且可以使用数组include方法。// 长if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') { //logic}// 短if (['abc', 'def', 'ghi', 'jkl'].includes(x)) { //logic}2.简写 if else如果 if-else 的逻辑比较降低，可以使用下面这种方式镜像简写，当然也可以使用三元运算符来实现。
2021-03-09 16:55:06
101
翻译 ES6对于 数值、数组、对象、函数的一些方法
Number.isNaN()函数：用于判断传入的是否是非数值 , NaN（非数值），才返回trueconsole.log(Number.isNaN(2.5)); //falseconsole.log(Number.isNaN('abc')); //falseconsole.log(Number.isNaN(NaN)); //trueumber.isFinite() 函数 用来检查一个数值是否非无穷 只有无穷大时才为falseconsole.log(Number.isFinite(555
2021-03-09 15:07:22
203
原创 Vue router中的history模式和hash模式
哈希模式（hash mode）这是开发中的默认模式，在url中永远带着#号，在浏览器方面其支持度极佳，甚至兼容低版本的ie浏览器。说到这里就不得不说一下前端路由的原理：window是可以监听到哈希值的变化的（onhashchage事件），这就意味着：当url中的哈希值发生了变化，无需发起http请求，window也可以监听到这种变化，并按需加载前端的代码块。哈希模式也是当下单页面应用的标配,所谓前端路由的强大之处也就在这里：路由分发不需要服务器来做，前端自己就可以完成。历史模式（history mode
2021-03-05 14:14:39
295
原创 vue-cli3 封装axios请求 + vue.config.js文件简单配置+ 多环境打包配置
在src下创建api文件夹–创建api.js和request.js两个文件request.js文件中代码import axios from 'axios'import QS from 'qs';import { Message } from 'element-ui';// 请求超时时间axios.defaults.timeout = 15000;// post请求头axios.defaults.headers.post['Content-Type'] = 'application/jso
2021-03-04 15:37:10
976
1
原创 小程序给数组里面的某一项赋值
给数组某一项赋值itemValueVos:[ { "label": "姓名", "apiKey": "userName", "value":"" }, { "label": "手机号", "apiKey": "mobile", "value": "", }, ], //给第一个value赋值小红this.setData({ ['item
2021-02-19 16:29:52
1199
3
原创 复制table列表中的某一行数据使粘贴结果在一行显示
.el-table .cell { display: inline-block; }使其变成行内块
2021-02-03 11:12:49
288
转载 Vue2,Vue3打包加时间戳
https://blog.csdn.net/qq_29407683/article/details/103502917
2021-02-02 18:16:13
1050
原创 vue列表金额数据转换千分符
<el-table-column :formatter="stateFormat" prop="amount" header-align="center" align="center" label="总金额" ></el-table-column>//金额转换千分符 stateFormat (row, column, cellValue) { cellValue .
2021-02-01 12:14:27
1412
原创 vue批量下载数组中的url
<template slot-scope="scope"> <el-button type="text" size="small" @click="exportContract(scope.row)">导出</el-button></template>export const downloadFile = (url) => { const iframe = document.createElement("iframe"); ifr
2021-01-26 17:51:05
406
原创 git stash和git stash pop的使用
一、git pull 拉代码的时候，或者切换分支的时候，防止冲突和不便，，会用到git stash，将工作区内容暂存起来。怎么办：1、git stash 备份当前工作区的内容，保存到git 栈中，从最近的一次commit中读取相关内容2、git pull 或者做其他的工作 3、git stash pop 从git栈中获取到最近一次stash进去的内容，恢复工作区的内容。。获取之后，会删除栈中对应的stash。。 由于可能会stash多次，git使用栈管理，我
2021-01-07 11:53:27
4834
1
原创 vue table中点击一个按钮之后这个按钮隐藏让下一个按钮显示
在获取后台返回得列表时。拿到数组去循环他，利用this.$set 给数组的每一个对象添加属性for (let i = 0; i < data.data.data.records.length; i++) { this.$set(data.data.data.records[i],'sex','true') }使用 v-if v-else去判断显示隐藏<template slot-scope="scope"> <el-button type="prim
2020-12-23 11:29:31
1614
3
原创 前端接收后端blob文件流并下载
handleDownload(){ this.$http({ url: this.$http.adornUrl("XXXXXXXXXX"), method: "get", responseType: 'blob', params: this.$http.adornParams({ }), }).then((data) => { console.log(data,'---data89'
2020-12-18 17:59:09
1016
3
原创 vue输入框只允许输入数字并保留4位小数
<el-form-item label="费率" prop="rate"> <el-input @input="handleInput" v-model.number="ruleForm.rate" clearable></el-input></el-form-item>handleInput(value) { // console.log(value) if(value != '') { if(value
2020-12-17 14:17:49
2214
原创 刷新当前页面不跳路由
利用 provide 和 inject 实现页面刷新首先在 App.vue 的 添加 v-if 属性<router-view v-if="isRouterAlive" ></router-view>其次在 data 里面添加 isRouetrAlive，这个属性名可以自定义，默认设置为 true，如果为 false 整个页面就不会显示了然后在 methods 里面添加一个刷新方法最后需要把这个函数 provide 出去export default { name
2020-12-17 10:31:42
414
原创 vue 上传excel功能
<el-upload class="upload-demo" :auto-upload="false" :on-change="changeUploadCoverImg" :show-file-list="true" accept=".xlsx, .xls" :limit="1" ...
2020-11-20 17:25:12
480
原创 vue 标签内传递参数
<router-link :to="{path:'/xxx', query:{id:item.contractId}}"> <el-button type="primary" style="margin-left: 22px">新建</el-button></router-link>目标页面获取传递过来的参数this.$route.query.id
2020-11-18 17:56:58
1317
原创 多个按钮如何知道自己点击的是哪个
<el-col :span="12"> <el-button type="primary" @click="change('')" plain>全部</el-button> <el-button type="primary" @click="change(1)" :class="{ newStyle: 1 === number }" plain style="margin-left: 22px">执行中</el-button>
2020-11-18 16:47:40
1318
原创 账密和扫码登录的切换
<div class="col"> <el-row> <el-col :span="12"> <img class="image" src="" alt="" /> </el-col> <el-col :span="12"> <el-card class="box-card"> <div class="text item"&
2020-11-09 15:56:53
1835
1
原创 子组件向父组件传值
子组件<div style="margin-top:20px;font-size:14px;"> <span>已经拥有账户?</span> <span> <el-button type="text" @click="handleClick()">登录</el-button> </span> </div>handleClick(){ th
2020-10-21 10:12:34
217
原创 vue实现记住密码功能，cookie的设置
实现功能：1.记住密码勾选，点登陆时，将账号和密码保存到cookie，下次登陆自动显示到表单内2.不勾选，点登陆时候则清空之前保存到cookie的值，下次登陆需要手动输入直接上主要的代码HTML部分 记住密码 忘记密码? JS部分//页面加载调用获取cookie值mounted() {this.getCookie();},methods: {change(index) {this.number = index},submitForm(fo.
2020-10-20 10:18:30
616
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人