- 博客(61)
- 收藏
- 关注
RSS订阅原创 elemet ui 时间区间不可超过1年
return time.getTime() > new Date(this.ruleForm.dateArea1).setFullYear(new Date(this.ruleForm.dateArea1).getFullYear()+1) || time.getTime() < new Date(this.ruleForm.dateArea1).setFullYear((new Date(this.ruleForm.dateArea1).getFullYear()-1))
2022-02-09 14:49:18
854
原创 element Ui el-inpute输入小数点限制2位
<el-input v-model="dialogRuleForm.adjustTheRatio" @keyup.native="dialogRuleForm.adjustTheRatio=oninput(dialogRuleForm.adjustTheRatio)"></el-input>methodsoninput(value) { let str = value let len1 = str.substr(0, 1) let len2
2021-08-25 20:11:31
1193
原创 身份证保留前6位和后两位其它用*号代替
idNum.replace(/(\w{6})\w*(\w{2})/, '$1**********$2')示例
2021-08-23 14:04:44
636
原创 vue下载静态的模板
在组件文件中代码export function downloadByA({ url, name = 'temp' }) { // 生成一个a元素 const a = document.createElement('a') // 创建一个单击事件 const event = new MouseEvent('click') // 设置图片名称 a.download = name // 如果跳转页面，则在其他页面跳转 a.target = '_blank' // 将生成的UR
2021-07-29 17:43:21
578
原创 el-upload上传文件
<el-upload class="upload-demo" ref="upload" :action="action" :on-change="handlePreview" :on-remove="handleRemove" :file-list="fileLis
2021-07-23 14:09:30
88
原创 动态添加表格中下拉框
父级页面<div class="threePart"> <ul> <li style="width:114px"><span style="color:red;">*</span>场景</li> <li style="width:222px"><span style="color:red;">*</span>账号
2021-07-07 14:52:26
191
原创 vue3自增
<el-button @click="increase">自增</el-button>import { reactive, toRefs, onMounted, getCurrentInstance, ref } from 'vue'export default { setup() { const state = reactive({ input: '', nub: '', time: '',
2021-07-06 17:14:35
742
原创 在element ui 转换表格中时间
common.js文件export function formatDate(str, fmt = 'YYYY-MM-DD hh:mm:ss') { if (!str) return '' return getFormatDate(new Date(str), fmt)}//引入这个文件import { formatDate } from '@/utils/common'data() { return { //进行注册 formatDate } }t
2021-07-01 15:20:45
187
原创 element UI 中时间控件只能选大于当前的时间
<el-date-picker v-model="ruleFormSecond.transactionTime" type="date" :disabled="dis" style="width:217px;" :picker-options="pickerOptions" placeholder="选择大于当前时间的时间"></el-date-picker>pickerOptions: { disab
2021-06-29 19:18:17
1073
原创 双击动态添加标签页
template<!-- 标签页 --> <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="handleClick"> <el-tab-pane v-for="(item) in editableTabs" :key="item.name"
2021-06-17 10:54:08
63
原创 将后端返回数据中/n和/r转换成＜br/＞和 
var content = res.rs.replace(/\r/g, '  ')content = content.replace(/\n/g, '<br/>')this.formatVal = content
2021-06-04 14:44:57
659
原创 动态添加表格
var tbody = document.getElementById('tbMain')var i = 0var tr = document.createElement('tr')tr.innerHTML = '<tr id=tr' + i + '><td>' + this.libraryListVal + '</td><td>' + this.sourceTable.user + '</td><td>' + this.sour
2021-05-27 11:03:13
52
原创 点击下载文件
downloadFile() { var content = JSON.parse(sessionStorage.getItem('content')) var ind = content.filter(item => { return item.id === this.offlineIds * 1 }) let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURICom
2021-05-24 11:11:48
65
原创 复制json对象的按钮
var input = document.createElement("input") // 直接构建inputinput.value = JSON.stringify(this.contentJson) // 设置内容document.body.appendChild(input) // 添加临时实例input.select()document.execCommand('Copy')document.body.removeChild(input)this.$message({
2021-05-21 15:38:01
157
原创 正则
([A-Fa-f0-9]{2})-([A-Fa-f0-9]{2}) //[0c-f0]-[00-ff](任意字母或数字)[\d]{2}-[a-z]{2} // [00-ff] (任意数组-任意字母)/(^[a-z]*_\[[\d]{2}-[\d]{2}]\[N]$|^[a-z]*_\[[\d]{2}-[a-z]{2}]\[H]\[\d]$|^[a-z]*_\[[\d]{2}-[\d]{2}]\[N]\[\d]$)/ //testa_[00-99][N][2]或testa_[
2021-05-19 17:18:07
47
原创 vue中实现左右拖拽自适应
<template> <div class="wrap"> <div class="box" ref="wrapper"> <div class="left" :style="{width: lwidth}" @click="handelChange">zuo</div> <div class="bar" :style="{left: bar_width}" @mousedown="handelMoused
2021-05-18 17:16:38
1169
1
原创 element ui中el-tree横向和竖向滚动条问题
.tree{ overflow-y: hidden; overflow-x: scroll; width:100%; height: 700px; overflow: auto; } .el-tree { min-width: 100%; display:inline-block !important; }
2021-05-17 10:18:00
1209
原创 正则将回车或换行转换成逗号
//将将回车后换行转换成逗号String.replace(/\r+|\n+/g,',')//字符串将逗号转换成换行String.replace(/[\,]/g,'\n')
2021-05-13 17:58:59
1047
原创 点击空白页面隐藏弹窗
<p class="parameter" v-clickoutside="handleClose" @click="processParameters">点击</p><script>const clickoutside = { // 初始化指令 bind(el, binding, vnode) { function documentHandler(e) { // 这里判断点击的元素是否是本身，是本身，则返回
2021-05-13 17:56:07
113
原创 element-ui上传图片
<el-uploadclass="upload-demo"action="https://jsonplaceholder.typicode.com/posts/"list-type="picture-card":http-request="afterRead":show-file-list="true"></el-upload>afterRead(e) {let content = e.file;let data = new FormData();data.ap
2021-05-08 16:50:59
78
原创 jsplumb连线的数据
var g_MyJsPlumb = null; funInitJSPlumb = function(){ g_MyJsPlumb = jsPlumb.getInstance({ Endpoint:["Dot", { radius: 7 }], // 端点形状 ConnectionOverlays: [["Arrow", { width: 12, length: 12, location: 1 }]], // 连线样式 装饰属性 箭头 Co..
2021-04-16 16:27:58
559
原创 搜素模糊查询可以大小写
//leafname 查询输入的值 nodes循环的数据 path内部使用function findPathByLeafId(leafname, nodes, path) { if (path === undefined) { path = [] } for (var i = 0; i < nodes.length; i++) { var names = nodes[i].name + ''
2021-04-12 15:34:46
37
原创 查询input中数据获取element ui tree的id
function findId(leafname, nodes, path) { if(path === undefined) { path = [] } for(var i = 0; i < nodes.length; i++) { // var tmpPath = path.concat() if(leafname == nodes[i].name) {
2021-04-09 18:04:21
122
原创 elementUi中tree组件获取父节点的id
在tree组件中用@current-change="getLeafKeys"事件methods中getLeafKeys(a,b){ var parentList = [] function getParent (node) { // 判断当前节点是否有父节点，并且父节点上的data不能是数组 if (node.parent && !Array.isArray(node.parent.data)) { .
2021-04-02 16:17:26
603
1
原创 vue-Router实现原理
一、前端路由概念通过改变 URL，在不重新请求页面的情况下，更新页面视图。二、vue-Router两种模式更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式：Hash — 默认值，利用 URL 中的hash("#") 、history-- 利用URL中的路径（/home）mode 区别：mode:“hash” 多了 “#”http://localhost:8080/#/loginmode:“history”http://localhost
2021-03-17 17:48:23
47
原创 require与import的区别和使用(CommonJS规范和es6规范)
CommonJS的由来在早期没有模块化思想时代码没有很好的编写规范，导致很多代码、逻辑重复、缺乏条理性且不易管理维护，这也让很多开发者头疼不已。随着JavaScript 社区的发展，社区为JavaScript制定了相应的规范，而CommonJS规范的提出得到了大家的承认和广泛的应用，2009年CommonJS就此诞生了。CommonJS介绍CommonJS实现了Javascript的模块化规范，规范了模块的特性和各模块之间的相互依赖性，使得代码可以更好的编写和维护，同时提高了代码的复用性。定义每个文件
2021-03-17 17:20:59
85
原创 vue中Computed、Methods、Watch区别
1.计算属性Computed模板内使用js表达式是很方便的，设计的目的只是为了简单运算。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。<!-- 复杂运算 --><div>{{message.split('').reverse().join('')}}</div><!-- 计算属性代替复杂运算 --><div>{{reverseMessage}}</div>computed: {
2021-03-17 17:06:57
50
原创 2021-03-17
优化 Loader优化 Loader 的文件搜索范围module.exports = { module: { rules: [ { // js 文件才使用 babel test: /\.js$/, loader: 'babel-loader', // 只在 src 文件夹下查找 include: [resolve('src')], // 不会去查找的路径 exclu.
2021-03-17 15:03:27
21
原创 es6解构赋值
es6解构赋值慨念结构赋值就是从目标数组或对象中提取需要的变量。最常用的应用场景是element-ui/vant的按需引入，请求接口返回数据，提取需要的数据。//数组结构var a, b, rest;[a, b] = [10, 20];console.log(a); // 10console.log(b); // 20//对象解构({ a, b } = { a: 10, b: 20 });console.log(a); // 10console.log(b); // 20// .
2021-03-16 20:59:26
30
原创 打印字符串中出现最多的字符
var str = '12344445555566664777'let newStr = str.split('')// console.log(newStr)let arr = []for(var i=0;i<newStr.length;i++){ if(arr[newStr[i]]){ arr[newStr[i]] +=1 }else{ arr[newStr[i]] =1 }}console.log(arr)var num = 0;var nub = '
2021-03-16 20:48:59
85
原创 项目开发流程
我独立搭建这个项目，我使用Vue脚手架3，vue脚手架编码简洁，体积小。遵循MVVM模式。是现阶段主流使用vantUi的组件库它使用方便，样式受国人喜爱在做项目之前我首先配置多环节变量，方便以后的开发。1.在package.json 里的 scripts 配置 serve stage build，通过 --mode xxx 来执行不同环境"scripts": { "serve": "vue-cli-service serve --open", "stage": "vue-cli-servic
2021-03-02 19:13:01
267
1
原创 vue3生命周期
vue3导入生命周期钩子的方式import { onMounted, onUpdated, onUnmounted } from 'vue'import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured } from 'vue'export default { setup() {
2021-03-02 18:58:58
87
原创 vue3初识
1.vue3中变量写法import { reactive} from "vue";export default { setup() { const state = reactive({ value: "", ids: "", bannerImg: "", sightName: "", gallaryImgs: [], categoryList: [] }); //注意return出去 return
2021-03-02 16:02:18
429
1
转载 vue3rem
1.安装两个插件npm i postcss-pxtorem -Snpm i amfe-flexible -S2.根据vue3提供的新配置方法，在vue-config.js中对CSS做配置：const autoprefixer = require('autoprefixer');const pxtorem = require('postcss-pxtorem');module.exports = { css:{ sourceMap:false, loaderOpt
2021-03-02 10:34:23
283
原创 js中操作dom
DOM元素的创建，增删改查和属性操作创建：document.wirte、innerHTML、createElement增加 ：appendChild insertBefore删除 ：removeChild改修改元素的属性：src、href、title等修改普通元素内容：innerHTML、innerText修改表单元素：value、type、disabled、checked等修改元素样式：style、className查DOM提供的API方法：getElementById、getElem
2021-01-19 14:28:52
166
原创 节流和防抖
防抖在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。节流规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。在公共方法中（如 untils.js 中），加入函数防抖和节流方法// 防抖export function _debounce(fn, delay) { var delay = delay || 200; var timer; return function () { var th = this;
2021-01-14 16:10:42
32
原创 Vue数据双向绑定
概念：vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。object.defineProperty()的语法语法：Object.defineProperty(obj, prop, descriptor)参数：obj： 必需。目标对象；prop： 必需。需定义或修改的属性的名字；descriptor： 必需。目标属性所拥有的特性（是个
2021-01-08 18:22:55
34
原创 vue虚拟Dom和diff算法
一.vue虚拟Dom什么是虚拟dom？用js来模拟DOM中的节点。一个能代表dom树的对象，通常含有标签名，标签上的属性，事件监听和子元素们，以及其他属性为什么使用虚拟domWeb界面由DOM树(树的意思是数据结构)来构建，当其中一部分发生变化时，其实就是对应某个DOM节点发生了变化，虚拟DOM就是为了解决浏览器性能问题而被设计出来的优点1.减少dom操作虚拟dom可以将多次操作和并一次操作。比如你，添加1000个节点，却是一个接一个操作（dom操作1000次一次次添加，虚拟dom只操
2021-01-07 20:20:14
210
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人