- 博客(68)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 element table自动滚动
1.给table设置ref<el-table :data="tableData" style="width: 100%" ref="table" height="300"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名"
2022-03-09 10:00:00
1531
原创 js一维数组转二维数组
利用数组的splice方法进行转换1.封装函数// 入参 num:需要转换成几维数组，arr:需要转化的数组// 出参 转换后的数组arrChange(num, arr) { const newArr = []; while(arr.length > 0) { newArr.push(arr.splice(0, num)); } return newArr;},2.使用方法let arr=[1,2,3,4,5,6,7,8];console.log(this.a
2022-03-08 11:24:55
5555
原创 Vue3.0快速上手
文章目录一、Vue3简介二、Vue3带来了什么1.性能的提升2.源码的升级3.拥抱TypeScript4.新的特性三、创建Vue3.0工程1.使用 vue-cli 创建2.使用 vite 创建一、Vue3简介2020年9月18日，Vue.js发布3.0版本，代号One Piece（海贼王）耗时两年多、2600+次提交、30+RFC、600+次PR、99位贡献者二、Vue3带来了什么1.性能的提升打包大小减少41%初次渲染快55%，更新渲染快133%内存减少54%…2.源码的升级
2021-12-22 10:39:11
204
原创 vue中使用form-create实现动态表单
文章目录前言一、form-create是什么？二、使用步骤1.引入库2.组件中使用3.页面效果三、总结前言项目中需要实现动态生成表单，经过调研，决定使用form-create插件来实现，非常简单，带大家了解一下一、form-create是什么？form-create是一个通过JSON生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持element-ui、iview、ant-design3个UI框架，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以
2021-11-12 15:33:04
4312
原创 nrm安装及使用
一、概述nrm(npm registry manager )是npm的镜像源管理工具，使用这个就可以快速地在 npm 源之间切换。二、全局安装npm install -g nrm三、查看所有源nrm ls四、新增源nrm add ，其中reigstry为源名，url为源的路径。六、切换源nrm use ‘名称’nrm use test...
2021-09-22 10:49:45
200
原创 iview实现表格行编辑
一、效果图二、实现思路1.写两个按钮，编辑和保存，用一个状态isEdit判断显示和隐藏<Button v-if="row.isEdit" type="success" @click="edit(row)">编辑</Button><Button v-else type="primary" @click="save(row)">保存</Button>2.使用render函数渲染两个组件，input和div，根据isEdit判断显示与隐藏{ t
2021-07-15 15:25:25
804
原创 听说CSDN推出一款浏览器助手，网友直呼YYDS，出于好奇心，今天带大家体验一下
前言：对于一名程序员来说，浏览器的重要性不言而喻，当你打开浏览器看到这样的界面，恐怕你很难不爱上它????上手体验：1.下载csdn浏览器助手插件csdn浏览器助手2.安装教程开启探索之旅，打造更酷浏览器：更多有趣的功能自己探索吧????????...
2021-06-28 15:14:26
756
原创 使用node.js+express搭建服务器，将vue打包后生成的dist目录在本地运行
文章目录前言一、nodejs+express搭建服务器二、搭建好的服务器中运行本地dist目录前言 vue项目打包后生成的dist目录如果直接在本地打开index.html,在浏览器中会报错，无法运行起来。如果想在本地运行，我们可以借助node.js+express搭建一个服务器，将打包后的文件部署在服务器上，就可以运行起来了。一、nodejs+express搭建服务器Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，
2021-04-29 17:04:50
2284
原创 vue中使用代码编辑器 Ace editor
一、介绍Ace是一个用JavaScript编写的可嵌入代码编辑器。它与Sublime，Vim和TextMate等本地编辑器的功能和性能相匹配。它可以轻松地嵌入任何网页和JavaScript应用程序中。二、安装npm install --save-dev vue2-ace-editor三、引入插件// 全局引入 main.jsimport Editor from 'vue2-ace-editor';Vue.use(Editor)//组件中引入import Editor from '
2021-03-25 19:32:06
5637
3
原创 iview Poptip组件，内容超出固定宽度不换行，解决方法
bug场景： 今天在做表格内容超出时,鼠标滑过进行tip提示，选用的是Poptip组件，设置了width='350'和word-wrap=true,输入过多数字或字母，发现内容不换行，打开控制器，发现设置的word-wrap属性没有生效![在这里插入图片描述](https://img-blog.csdnimg.cn/2021032217494538.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_a
2021-03-22 18:12:59
1332
原创 vue项目将json转化为格式化的json,展示在界面中，可展开
一、安装插件npm install vue-json-viewer --save二、组件中引入<script>import JsonViewer from 'vue-json-viewer'export default { components:{ JsonViewer }}</script>三、示例<template> <div class="testBox"> <div class="box"&g
2021-02-25 09:58:11
3108
4
原创 vue刷新页面的三种方法
一、使用location对象的reload()方法reload()方法用于刷新当前文档，类似于你浏览器上的刷新页面按钮。location.reload();二、使用编程式导航router.go 被用来作为后退/前进导航this.$router.go(0); //表示跳转到当前页面三、使用provide与inject1.在app.vue中写入如下代码<template> <div id="app"> <router-view v-if="isSho
2021-01-05 10:35:37
1614
1
原创 div宽度自动充满剩余空间
一、项目场景例如：页面头部分三部分，左侧宽度固定，中间宽度由文字撑开，右侧自动填充剩余宽度二、解决方案使用fflex-grow 属性用于设置或检索弹性盒子的扩展比率。。注意：如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用。<div class="box"> <div class="left"></div> <div class="center">宽度由内容撑开</div>
2020-12-31 16:04:25
4349
2
原创 vue 汉字转拼音字母
一、安装npm install js-pinyin --save二、使用script标签中引入<script>let pinyin = require('js-pinyin');export default { data(){ return{ } }, mounted(){ console.log(pinyin.getFullChars('博客'));//BoKe console.log(pinyin.getCamel
2020-12-09 16:25:13
4498
1
原创 vue阻止浏览器右键默认行为
一、在需要阻止的区域添加**@contextmenu.prevent**事件<div @contextmenu.prevent></div>二、如果存在父子级关系需要添加 @contextmenu.prevent.capture 事件修饰符capture给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素<div @contextmenu.prevent.capture> <p onclick="func2"> <s
2020-12-09 16:04:36
4715
3
原创 js过滤树形结构数据
一、使用递归遍历树形结构，根据条件过滤数据，返回过滤后的树形结构readNodes(nodes,arr=[]) { for (let item of nodes) { if (item.nodeClass !== 'Object') continue; let obj = {...item, children: []} arr.push(obj); if (item.children && item.children.length) this
2020-11-25 18:03:41
1943
原创 iview-admin三级菜单之间切换页面无法缓存
前言今天在使用iview-admin开发三级菜单的时候发现三级菜单之间切换页面无法缓存，于是去github上查看源码发现作者修复了相关的bug解决方案将src\components\parent-view\parent-view.vue代码修改为：<template> <keep-alive :include="cacheList" :exclude="notCacheName"> <router-view ref="child"/> </
2020-10-29 11:25:50
546
2
原创 moment获取指定月份的第一天和最后一天
1.获取指定月份的第一天moment(日期).startOf("month").format("YYYY-MM-DD");2.获取指定月份的最后一天moment(日期).endOf('month').format("YYYY-MM-DD");3.获取指定月份的上月份的第一天moment(日期).subtract(1, 'months').startOf('month').format('YYYY-MM-DD');4.获取指定月份的上月份的最后一天moment(日期).subtract(1
2020-10-13 13:46:08
23067
3
原创 js 判断一个数字是否包含小数，如果包含则保留两位，否则返回自身
isFlow(num){ if(!isNaN(num)){ return ( (num + '').indexOf('.') != -1 ) ? num.toFixed(2): num; }}需要的地方使用：console.log(isFlow(12.3456)) //12.34
2020-09-27 17:09:04
1314
原创 vue div高度自适应
1.动态style绑定<div :style="styObj"></div>2.data定义data(){ return{ styObj:{ height:0 } }}3.mounted执行window.addEventListener('resize', ()=>{ this.styObj.height=window.innerHeight-255+'px';});
2020-09-14 19:43:40
3077
原创 iview 表格高度自适应
1.动态设置height<Table :columns="columns" :data="tableData" highlight-row ref="table" :height="tableHeight"></Table>2.data中定义data(){ return{ tableHeight:0 }}3.monted执行mounted(){ this.tableHeight = window.innerHeight - this.$refs.table.
2020-09-14 18:46:46
2003
原创 vue 数字金额转大写（封装好的直接调用）
1.新建tools.js文件// 数字金额转大写export const numToCny=(money)=>{ // 汉字的数字 var cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'); // 基本单位 var cnIntRadice = new Array('', '拾', '佰', '仟'); // 对应整数部分扩展单位 var cnIntUnits = new Array('',
2020-09-14 15:52:23
2203
5
原创 iview实现表格可编辑
iview要实现table可编辑，使用render函数进行渲染，非常简单,希望对大家有所帮助。一、效果图如下：二、render函数使用方法h: vue Render函数的别名（全名 createElement）即 Render函数params： table 该行内容的对象props：设置创建的标签对象的属性style：设置创建的标签对象的样式on：为创建的标签绑定事件三、使用方法//创建一个表格<Table border :columns="columns" :data="
2020-09-11 20:06:19
3653
原创 react学习Day3:项目中按需引入antd
一、使用 npm 安装npm install antd --save二、按需导入npm install babel-plugin-import --save-dev在webpack.config.js中配置[ "import",{libraryName:"antd",style:'css'} ]三、组件中使用
2020-07-14 11:56:42
154
原创 react学习Day2:安装配置路由
一、react-dom和react-router-domReact-router提供了一些router的核心api,包括Router,Route,Switch等,但是它没有提供dom操作进行跳转的api.React-router-dom提供了BrowserRouter,Route,Link,Switch等api,可以通过dom的事件控制路由二、安装依赖npm install react-router-dom --save-dev三、App.js中引入路由import React from 'r
2020-07-13 14:00:27
129
1
原创 react学习Day1:安装react
一、使用 create-react-app 快速构建 React 开发环境create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。create-react-app 自动创建的项目是基于 Webpack + ES6 。执行以下命令创建项目：cnpm install -g create-react-appcreate-react-app my-app "my-app表示创建的应用名称"cd my-app/ npm st
2020-07-10 17:52:52
159
1
原创 解决vue两个表单切换时,校验规则失效问题
问题:两个表单切换,分别使用不同校验规则,校验规则失效解决思路:1.切换时使用resetField对该表单项进行重置，将其值重置为初始值并移除校验结果问题本质:即使两个表单绑定的值不同，但是浏览器在解析时，先解析第一个表单，此时表单上是没有绑定ref，之后再解析第二个表单时，浏览器发现这它的prop和第一个表单的prop一样，所以就认为这两个表单是同一个表单，就没有重新渲染，而ref本身是作为渲染结果被创建的，所以第二个表单没能成功绑定ref，验证就无法生效。loginTypeFlag() {
2020-07-01 11:37:48
2997
2
原创 限制input框只能输入数字
一、限制input框只能输入数字0-9，别的禁止输入.<el-input placeholder="请输入内容" v-model="maintainPeriod" oninput="value=value.replace(/[^\d]/g,'')" maxlength="2"></el-input>
2020-05-12 17:13:34
1047
原创 element-ui el-upload组件，上传完成后隐藏上传按钮
项目开发中要求最多只能上传3张图片，最后一张图片上传完成后隐藏上传按钮，解决方法如下：<el-upload :class="{uoloadSty:showBtnDealImg,disUoloadSty:noneBtnDealImg}" :action="dealImgUrl" list-type="picture-card" :on-preview="handleDealImgPreview" :on-remove="handleDealImgRemove" :on-success="s
2020-05-12 16:53:00
18074
8
原创 发送ajax请求时对特殊字符的处理
在项目开发中，发送ajax请求，给后台传的参数中包含&、#等特殊字符，接口请求失败。解决方法如下：一、使用encodeURIComponent转码encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ’ ( ) 。其他字符（比如 ：;/?????&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。
2020-05-12 16:14:38
1875
原创 element-ui 月份选择器，选择月份获取当前月的第一天和最后一天
1.html代码<el-date-picker class="pickerStyle" v-model="times" type="month" size="small" @change="changeMonth" placeholder="选择月"></el-date-picker>2.js代码changeMonth(value){ ...
2020-03-11 19:17:33
6341
2
原创 抖音上非常火的3D立方体旋转，纯CSS实现
一、效果图展示二、源码1.HTML<body> <div class="box"> <a href="#" class="bigBox"></a> <a href="#" class="bigBox"></a> <a href="#" class="bigBox"></a> &...
2019-12-20 16:52:23
1253
原创 vue项目引入全局css
1.在assets文件夹中创建全局样式表css文件2.在global.css文件中写入全局样式/* 全局样式表 */html,body{ width:100%; height:100%; margin:0; padding:0;}body,p,dl,dd,ul,ol,li,div,h1,h2,h3,h4,h5,h6,form,input,table,tr...
2019-11-18 14:02:40
4263
原创 js 去除数组中的空值
1.去除数组中的空值removeTrim(array){ for(var i = 0 ;i<array.length;i++){ if(array[i] == "" ){ array.splice(i,1); i= i-1; } } return array;},
2019-11-13 11:08:52
847
原创 让CSS flex布局最后一行列表左对齐的N种方法
请点击https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/
2019-10-15 14:48:33
812
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人