![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
JSN___不像码农的码农
这个作者很懒,什么都没留下…
展开
-
elementui的el-dialog对话框进行二次封装
首先要引入子组件的路径。原创 2022-12-26 13:20:27 · 719 阅读 · 1 评论 -
vue element el-select 下拉多选带有全选框
vue element el-select 下拉多选带有全选框<template> <div> <el-form ref="form" label-width="80px" :model="test"> <el-row :gutter="20"> <el-col :span="6"> <el-form-item label="核算中心:"> <原创 2022-05-24 13:25:56 · 1035 阅读 · 0 评论 -
element el-table组件修改表格表头和某个单元格背景色
element el-table组件修改表格表头和某个单元格背景色<template> <div> <el-table :data="tableData" style="width: 100%" :cell-style="cellStyle" :header-cell-style="headerCellStyle" > <el-table-column prop="city" lab原创 2022-05-24 13:22:32 · 941 阅读 · 0 评论 -
js 比较啷个日期的大小
*js 比较啷个日期的大小function tab(date1,date2){ var oDate1 = new Date(date1); var oDate2 = new Date(date2); if(oDate1.getTime() > oDate2.getTime()){ console.log('第一个大'); } else { console.log('第二个大'); }}tab('2015-10-10','20原创 2022-05-20 10:31:39 · 154 阅读 · 0 评论 -
JS数组方法的整理总结
JS数组方法的整理总结join()push()和pop()shift() 和 unshift()sort()reverse()concat()slice()splice()indexOf()和 lastIndexOf() (ES5新增)forEach() (ES5新增)map() (ES5新增)filter() (ES5新增)every() (ES5新增)some() (ES5新增1.joinjoin,就是把数组转换成字符串,然后给他规定个连接字符,默认的是逗号( ,)书写原创 2022-04-01 14:19:02 · 356 阅读 · 0 评论 -
vue element el-upload导入,导出(excel)功能
vue element el-upload导入导出功能util.js文件夹import Axios from 'axios'const server = process.env.VUE_APP_BASE_APIimport request from '@/utils/request'import { Message} from 'element-ui'import store from '@/store'import { getToken } from '@/utils/auth'原创 2022-03-31 11:10:24 · 1353 阅读 · 0 评论 -
vue element分页组件的封装并使用
##vue element分页组件的封装并使用第一步在components文件家里新建分页组件<template> <div :class="{'hidden':hidden}" class="pagination-container"> <el-pagination :background="background" :current-page.sync="currentPage" :page-size.sync="page原创 2022-02-19 14:08:13 · 880 阅读 · 0 评论 -
vue el-table表格内行内编辑input、日期组件等
table表格内行内编辑input、日期组件等<template> <!-- table表格内行内编辑input、日期组件等 --> <div id="app"> <!-- @cell-dblclick="tableDbEdit" 当单元格被双击击时会触发tableDbEdit事件,将文字变成input输入框,也可以使用单击事件@cell-click=''--> <el-table ref="table"原创 2022-01-11 14:00:36 · 3496 阅读 · 0 评论 -
elementUI分页删除最后一页数据时跳转回上一页并且el-table序号递增
elementUI分页删除最后一页数据时跳转回上一页queryParams: { current: 1,//当前页数 size: 10,//每页条数 channel: undefined, },const totalPage = Math.ceil((this.total -1 ) / this.queryParams.size) // 总页数this.queryParams.current = this.queryParams.curr原创 2021-12-29 10:41:08 · 944 阅读 · 0 评论 -
element实现树形选择器,支持多选、回显正常显示
element实现树形选择器,支持多选、回显正常显示<!-- /** * 树形下拉选择组件,下拉框展示树形结构,提供选择某节点功能,方便其他模块调用 * @author sxy https://bysjb.cn * @date 2020-12-02 */--><template> <div> <div v-show="isShowSelect" class="mask" @click="isShow原创 2021-12-21 10:02:19 · 2108 阅读 · 2 评论 -
vue通过a标签本地下载Excel模板
前端标题vue通过a标签本地下载Excel模板前期准备 我们需要准备你需要的Excel模板下载下来,然后找vue项目里放静态文件的地方,注意的是你的模板名称要和a标签的里的保持一致<a class="loadMould" :href="handleDownload('/document/导入模板.xlsx')" download="导入模板.xls">下载导入模板</a> /**下载导入模板 */ methods:{ handleDownload (url) {原创 2021-12-13 09:33:34 · 2025 阅读 · 1 评论 -
vue element el-date-picker日期选择器上来获取默认时间
##vue element日期选择器上来获取默认时间<el-form-item label="开单日期:"> <el-date-picker v-model="seachForm.timeValue" :editable="false" value-format="yyyy-MM-dd" type="daterange" range-separato原创 2021-10-20 14:12:42 · 1026 阅读 · 0 评论 -
如何在vue中监听scroll,从而实现滑动加载更多
如何在vue中监听scroll,从而实现滑动加载更多首先需要明确3个定义:文档高度:整个页面的高度可视窗口高度:你看到的浏览器可视屏幕高度滚动条滚动高度: 滚动条下滑过的高度当 文档高度 = 可视窗口高度 + 滚动条高度 时,滚动条正好到底。首先在mounted中添加监听:window.addEventListener(‘scroll’, this.scrollFn); // 监听scroll然后创建3个函数分别获取文档高度、可视窗口高度、滚动条高度://文档高度 getScro原创 2021-09-27 15:23:17 · 862 阅读 · 0 评论 -
详解element-ui设置下拉选择切换必填和非必填
<template> <div> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" > <el-form-item label="活动名称" prop="name" :required="isHaveTo">原创 2021-04-17 10:53:34 · 768 阅读 · 0 评论 -
js正则0-100或者多位数的验证
js正则0-100或者多位数的验证最多保留两位小数,值范围在0-100之间(包含0 100)不包含(01 001) const res =/^((?:0|[1-9][0-9]?|100)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;请输入整数,值范围在0-1000000000之间(包含0 1000000000)不包含(01 001) const reg =/^(?:0|[1-9][0-9]{0,9}?|1000000000)$/;最多保留两位小数,原创 2020-12-30 14:54:35 · 2238 阅读 · 0 评论 -
Vue、Element-ui项目中如何使用Iconfont(阿里图标库)
Vue、Element-ui项目中如何使用Iconfont(阿里图标库)我们使用element-ui、vue开发网站的时候,往往图标是起着很重要的作用。1.笨拙式引用:准备工作先注册,再登录、找到图标管理、我的项目点紫色的这个创建自己的项目图中画红线的地方很重要 1)、FontClass/Symbol前缀这个很重要,一定不要写成:el-icon-***这样的形式。 如果你写成这样的前缀,会和element-ui框架所带的图标(icon)冲突,导致你图原创 2020-12-30 10:02:17 · 546 阅读 · 0 评论 -
computed和watch的区别
computed和watch的区别computed计算结果并返回,只有当被计算的属性发生改变时才会触发(即:计算属性的结果会被缓存,除非依赖的响应属性变化才会重新及孙)watch监听某一个值,当被监听的值发生变化时,执行相关操作。(与computed的区别是,watch更加适用于监听某一个值得变化,并做对应操作,比如请求后太接口等。而computed适用于计算已有的值并返回结果。)监听简单数据类型:data(){ return{ 'first':2 }原创 2020-12-28 11:46:24 · 145 阅读 · 1 评论 -
element el-form的表单自定义规则
element el-form的表单自定义规则<script lang="ts">// import { AccountDTO } from "@/apis/accountGroup";import Vue, { PropType } from "vue";export default Vue.extend({ name: "riskManagement", data() { const moneyRules = (rule: any, value: any, callb原创 2020-12-24 15:31:26 · 1030 阅读 · 0 评论 -
export和export default的区别?
export和export default的区别?使用上的不同export default xxximport xxx from './'export xxximport {xxx} from './'原创 2020-12-14 10:27:14 · 123 阅读 · 0 评论 -
git的冲突解决--git rebase之abort、continue、skip
git的冲突解决–git rebase之abort、continue、skip(1)应用实例描述假设在github或者gitoschina上建立了一个项目,默认分支为master分支,远程master分支上c.sh文件内容:开发者A、B分别将项目拷贝到自己本地进行开发某一天,开发者B提交c.sh,并且提交成功,之后,开发者A在本地代码并没有和远程master分支的代码同步的情况下,对本地的c.sh进行了修改,修改后c.sh内容如下:修改后,开发者A准备将代码提交到远程master分支上。原创 2020-12-09 16:30:06 · 11188 阅读 · 0 评论 -
小程序上传图片
小程序上传图片wxml<!-- 容器 --><view class='ui_uploader_cell'> <!-- 根据已选择的图片临时路径数组展示图片--> <view class='ui_uploader_item' wx:for="{{uploaderList}}" wx:key="index"> <!-- 删除--> <icon class='ui_uploader_item_i原创 2020-12-04 16:11:50 · 118 阅读 · 0 评论 -
小程序上传视频
小程序上传视频wxml <view class="page-body-info"> <block wx:if="{{src === ''}}"> <view class="image-plus image-plus-nb" bindtap="chooseVideo"> <view class="image-plus-horizontal">添加视频</view> <vie原创 2020-12-04 16:04:31 · 234 阅读 · 0 评论 -
js将canvas保存成图片并下载
js将canvas保存成图片并下载<canvas id="canvas" width="400" height="400"></canvas><div> <button id="save">保存</button></div>var arr = [ {locations:[[0,0],[200,200],[0,400]],color:"red"}, {locations:[[0,0],[400,0],[2原创 2020-11-19 15:21:39 · 2726 阅读 · 0 评论 -
在JS数组特定索引处指定位置插入元素的技巧
在JS数组特定索引处指定位置插入元素的技巧需求: 将一个元素插入到现有数组的特定索引处。听起来很容易和常见,但需要一点时间来研究它。// 原来的数组var array = ["one", "two", "four"];// splice(position, numberOfItemsToRemove, item)// 拼接函数(索引位置, 要删除元素的数量, 元素)array.splice(2, 0, "three"); // array; // 现在数组是这个样子 ["one", "two"原创 2020-11-18 16:48:17 · 4735 阅读 · 0 评论 -
CSS代码使纯英文数字自动换行
CSS代码使纯英文数字自动换行*当一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的时候,在IE和FF中都会撑大容器,不会自动换行并且当数字或者英文中带有汉字时,会从汉字处换行,而纯汉字却可以自动换行。这个问题如何解决?先来认识一下两位主角word-wrap和word-break*word-wrap用来控制css换行两种取值:(1)normal(2)break-word(此值用来强制换行,内容将在边界内换行,中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。)word-原创 2020-11-17 11:17:04 · 204 阅读 · 0 评论 -
小程序上下切换位置
小程序上下切换位置wxml<view wx:for="{{companyData}}" wx:key="index" class="overHiden"> <view class="floarLeft">{{item.name}}</view> <view class="floarRight" wx:if="{{index != 0}}" data-index="{{index}}" bindtap="topClick"> 上 &原创 2020-11-12 14:27:56 · 373 阅读 · 1 评论 -
小程序阻止弹框下的页面滑动
小程序阻止弹框下的页面滑动(要在真机下调试) /** * 弹出框蒙层截断touchmove事件 */ preventTouchMove: function () { },这样就可以了,,,,原创 2020-11-04 15:21:38 · 218 阅读 · 0 评论 -
小程序自定义弹框
小程序自定义弹框wxml<!--button--><view class="btn" bindtap="powerDrawer" data-statu="open">来点我呀</view> <!--mask--><view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view><原创 2020-11-04 14:27:15 · 160 阅读 · 0 评论 -
小程序密码输入框
小程序密码输入框wxml<view class="Toptitle">请设置支付密码并妥善保管</view><form bindsubmit="formSubmit"> <view class='content'> <block wx:for="{{Length}}" wx:key="item"> <input class='iptbox' value="{{Value.length>=index+1?Va原创 2020-11-04 14:13:21 · 343 阅读 · 1 评论 -
vue富文本编辑器
Vue-Quill-Editor主流富文本编辑器对比前言:vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想。所以果断使用vue-quill-editor来实现。1.wangEditor(国产,基于javascript和css开发的web富文本编辑器,开源免费)优势:轻量简介,最重要的是开源且中文文档齐全。缺点:更新不及时。没有强大的开发团队支撑。2.UEditor(百度)优势:插件多,基本曼度各种需求,由百度web前端研发部开发。缺点:插件提交较大,网页原创 2020-10-16 17:03:43 · 588 阅读 · 1 评论 -
keep-alive实现原理
keep-alive实现原理本文介绍的内容包括:keep-alive用法:动态组件&vue-routerkeep-alive源码解析keep-alive组件及其包裹组件的钩子keep-alive组件及其包裹组件的渲染二、keep-alive介绍与应用2.1 keep-alive是什么keep-alive是一个抽象组件:它自身不会渲染一个DOM元素,也不会出现在父组件链中;使用keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。一个场景用户在某个列表页面原创 2020-10-13 10:38:25 · 214 阅读 · 0 评论 -
JS 时间转化为几分钟前 几小时前 几天前
JS 时间转化为几分钟前 几小时前 几天前dateTimeStamp为传入的时间const timeago = (dateTimeStamp) => { var nowTime = dateTimeStamp; //转换为时间戳 var thisTime = nowTime; thisTime = thisTime.replace(/-/g, '/'); var time = new Date(thisTime); time = time.getTime(); var原创 2020-09-28 14:42:31 · 234 阅读 · 0 评论 -
vue设置页面标题title
vue设置页面标题title每个页面设置相同标题index.html直接修改title标签里面的标题(ps: 这个html文件中也可以引入一些js文件)每个页面设置不同标题router - index.jsconst router = new Router({ mode: 'history', routes: [ { path: '/index', name: 'index', compon原创 2020-08-04 11:46:07 · 900 阅读 · 0 评论 -
小程序表单提交
小程序表单提交wxml<form bindsubmit='formSubmit'> <view>用户名: <input type='text' name="username" value='' placeholder='请输入您的姓名' /> </view> <view>手机: <input type='number' name="tel" value='' placeholder='请输入您的手机号' /&g原创 2020-07-14 17:12:52 · 385 阅读 · 0 评论 -
微信小程序之自定义底部弹出框动画
微信小程序之自定义底部弹出框动画最近做小程序时,会经常用到各种弹框。直接做显示和隐藏虽然也能达到效果,但是体验性太差,也比较简单粗暴。想要美美地玩,添加点动画还是非常有必要的。下面做一个底部上滑的弹框。wxml<view class="modals modals-bottom-dialog" hidden="{{hideModal}}"> <view class="modals-cancel" bindtap="hideModal"></view>原创 2020-07-10 11:29:43 · 1156 阅读 · 1 评论 -
微信小程序 支付功能(前端)的实现
微信小程序 支付功能(前端)的实现var app = getApp(); 2 Page({ 3 data: {}, 4 onLoad: function (options) { 5 // 页面初始化 options为页面跳转所带来的参数 6 var that = this 7 //登陆获取code 8 wx.login({ 9 success: function (res) {10 console.log(res.cod原创 2020-07-09 09:44:57 · 2303 阅读 · 0 评论 -
使用vue-cookies操作cookie
使用vue-cookies操作cookie1.前言在vue中如果想要操作cookie,除了使用之前我们自己封装好的操作cookie的方法之外,我们还可以使用vue-cookies插件,这是一个简单的Vue.js插件,专门用于在vue中处理浏览器的cookie操作,vue-cookies没有依赖关系,它可以独立存在,对vuejs友好。本篇博文就来介绍如何使用vue-cookies插件。2.安装vue-cookiesnpm install vue-cookies --save3.引入vue-cook原创 2020-06-30 16:15:21 · 651 阅读 · 0 评论 -
vue组件页面高度根据屏幕大小自适应
vue组件页面高度根据屏幕大小自适应网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth (包括边线的宽)网页可见区域高:document.body.offsetHeight (包括边线的宽)我们将document.body.clientWidth赋值给data中自定义的变量: data:{ screenHeight: document.body原创 2020-06-29 15:53:55 · 2902 阅读 · 1 评论 -
vue监听Esc事件
vue监听Esc事件**需求:监听Esc事件退出全屏,使用 document.addEventListener **在mounted中定义如下代码:mounted() { //监听键盘按键事件 let self = this; this.$nextTick(function () { document.addEventListener('keyup', function (e) { //此处填写你的业务逻辑即可 if (e.keyCode == 27) { self.cl原创 2020-06-02 17:15:54 · 3752 阅读 · 1 评论 -
vue中使用高德地图自定义开发
vue中使用高德地图自定义开发用一个在地图上挖宝的小例子,来总结下自己使用高德地图的心得。起步-加载高德地图// 进入cd utils// 创建AMap.js文件vim AMap.jsAMap.jsexport default function MapLoader() { return new Promise((resolve, reject) => { if (window.AMap) { resolve(window.AMap); } else原创 2020-05-25 09:59:01 · 1654 阅读 · 1 评论