![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
莫逸雪
戒骄戒躁,面包会有的,牛奶也会有的。
展开
-
vue 元素拖拽
vue 元素拖拽原创 2022-09-25 12:04:55 · 1015 阅读 · 1 评论 -
element tree封装为可控制只可选末级或都可选(2)
接上一篇文章改点需求要求:把只能选择一个末级节点时,其他设置为不可选的地方改为可以再选择其他节点只不过替换掉原来的对节点checkedbox的选择.修改的封装组件的部分method代码: //点击节点触发 nodeClick(data) { if (!this.checkBoxFlag) { this.checkData = [] this.checkData = data } }, //获取原创 2020-12-16 10:19:21 · 620 阅读 · 0 评论 -
element tree封装为可控制只可选末级或都可选(1)
要求一:只可选择末级节点的数据,所以采用了只有末级节点有checkdbox来控制.要求二:选择末级节点情况下,是控制单选的,采用给每个节点加disabled属性,已选择时其他设置为不可选.要求三:后台传的数据(共三级节点,有的只有二级影响checkedbox展示)需要拿到数据后进行过滤要求四:实用性强,还需要满足节点都可选的业务,也就是说需要父组件传个flag值控制是都可选还是只有末节点可以传封装的组件代码:<template> <vab-dialog ref="di原创 2020-12-16 09:31:17 · 2331 阅读 · 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 · 6511 阅读 · 2 评论 -
vue+element ui复杂表单的验证
1.应用场景:一个form表单对象中又包含好几个对象,其中包含联系人对象2.表单: newaddForm: { code: "", dwmc: "", dwdd: "", sjbm: "", zxyp: "", qyxz: "", khgxrs: [{}], cjhzdws: [{}], tjlshzs: [{}], },3.验证规则:正常原创 2020-10-29 16:32:58 · 1353 阅读 · 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 · 277 阅读 · 0 评论 -
父组件调用弹窗子组件
父组件:<template> <div> <el-button @click="show">按钮</el-button> <!-- 弹框子组件 --><!-- :addOrUpdateVisible为子附件props内的名字,先写props再调用--><!-- changeShow为子组件emit的方法名字--> <mydialog :addOrUpdateVisible=原创 2020-09-12 18:43:30 · 1673 阅读 · 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 · 483 阅读 · 0 评论 -
vue中使用echarts
安装echarts依赖npm install echarts -S或者使用淘宝的镜像npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm install echarts -S创建图表首先需要全局引入在main.js中// 引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echartsvue中代码:<template&g原创 2020-08-17 21:50:58 · 246 阅读 · 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 · 1220 阅读 · 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 · 881 阅读 · 0 评论 -
前端实现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 · 30111 阅读 · 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 · 538 阅读 · 0 评论 -
验证码(identify)插件 vue
identify是一款使用使用canvas来生成图形验证码的vue插件。代码:identify.vue组件(主要用于定义参数和方法)<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div></template><script&g原创 2020-07-09 22:51:56 · 2977 阅读 · 0 评论 -
Cannot read property getAttribute of null
vue中需要将调用的echartsoption放在mounted生成周期函数中:原创 2020-06-04 11:40:35 · 2298 阅读 · 0 评论 -
Vue刷新页面的三种方式
我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面。如:用户登录成功、增加、删除、更新等。1.原始方法:location.reload();2.vue自带的路由跳转:this.$router.go(0);用过的人都知道,前两者都是强制刷新页面,会出现短暂的闪烁,用户体验效果不好。所以,我们选择第三种方式:3.首先在App里面写下如下代码:(局部刷新)<template> <div id="app">转载 2020-05-10 17:12:49 · 1264 阅读 · 0 评论 -
Failed to resolve loader: less-loader You may need to install it.
出现这个错误需要安装less与less_loader开发依赖原创 2020-05-02 20:58:24 · 1970 阅读 · 0 评论 -
VUE初始化组件的基本结构
<!--先通过template定义组件的UI结构--><template> <div> 商品列表 </div></template><!--定义当前组件的行为--><script>export default { // 私有数据节点 data() { return {} ...原创 2020-04-29 23:01:46 · 374 阅读 · 0 评论 -
前端项目初始化步骤(VUE)
A.安装vue脚手架1.先安装nodenode -v,如果出现相应的版本号,则说明安装成功。2.安装vue(如果cmd窗口很慢或者没反应请跳到第三步,如果成功直接B步骤)npm install -g @vue/cli# ORyarn global add @vue/cli3.安装淘宝镜像npm install -g cnpm --registry=https://registry...原创 2020-04-21 20:57:52 · 1286 阅读 · 2 评论