随笔分类 -  vue

vue2之使用provide/inject父子祖孙组件之间的传值
摘要：官网概念：provide/inject需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。 使用方法：在父组件中使用provide传值，在子组件中用inject接收 // 父组件 data(){ return { name:'阔落' 阅读全文
posted @ 2023-04-19 10:55 络角阔落 阅读(489) 评论(0) 推荐(0)
vue2之跨页面调用和传参
摘要：A页面调用B页面的方法 不涉及父子组件时，调用的方式，使用this.$root.$emit()发送消息，进行调用， /** * 打开在全局组件中的弹框 */ handleOpenModal(){ this.$root.$emit('toolbar', { type: 'modal', fun: th 阅读全文
posted @ 2023-04-19 10:39 络角阔落 阅读(355) 评论(0) 推荐(0)
事件监听——拖拽事件drag
摘要：在项目中遇到需要拖拽元素的需求，一开始考虑的是鼠标的mousedown、mouseup、mousemove等事件组合，之后研究发现元素本身存在drag事件，可以直接调用监听： /** * 添加监听事件，实现拖拽功能 */ handleAddDomListen() { //具体拖拽元素 const R 阅读全文
posted @ 2023-04-19 10:24 络角阔落 阅读(659) 评论(0) 推荐(0)
vue-改变之后页面不显示
摘要：<block v-for="(item, index) in level.indexValue" :key="index" > <template v-if="item.type 'text' "> <text>{{ item.value }}</text> </template> <templat 阅读全文
posted @ 2021-01-05 09:55 络角阔落 阅读(1071) 评论(0) 推荐(0)
vue-js-跳出forEach循环
摘要：发现foreach时使用break或return无法跳出循环。经过查阅资料，发现两种方法可以跳出循环，在此记录 方法一：使用try{...}catch(e){...} try{ var array = ["first","second","third","fourth"]; array.forEac 阅读全文
posted @ 2020-11-26 10:12 络角阔落 阅读(10283) 评论(0) 推荐(0)
vue-iView框架-Table中嵌入输入框、下拉框等
摘要：{ key: 'name', renderHeader: (h) => { return h('div', [ h( 'span', { style: { color: 'red', }, class: 'mr-5', }, '*' ), h('span', '步骤名称'), ]); }, rend 阅读全文
posted @ 2020-11-26 10:03 络角阔落 阅读(1357) 评论(0) 推荐(0)
iview框架-Upload组件 format和accept属性区别和使用方法
摘要：原先只写了format属性，限制了文件上传的类型，这个限制是在选择之后上传之前进行判断限制，但是测试要求，在根源解决问题，不然其他文件可以选择，如 所以根据应该使用accept属性更为合理。 /** * 接受上传的文件类型 浏览器过滤 */ accept: { type: String, defau 阅读全文
posted @ 2020-11-13 11:02 络角阔落 阅读(3246) 评论(0) 推荐(0)
vue 返回时带参数问题
摘要：百度了一些办法，用$emit暂存，到返回后的页面去接收，一直得不到数据。方法如下： 1. 声明一个空的Vue模块eventBus import Vue from 'vue'/** * 定义空的vue实例，作为 eventbus实现非父子组件之间的通信(vue2.x中去掉了broadcast) */ 阅读全文
posted @ 2020-10-28 16:11 络角阔落 阅读(4072) 评论(0) 推荐(0)
vue 路由传参为对象时如何处理？
摘要：通过转换传递json字符串来实现传递，接收时再转换回来。 传递时代码： let strItem = JSON.stringify(item); this.$router.push(`/detail/` + encodeURIComponent(strItem)); 接收时的处理： let info 阅读全文
posted @ 2020-10-22 14:25 络角阔落 阅读(3390) 评论(0) 推荐(0)