莫逸雪的博客

vue 元素拖拽

接上一篇文章改点需求要求:把只能选择一个末级节点时,其他设置为不可选的地方改为可以再选择其他节点只不过替换掉原来的对节点checkedbox的选择.修改的封装组件的部分method代码: //点击节点触发 nodeClick(data) { if (!this.checkBoxFlag) { this.checkData = [] this.checkData = data } }, //获取

要求一:只可选择末级节点的数据,所以采用了只有末级节点有checkdbox来控制.要求二:选择末级节点情况下,是控制单选的,采用给每个节点加disabled属性,已选择时其他设置为不可选.要求三:后台传的数据(共三级节点,有的只有二级影响checkedbox展示)需要拿到数据后进行过滤要求四:实用性强,还需要满足节点都可选的业务,也就是说需要父组件传个flag值控制是都可选还是只有末节点可以传封装的组件代码:<template> <vab-dialog ref="di

第一种:在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 默认点击

1.应用场景：一个form表单对象中又包含好几个对象，其中包含联系人对象2.表单： newaddForm: { code: "", dwmc: "", dwdd: "", sjbm: "", zxyp: "", qyxz: "", khgxrs: [{}], cjhzdws: [{}], tjlshzs: [{}], },3.验证规则：正常

封装的子组件代码：<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" :

父组件：<template> <div> <el-button @click="show">按钮</el-button> <!-- 弹框子组件 --><!-- :addOrUpdateVisible为子附件props内的名字，先写props再调用--><!-- changeShow为子组件emit的方法名字--> <mydialog :addOrUpdateVisible=

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

安装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

方法一：去掉scopedscoped会把央视局限在当前页面，无法覆盖element-ui的原有样式。方法二 使用 /deep/.homePage /deep/ .el-main {padding: 0;}.homePage为我们要修改组件类名的父级组件样式类名。.el-main为我们要修改组件的样式。或者/deep/ .el-form-item__content{margin-left: 140px !important;}...

首先安装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+鼠标点击如果有提示来源说明安装成功。未成功提示如下：

方式一：使用html2canvas和jspdf插件实现该方式是通过html2canvas将HTML页面转换成图片，然后再通过jspdf将图片的base64生成为pdf文件。实现步骤如下：1,下载插件模块npm install html2canvas jspdf --save2,定义功能实现方法在项目工具方法存放文件夹utils中创建htmlToPdf.js文件，代码如下：// 导出页面为PDF格式import html2Canvas from 'html2canvas'import JsP

接上一篇生成验证码文章，经修改生成了一个简单验证码，供大家参考identify.vue组件（主要用于定义参数和方法）<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div></template><script>export

identify是一款使用使用canvas来生成图形验证码的vue插件。代码：identify.vue组件（主要用于定义参数和方法）<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div></template><script&g

vue中需要将调用的echartsoption放在mounted生成周期函数中：

我们在写项目的时候，经常会遇到，用户执行完某个动作，改变了某些状态，需要重新刷新页面，以此来重新渲染页面。如：用户登录成功、增加、删除、更新等。1.原始方法：location.reload();2.vue自带的路由跳转：this.$router.go(0);用过的人都知道，前两者都是强制刷新页面，会出现短暂的闪烁，用户体验效果不好。所以，我们选择第三种方式：3.首先在App里面写下如下代码：(局部刷新)<template> <div id="app">

出现这个错误需要安装less与less_loader开发依赖

<!--先通过template定义组件的UI结构--><template> <div> 商品列表 </div></template><!--定义当前组件的行为--><script>export default { // 私有数据节点 data() { return {} ...

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...