- 博客(77)
- 收藏
- 关注
RSS订阅原创 VUE 组件重新渲染（组件重载）无缝滚动切换重新从顶部开始播放
v-if可以实现 true (加载)和false(卸载)无缝滚动切换重新从顶部开始播放
2022-08-23 17:19:00
984
3
原创 vue项目中进行svg图标组件封装及配置(全局引入)
2、创建一个自定义组件 具体代码：3.在根目录创建icons，新建一个index.js（全局引入），和新建一个svg目录，专门放svg图片（阿里的iconfont可以下载svg图片） index.js的具体代码如下： 4.全局引入main.js进行引入 5.项目需要进行配置vue.config.js6.项目中进行使用组件.........
2022-07-04 12:06:36
1672
原创 el-table设置高度自适应，动态设置height
当遇到不同浏览器不同屏幕尺寸时，想让el-table有个自适应的高度。只需三个步骤即可实现。1、 首先在el-table中动态绑定一个高度 :height="tableHeight", 并在data中声明tableHeight。 2、 声明一个方法来计算el-table高度3、 在created中调用该方法并给mounted挂载window.onresize事件4、 最后保存，可以通过修改 tableH = 210; 来修改距离页面下方的高度查看效果。...
2022-06-16 17:57:52
14889
1
原创 Element-UI 日期选择器 选择时间范围在一个月内
本文介绍将elementui的el-date-picker再次封装并设置选择范围在一个月内封装的组件date-picker.vue调用组件本文用到了一个自己给date封装的方法,该方法可以将new Date()的时间转换为指定格式，具体如下:utils.js（该js文件已经在main.js中全局引入）...
2022-06-16 17:47:45
4186
原创 git 代码写完发现开发分支错了怎么解决
git stash //将修改的代码暂存到stashgit checkout [targetbranch] //切换到正确的分支git stash pop // 从stash中取出暂存的代码修改
2022-05-06 14:28:05
492
原创 CSS 绘制三角形的方法
.block { display: inline-block; height: 100px; width: 100px; background: blue; /* polygon 定义多边形， ()里面的每对参数表示多边形的顶点坐标（X,Y），也就是连接点 */ clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);}clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);注：左.
2022-04-09 20:55:02
157
原创 git常用命令
git add ./git commit -m "这里是对修改的描述"git pushgit pullgit remote update origin --prunegit branch -agit checkout -b 本地分支名 origin/远程分支名git checkout -- 'src/views/personnel/attendance.vue' // 放弃指定文件的修改...
2022-03-25 19:43:01
475
原创 小程序地址传参有长度限制怎么处理
小程序传参通过JSON.parse转换参数时报错信息如下：SyntaxError: Unexpected end of JSON input at JSON.parse (<anonymous>)解决办法如下：/**1.在准备传参跳转的页面**/let competition = {}//这是一个很长的很多数据的对象//转成String编码一下competition = encodeURIComponent(JSON.stringify(competition))wx.n..
2022-03-25 12:24:22
1449
1
原创 Vue实现组件信息的缓存
<keep-alive> <router-view></router-view></keep-alive><!-- 这里是需要keepalive的 --><keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><!-- 这里不会被keepalive --&.
2021-11-15 10:57:38
233
原创 input防止输入负数，禁止输入空格
使用replace处理一下<input type="number" oninput="value=value.replace('-', '')" />
2021-07-17 14:56:50
687
原创 CSS3实现闪烁动画效果
给class属性名为className的元素添加闪烁动画效果.className{ -webkit-animation: twinkling 1s infinite ease-in-out}.animated{ -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both}@-webk...
2021-07-01 17:35:01
1115
原创 Element UI 中国省市区级联数据安装element-china-area-data
Element UI 中国省市区级联数据安装npm install element-china-area-data -S在线示例地址在此，网页打开会比较慢使用import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'服务端用法：const { provinceA
2021-05-19 17:25:53
1494
原创 vue调试工具——vue-devtools安装及使用
本文主要介绍 vue的调试工具vue-devtools 的安装和使用安装:1.到github下载：（！下载一定要记得是master主分支的代码，默认克隆后进入的是dev分支，执行npm run build会报错，执行git checkout master切换到master主分支）git clone https://github.com/vuejs/vue-devtools2.在vue-devtools目录下安装依赖包 1 2 cd vue-...
2021-03-05 09:14:52
1878
1
原创 vuex详细的入门文档
如果你在使用vue.js, 那么我想你可能会对 vue 组件之间的通信感到崩溃 。我在使用基于 vue.js 2.0 的UI框架ElementUI开发网站的时候 , 就遇到了这种问题 : 一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 但是表单 ( 子组件 ) 里的数据和页面 ( 父组件 ) 按钮交互的时候 , 它们之间的通讯很麻烦 :<!--父组件中引入子组件--><template> <div> <a href="ja...
2021-01-15 16:50:58
115
原创 js实现页面视频监控全屏
全屏效果为传入div元素全屏：代码块<html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <body> <div style="margin:0 auto;height:600px;width:700px;"> <button id="btn">js控制页面的全屏展示和退出全屏显示</button> <div i
2020-12-17 14:14:06
1537
原创 vue组件中使用elementUI的el-table组件的(row-class-name)动态修改每一行的样式无效问题
问题描述vue项目中，需要给vue表格中的每一行加入自定义的样式，根据文档给<el-table>组件加上row-class-name属性即可，直接加入该属性并且在当前vue组件中配置对应class发现样式并没有生效。解决方案一、使用全局属性在elementUI中，row-class-name、row-style、cell-class-name等属性要想生效必须使用全局class...
2020-01-15 16:48:09
4356
原创 vue中在组件上使用@click事件无效
.native修饰符el-row(:gutter="20") el-col(@click.native="testClick(index)") i(:class='item.iconClass',style='font-size:64px').iconfont p(style='margin:0') {{item.name}} p ￥{...
2020-01-14 16:22:52
2246
原创 vue使用qrcodejs2（生成二维码）
一、cnpm install qrcodejs2 --save二、使用页面 importQRcode form 'qrcodejs2'三、HTML中<div id="qrcode"></div> //生成二维码的位置methods中qrcode() { let qrcode = new QRCode('qrcode', { ...
2019-10-16 09:29:31
993
原创 在vue项目中正确使用iconfont的方法
1、打开iconFont官网选择自己喜欢的图标，并且添加购物车2、点击购物车，添加至项目3、下载至本地4、把我们下载好的文件iconfont.css和iconfont.ttf放到项目assets文件夹下（可创建一个css文件或iconfont文件）5、在main.js中引入iconfont.css样式import './assets/iconfont/iconfont...
2019-09-17 11:06:14
1391
原创 IE不支持vuex的问题
想要在IE中使用Vuex，还得需要babel-polyfill的支持。安裝npm install --save babel-polyfill設定開啟 ./build/webpack.base.conf.js，在下面的 entry 中加入一行程式碼 polyfill: 'babel-polyfill'將下面程式碼：entry: { app: './src/main....
2019-07-07 22:50:22
704
原创 IE6——png图片的修复
1.在IE6中对图片格式png24支持度不高，如果使用的图片格式是png24，则会导致透明效果无法正常显示2.解决方法：1.可以使用png8来代替png24（直接利用ps修改图片格式；文件目录下的-存储为web所用格式），即可解决问题，但是使用png8代替png24以后，图片的清晰图会有所下降；2.使用JavaScript来解决该问题，需要向页面中引入一个外部的JavaScript文件，然...
2019-07-03 20:47:41
544
原创 hr标签---中心线：设置颜色
可以看到默认的hr是一条灰色的一个像素的，通栏的实线。我要把它的颜色变成蓝色的。 说到颜色变化，大家首先想到的都是color,但是color一般都是针对字体颜色的，线条需要用background-color, 但是单纯的将背景色设为蓝色是不够的，线条还是灰色的，我们需要给线条一个高度，也就是我们需要的1px 这样设置完后，在浏览器中可以看到线条变...
2019-06-14 18:01:49
7639
3
原创 CSS盒子模型——标准与怪异
盒子模型众所周知，这里先简单介绍一下。可以看到，在标准盒模型下，width和height是内容区域即content的width和height。而盒子总宽度为在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)而IE盒模型或怪异盒模型显而易见的区别就是，width和height除了content区域外，还包含p...
2019-05-29 13:17:02
507
原创 移动端适配 - HTML meta viewport属性说明
利用meta标签对viewport进行控制 移动设备默认的viewport是layout viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。这就使用meta标签来设置移动端显示的比例。 我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中：<meta name="viewport" conte...
2019-05-28 15:51:47
2015
转载 VUE中演示v-for为什么要加key
说到这个问题想必要举个例子了image没有key的情况： <div id="app"> <div> <input type="text" v-model="name"> <button @click="add">添加</button> </div> <...
2019-05-18 15:37:52
466
原创 npm 与vue-cli 构建vue 项目
使用npm 与vue-cli 构建vue 项目第一步：安装运行环境（node与npm）nodeJ官网：http://nodejs.cn/下载安装包( 安装)安装完成后，需要检测是否安装成功使用命令行cmd 打开dos 黑窗口，运行 node -v 和 npm –v，出现版号说明安装成功注（npm 是node自带的，在安装node时已经安装了）如何升级npm 的版本...
2019-05-16 15:56:22
2199
原创 vue关于父组件调用子组件的方法（一个组件调用另一个组件的方法）
我们都知道通过$ref可以获取到某个DOM，但是它也可以用来获取子组件的实例，调用子组件的方法例：子组件：<template> <div></div></template><script> export default { methods:{ childMethod(flag) { ...
2019-03-05 18:03:53
5440
原创 【ES6】var、let、const三者的区别
ECMAScript是一个国际通过的标准化脚本语言。JavaScript由ECMAScript和DOM、BOM三者组成。可以简单理解为：ECMAScript是JavaScript的语言规范，JavaScript是ECMAScript的实现和扩展。1. 块级作用域 {}ES5 中作用域有：全局作用域、函数作用域。没有块作用域的概念。ES6 中新增了块级作用...
2019-03-04 21:40:59
190
原创 vue路由地址url取消#符号
1、路由代码中添加mode：'history'export default new Router({ mode:'history', routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/luda', ...
2019-03-01 13:57:51
1242
1
原创 window location下的属性说明
属性 说明 window.location.href 完整的url window.location.protocol 协议 window.location.hostname 主机名 window.location.host...
2019-02-27 17:08:16
296
原创 阿拉伯数字跟中文汉字互转js
阿拉伯数字–>中文汉字 代码如下：<script type="text/javascript"> var chnNumChar = ["零","一","二","三","四","五","六","七","八","九"];
2019-01-22 09:30:14
1598
原创 Intellij IDEA Debug调试技巧
1、这里以一个web工程为例，点击图中按钮开始运行web工程。 2、设置断点 3、使用postman发送http请求 4、请求发送之后会自动跳到断点处，并且在断点之前会有数据结果显示 5、按F8 在 Debug 模式下，进入下一步，如果当前行断点是一个方法，则不进入当前方法体内，跳到下一条执行语句。 6、按F7在 Debug 模式下，进入下一...
2018-12-25 16:36:25
251
原创 js阻止事件冒泡的方法
一、冒泡事件简介当我们点击一个控件的时候，如果包括这个控件的父控件也有click事件，则会继续执行。方法一：event.stopPropagation( );例如：<div> <p>段落文本内容 <input type="button" value="点击" /> </p></div&g
2018-12-06 18:25:25
513
原创 解决div里面img图片下方有空白的问题
html代码：<body> <header>header</header> <div class="banner"> /* 插入一张banner图片 */ <img src="images/banner4.jpg" alt="banner"> <
2018-12-06 11:17:58
1108
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人