- 博客(32)
- 收藏
- 关注
RSS订阅原创 前端添加水印
});// 使用方法 < div v - watermark = "'your watermark'" > 页面内容 < / div >${} });// 使用方法 < div v - watermark = "'your watermark'" > 页面内容 < / div >} });// 使用方法 < div v - watermark = "'your watermark'" > 页面内容 < / div >
2023-03-28 10:13:12
1815
原创 基于elementUi封装的表单组件
前言：本文章是vue中因为公司的项目页面牵扯到大量的表单，从而诞生，组件的源代码我会放到文章最后，文章写的可能不好，但是组件我觉得还是不错的,可以大幅度的提高开发页面的效率，有问题可以及时探讨QQ：1582340991功能提交校验，输入文本框校验，单个禁用，全局禁用，日期的区间选择，下拉框或者选择框选中某个特定的值其他文本框显示或者隐藏，远程搜索框，插槽使用示例小demovue页面的配置参数释义data获取参数值fields动态配置表单jsall-disable
2021-12-10 17:22:43
1801
1
原创 一些函数小方法
1.JS数字位数不够，前面位数补零/** * 自定义函数名：formatZero * @param num： 需要补零的数值 * @param len： 补零后的总位数 */function formatZero(num, len) { if(String(num).length > len) return num; return (Array(len).join(0) + num).slice(-len);}2.数字保留两位小数 returnFl
2021-07-27 15:08:15
147
原创 vue中bpmn-js的使用（创建，编辑，使用）
引用npm install bpmn-js bpmn-js-properties-panel camunda-bpmn-moddle --save使用创建,编辑（包含左侧工具栏和右侧工具栏）<template> <div class="containers"> <div class="canvas" ref="canvas"></div> <div id="properties-panel"></div>
2021-06-28 17:18:54
6968
7
转载 Vue中点击按钮回到顶部（滚动效果)
HTML<div class="footer"> <div class="gotop" v-show="gotop" @click="toTop">Top</div></div>CSS.footer .gotop { text-align: center; position: fixed; right: 50px; bottom: 30px; cursor: pointer; padding: 10px; bord
2021-06-24 23:07:49
1765
原创 数组过滤某一个带有特定属性值的对象
arr: [ { name: '小红', age: 15, list: [ { name: '小非', age: 123 }, { name: '小二', age: 11 } ] }, { name: '小华', age: 17, list: [ { name: '小p', age: 10 }, { name: '小二', age: 8 } ] }, { .
2021-05-10 23:49:33
1553
原创 一些赋值方法
新数组名 = 旧数组名.map(iterator => {return {新字段名1: iterator.旧字段名1新字段名2: iterator.旧字段名2}})
2021-04-29 10:06:28
230
转载 前端性能优化
前端性能优化1、减少HTTP请求次数2、静态资源（CSS，JS，图片）使用 CDN3、将 CSS 放在文件头部，JS 文件放在底部4、使用字体图标 iconfont 代替图片图标5、善用缓存，不重复加载相同的资源6、使用gzip压缩内容7、图片优化(1). 图片延迟加载(2). 不要在HTML中缩放图片(3). 降低图片质量(4). 尽可能利用 CSS3 效果代替图片(5). 使用 webp 格式的图片8、避免使用 CSS 表达式9、 为文件头指定Expires10、减少重绘重排11、使用事件委托12、通过
2021-03-24 09:46:37
131
原创 多个数组中相同位置的元素拿出来组成一个新的数组
代码let arr1 = [1, 2, 3, 4]let arr2 = [11, 22, 33, 44]let arr3 = ['哈哈', '呵呵', '嘿嘿', '嘎嘎']let arr = arr1.map((v, i) => ({name: arr3[i], list: [arr1[i], arr2[i]]}))console.log(arr)效果
2021-03-19 10:46:45
548
原创 vue数据可以打印，但是无法更新视图
问题还原代码：// 生成帐号合并信息generateInfo() { this.userList.forEach(item => item.des = `${item.name}_${item.sex}_${item.age}`);},// this.userList为数组 des为文字合并 打印出来了，但视图上并没有解决办法1.generateInfo() { this.userList.forEach(item => this.$set(item, 'd
2021-03-04 14:55:31
323
1
原创 vue登陆页添加enter点击事件
VUE的created的生命周期中直接粘贴，submitForm()更换为自己的事件即可created(){ const _self = this; document.onkeydown = function(e){ let key = window.event.keyCode; if(key === 13){ _self.submitForm();
2021-03-01 15:44:45
479
原创 自动填写表单
情景：遇见表单多的页面的时候每次填写都很费劲，此方法就可以自动填写组件 debug/index.vue<template> <div id="debug" v-if="isDebugging"> <div class="all" v-if="isUnfold"> <h3>测试工具台 <el-button size="small" @click="isUnfold=fals
2021-02-23 15:55:28
1292
原创 Vue的动态样式修改
Vue的动态样式修改1.利用计算属性，computed写入（多种情况）// 判断input的的padding-right的长度(70,50,10) inputStyle () { return (item) => { const style = {}; if (item.percentageStyle) { styl
2021-02-22 18:19:23
511
原创 pandas
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码
2021-01-19 11:26:46
60
原创 elementUIinput模糊查询
<template> <div id="app"> <el-autocomplete class="inline-input" v-model="state2" :fetch-suggestions="querySearch" placeholder="请输入内容" :trigger-on-focus="false"
2021-01-19 11:25:01
570
原创 js修改对象数组里的对象属姓名
js修改对象数组里的对象属姓名data为数组name替换descurl替换code_url let data = [ {desc: '超清', thumb: '1', code_url: 'https://media.w3.org/2010/05/sintel/trailer.mp4'}, {desc: '高清', thumb: '1', code_url: 'https://media.w3.org/2010/05/sintel/tr
2020-12-25 11:11:14
543
原创 vue改变原数组的某一个属性
let a=[{ name:"1",id:1},{ name:"2",id:7},{ name:"3",id:4}]let b=a.map(item=>{ if(item.name==='1'){ item.name="cheng" }else if(item.name==='2'){ item.name="zzzz" }})console.log(a)console.log(b)
2020-11-01 19:43:34
546
转载 数组方法
数组方法join()push()和pop()shift() 和 unshift()sort()reverse()concat()slice()splice()indexOf()和 lastIndexOf() （ES5新增）forEach() （ES5新增）map() （ES5新增）filter() （ES5新增）every() （ES5新增）some() （ES5新增）详情参考...
2020-08-18 17:35:08
80
原创 VUE登录,注册以及前后台的增,删,改,查
基础文件,mongodb自己配置这是前后台的基本配置文件以及视频,不懂得可以观看下,如视频不能正常播放,请及时留言联系网盘地址1.注册1.1前台1.1.1 写前台页面<template> <div> <h1>注册</h1> <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign"> <e.
2020-08-08 17:56:40
501
原创 403通用适口配置,CSS代码初始化
通用适口配置 <head> <!-- 通用配置适口 --> <meta charset="utf-8"> <!-- 编码形式请求头内容 --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 渲染模式系统开启 --> <meta http-equiv="X-UA-Compatib
2020-07-29 17:39:16
134
原创 中央事件总线数据不更新问题
新建until下的js文件,new Vueimport Vue from "vue"export default new Vue错误写法触发<template> <div> <button @click="fun()">兄弟通信</button> </div></template><script>import Bus from "@/until/indexBus.js"ex
2020-07-25 11:53:10
355
2
原创 VUEX的使用---详解
传统vue是单向数据流。如果是兄弟组件之间传值兄弟组件间的状态传递无能为力我们经常会采用父子组件通过正向/逆向传值来对数据进行传递。以上的这些模式非常脆弱，通常会导致无法维护的代码。vuex只能用于单个页面中不同组件(例如兄弟组件)的数据流通。1.安装npm install vuex --save配置vuex文件创建在src中创建store文件夹–>与store.js2.引入4.创建store.js实例import Vue from 'vue'import Vuex..
2020-07-24 22:46:09
348
原创 Mock模拟数据的使用
在前端开发的过程中,有后台配合是很有必要的,但是后台数据还没有写好,那么我们需要自己提供或修改接口1.安装mokenpm i --save mokejs2.在src文件下创建相关文件和文件夹3.在mock文件下的index.js设置请求const MocKYaxu=require('mockjs') //MocKYaxu随便起名// 格式 : MocKYaxu.mock('自定义设置请求地址','post/get',调用的json库)MocKYaxu.mock('/xixi/d
2020-07-23 19:45:49
621
原创 Axios的异步请求和封装
1.下载axiosnpm i --save axios2.在src文件加下的main.js种添加import axios from 'axios'Vue.prototype.axios = axios3.我是GET请求, created() { //跨域 this.axios({ method: "get", url: "https://m.maoyan.com/ajax/movieOnInfoList?token=&opt
2020-07-23 17:59:13
712
原创 VUE的七种动态路由传参
params传参(4种)1.给路由的规则中配置接收参数 { path: '/details/:yaxu', name: 'details', component: () => import( '../views/Details.vue') },2.发送数据（1）编程式导航发送数据2种写法 1.this.$router.push("/路径/数据") 示例:this.$router.push('/details/我是从one页面过来的') 2.
2020-07-23 16:30:03
330
原创 自定义封装组件
1.在components中创建Title.vue组件<template>T <header> <i class="iconfont icon-back"></i> <span>111111111</span> </header></template><style lang="scss" scoped>header { z-index: 1; position:
2020-07-22 17:55:17
352
原创 自定义封装一个吸顶显示隐藏的小指令
效果视频1.定义一个自定义指令title <header v-title> <i class="iconfont icon-back"></i> <span>11111</span> </header>2.在该页面引入vueimport Vue from "vue";3.创建title指令,并测试一下Vue.directive("title", { inserted(el) {
2020-07-22 16:54:19
150
原创 Vue中关于Fetch和Axios的get,post请求
**fetch请求**<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>fetch</title> <meta name="description" content="">
2020-06-15 20:23:01
355
原创 关于在VUE中封装一个Swiper组件的方法-----详解
swiper官网: https://www.swiper.com.cn/1.打开项目的根目录，然后打开命令窗口，引入swiper组件npm install swiper@4.4.1 (@后为指定版本号，可写可不写,下面同理)cnpm i swiper@3.4.2 -S2.在src/components下创建一个Swiper.vue的文件夹,用来存储公共部件3.书写公共样式a....
2020-03-01 14:13:28
1601
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人