![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 51
莫逸雪
戒骄戒躁,面包会有的,牛奶也会有的。
展开
-
css3之calc()设置无效
测试:1.height:calc(100vh-152); //无效2.height:calc(100vh-152px); //无效3.height:calc(100vh - 152px); // 终于起效结论:1.必须加上单位2.必须在运算符左右用空格隔开原创 2021-06-22 21:24:24 · 781 阅读 · 0 评论 -
Plop-一个小而美的脚手架工具
功能:用于自动化创建及项目中特定同类型的文件具体使用:将plop模块作为项目开发依赖安装yarn add plop --dev在项目根目录下创建一个plopfile.js在plop file.js文件中定义脚手架任务举例://Plop入口文件 需要导出一个函数//此函数接收一个plop对象,用于创建生成器任务module.exports = plop => { // 第一个参数生成器的名字,第二个参数生成器的描述 plop.setGenerator('com原创 2021-01-19 22:42:25 · 285 阅读 · 0 评论 -
typeof和instanceof区别
—typeof因为 ECMAScript 的类型系统是松散的,所以需要一种手段来确定任意变量的数据类型。typeof 操作符就是为此而生的。对一个值使用 typeof 操作符会返回下列字符串之一:"undefined"表示值未定义;"boolean"表示值为布尔值;"string"表示值为字符串;"number"表示值为数值;"object"表示值为对象(而不是函数)或 null;"function"表示值为函数;"symbol"表示值为符号。下面是使用 typeof 操作符的例子:原创 2020-12-16 23:47:41 · 1471 阅读 · 1 评论 -
element tree封装为可控制只可选末级或都可选(2)
接上一篇文章改点需求要求:把只能选择一个末级节点时,其他设置为不可选的地方改为可以再选择其他节点只不过替换掉原来的对节点checkedbox的选择.修改的封装组件的部分method代码: //点击节点触发 nodeClick(data) { if (!this.checkBoxFlag) { this.checkData = [] this.checkData = data } }, //获取原创 2020-12-16 10:19:21 · 597 阅读 · 0 评论 -
element tree封装为可控制只可选末级或都可选(1)
要求一:只可选择末级节点的数据,所以采用了只有末级节点有checkdbox来控制.要求二:选择末级节点情况下,是控制单选的,采用给每个节点加disabled属性,已选择时其他设置为不可选.要求三:后台传的数据(共三级节点,有的只有二级影响checkedbox展示)需要拿到数据后进行过滤要求四:实用性强,还需要满足节点都可选的业务,也就是说需要父组件传个flag值控制是都可选还是只有末节点可以传封装的组件代码:<template> <vab-dialog ref="di原创 2020-12-16 09:31:17 · 2283 阅读 · 0 评论 -
使用iconfont快速加图标
网址:https://www.iconfont.cn/今日被要求加几个图标,表示退出登录、消息、待办事项、头像图标.拿到任务先思考一下怎么做合适,参考了一下大家意见都觉得iconfront最适合不过了.使用阿里图标呢,有两种方式第一种,直接下载:可下载svg\png等,还可以调节大小,颜色等信息,也是很方便的.也支持多个一起下载,先添加至小车,后下载.第二种:1.把图标选择好加入小车,在小车里添加至项目2.根据所需可单独编辑图标设置大小颜色,图标格式.然后下载至本地3.下载的压缩包,解压后原创 2020-12-05 11:14:10 · 400 阅读 · 0 评论 -
安装jquery
npm i jquery原创 2020-11-29 22:51:31 · 348 阅读 · 0 评论 -
element-ui dialog设置为点击弹窗以外的区域不关闭弹窗
第一种:在el-dialog标签中添加:close-on-click-modal="false"即可<el-dialog title="标题" :close-on-click-modal="false" :visible.sync="dialogEnrol" width="30%"> 弹窗内容</el-dialog>第二种:全局设置在mian.js里面:import ElementUI from 'element-ui';// 修改 el-dialog 默认点击原创 2020-11-24 09:38:45 · 6398 阅读 · 2 评论 -
本地svn项目用webstorm打开右上角没有提交图标
1.点击VCS下的Enable Version Control Integretion。2.选择svn就出来啦~原创 2020-11-20 12:39:45 · 997 阅读 · 0 评论 -
css之背景background
1.背景颜色background-color: red;一般情况下元素背景颜色默认值是transparent(透明),我们也可以手动指定背景颜色为透明色.2.背景图片实际开发中常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置(精灵图也是一种运用场景)background-color: none | url(url);3.背景平铺background-repeat: repeat | none-repeat | repeat-x | repeat-y;原创 2020-11-16 01:18:17 · 231 阅读 · 0 评论 -
css复合选择器
(1)后代选择器又称为包含选择器,可以选择父元素里面的子元素.其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔,当标签发生嵌套时,内层标签就成为外层标签的后代. /* 元素1 元素2 {样式声明} 元素2为元素1后代,元素2可以是儿子也可以是孙子 */ol li {color: red;}(2)子元素选择器(子选择器)只能选择作为某元素的最近一级子元素(亲儿子)./* 元素1> 元素2 {样式声明}*/div> p {样式声明} /*选择div里面所有最原创 2020-11-15 13:39:34 · 300 阅读 · 0 评论 -
<a>标签易忽视的两个使用
1.文件下载<a href="base.zip"></a>此处那本地压缩包测试,其他格式的文件也是可以的,文件下载用到的就是这个属性.例如之前写的一篇文章就是用的这个属性的作用PDF文件下载2.跳转本页面的某个位置<a href="#cat">猫咪</a><!--此处省略很多代码--><h4 id="cat">猫咪简介</h4>href中由#加要跳转部分id名称,点击即可跳转到id地方...原创 2020-11-14 00:02:11 · 72 阅读 · 0 评论 -
vue+element ui复杂表单的验证
1.应用场景:一个form表单对象中又包含好几个对象,其中包含联系人对象2.表单: newaddForm: { code: "", dwmc: "", dwdd: "", sjbm: "", zxyp: "", qyxz: "", khgxrs: [{}], cjhzdws: [{}], tjlshzs: [{}], },3.验证规则:正常原创 2020-10-29 16:32:58 · 1347 阅读 · 1 评论 -
父组件调用弹窗子组件
封装的子组件代码:<template> <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body @close="handleClose"> <el-upload ref="upload" :limit="1" accept=".txt, .docx, .bpmn, .bar, .zip" :headers="upload.headers" :原创 2020-10-24 23:55:45 · 274 阅读 · 0 评论 -
父组件调用弹窗子组件
父组件:<template> <div> <el-button @click="show">按钮</el-button> <!-- 弹框子组件 --><!-- :addOrUpdateVisible为子附件props内的名字,先写props再调用--><!-- changeShow为子组件emit的方法名字--> <mydialog :addOrUpdateVisible=原创 2020-09-12 18:43:30 · 1665 阅读 · 0 评论 -
vue非父子组件传值
1.单独的事件中心管理组件间的通信var eventHub = new Vue()2.监听事件与销毁事件eventHub.$on('add-todo',addTodo)eventHub.$off('add-todo')举例:(1)事件中心(js文件)import Vue from 'vue'const hub = new Vue()export default hub(2)组件A<template> <div> {{value2}} &l原创 2020-09-03 23:06:55 · 474 阅读 · 0 评论 -
修改element ui中的样式
方法一:去掉scopedscoped会把央视局限在当前页面,无法覆盖element-ui的原有样式。方法二 使用 /deep/.homePage /deep/ .el-main {padding: 0;}.homePage为我们要修改组件类名的父级组件样式类名。.el-main为我们要修改组件的样式。或者/deep/ .el-form-item__content{margin-left: 140px !important;}...原创 2020-07-11 23:16:04 · 1214 阅读 · 0 评论 -
vue中引入bootstrap
首先安装bootstrapnpm install bootstrap --save再执行一下下面内容,不然容易报错npm install --save popper.js在main.js中添加下面内容import 'bootstrap/dist/css/bootstrap.min.css'import 'bootstrap/dist/js/bootstrap.min'验证安装情况:写一句简单的bootstrap用例,Ctrl+鼠标点击如果有提示来源说明安装成功。未成功提示如下:原创 2020-07-10 13:00:09 · 880 阅读 · 0 评论 -
col-md-offset-* 设置完不起作用
bootstrap栅格化设置col-md-offset-* 在今天使用时发现不起作用,扒拉一下官网发现原来4.0以后已经做了修改。offset-4或者offset-md-4都是可以的代码: <div class="row"> <div class="offset-md-3 col-md-3">col-md-3</div> <div class="offset-3 col-md-3">col-md-3原创 2020-07-09 23:22:10 · 2172 阅读 · 2 评论 -
前端实现PDF文件下载的两种方式
方式一:使用html2canvas和jspdf插件实现该方式是通过html2canvas将HTML页面转换成图片,然后再通过jspdf将图片的base64生成为pdf文件。实现步骤如下:1,下载插件模块npm install html2canvas jspdf --save2,定义功能实现方法在项目工具方法存放文件夹utils中创建htmlToPdf.js文件,代码如下:// 导出页面为PDF格式import html2Canvas from 'html2canvas'import JsP原创 2020-07-09 23:09:35 · 29848 阅读 · 13 评论 -
生成验证码图片 vue
接上一篇生成验证码文章,经修改生成了一个简单验证码,供大家参考identify.vue组件(主要用于定义参数和方法)<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div></template><script>export原创 2020-07-09 22:59:46 · 533 阅读 · 0 评论 -
echarts设置hover提示框
1.写的位置:第一种:默认方式 tooltip: { trigger: 'axis' },加上这句就显示提示框,效果图如下:第二种:自定义显示形式 tooltip: { trigger: 'axis', formatter: '{b0}<br/>{a0}: {c0}家<br/>{a1}: {c1}元' }效果图如下:这种方式面临的问题:解决(有点暴力,后期想到其他方式再更新):原创 2020-06-13 13:28:01 · 6168 阅读 · 0 评论