小方块的世界

Only file and data URLs are supported by the default ESM loader. Received protocol ‘node:‘

title: vue+iview项目中全局loading效果这篇文章主要介绍了vue+iview项目中全局loading效果的配置问题。问题描述vue项目中如果出现了接口嵌套的状况，外层的接口完成后loading效果就消失了，导致页面在请求到内部接口时没有任何效果问题分析看了源码发现这个Spin组件销毁组件时延迟了500ms，所以嵌套的接口在内部接口开始调用Spin后马上就要执行销毁操作了。另一个重要的原因是请求接口封装的api的url是固定的导致queue队列中只有一条数据。解决方法在每.

两个echarts学习实例

若依前端vue升级node记录

nvm是一个node的版本管理工具。nvm-windows下载安装过程首先要卸载电脑上已经有的node版本，注意需要卸载干净，再安装nvm一路 next 安装就可以了。安装完成后，先试下能不能用，如果不能使用按照下面的步骤：一般直接安装完成后是不能使用的，原因是要么安装路径有空格，也可能是没有用管理员运行cmd，参考下面步骤：报错： nvm use 14.9.0 exit status 1 xxx1. 修改 C:\Users\tom\AppData\Roaming\..

问题描述在img标签中如何引入图片路径如何动态修改图片地址在background属性中如何引入图片地址问题解决图片目录- src-- assets--- images在img标签中直接使用图片<img src="@/assets/image/banner.png">动态改变img标签的地址，比如轮播图：<img :src="imgList[activeIndex]">getImgList() { let arr = []

问题描述在使用elementUI开发，想要对dialog进行二次封装，可以实现一个类似v-model的功能。问题分析v-model其实就是一个语法糖，它实际上做了两个动作：绑定数据 value触发输入的input事件去修改value<input type="text" :value="name" @input="name=$event.target.value">对于dialog来说value就相当于一个控制显示隐藏的Boolean值，然后在关闭弹框的时候通过$emit触发i

需求描述vue-element-admin开发过程中需要对el-table行进行排序（即每一行可以上下移动），然后将排序后的数据传给后台更新数据。该表格无分页。问题分析方法一：可以采用在每条数据中加两个上下移动的按钮，每次移动一行。该方法实现简单，不过要连续移动的时候需要多次调用接口，交互效果不太好。方法二：可以采用table的拖拽功能实现行的一次性拖拽。该方法可以实现拖拽后调用接口，任意移动多行，但是需要依赖sortablejs仓库。问题解决综合考虑决定使用sortablejs实现该功能。

问题描述需求：el-select多选以tag展示时，超过显示长度以…省略号显示。注意：① 一个tag文字过长需要溢出隐藏，超出部分… 显示② 多个tag卡片溢出隐藏，超出部分…显示问题分析单行文字溢出隐藏overflow: hidden;text-overflow: ellipsis;white-space: nowrap;多行文字溢出隐藏-webkit-line-clamp // 是一个不规范的属性，它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。 为了实现该

问题描述element-admin中使用tab切换到不同的路由，发现每次切换tab路由都会执行两次生命周期<tabs :tabs="tabs" v-model="activeName" @on-switch="handleSwitch"> <components :is="activeName"></components></tabs>问题分析Vue官网上提供了一个动态组件 <component :is="c

问题描述el-table显示树形数据报错Error: for nested data item, row-key is requiredTypeError: this.$el.querySelectorAll is not a function问题分析后端返回的树形结构中没有返回id字段，所以需要手动遍历数据给数据添加id，el-table中默认设置row-key=“id”，没有id，又没有设置row-key的值这时就会报错。问题解决递归数据recursive(data) {

问题描述需求：table列表中文字溢出隐藏，并且隐藏的文字要使用title提示。问题分析需要一个title提示的指令或者方法在table列表的数据中使用这个指令或方法问题解决写了一个全局指令, 如果文字溢出了就提示title，如果文字没有溢出就不显示title。// 溢出隐藏显示title Vue.directive('title', { inserted: function (el, binding) { let padding = binding.value

问题描述element-admin中同时使用多个table，要求头部固定，给每个并列的table设置max-height，通过监听一侧的table滚动情况去控制另外一侧的table滚动。问题分析table分成两部分，左侧是一个table，右侧是有去掉头部的多个table组成（动态生成），想要实现双向滚动要完成3个任务。左侧滚动控制右侧同步滚动右侧一个滚动控制右侧所有同步滚动右侧滚动控制左侧同步滚动解决问题重点：通过mouseover事件来开启/停止当前鼠标所在区域的scroll事件，因为

问题描述elementui-admin项目中使用/deep/在chrome89+中出现样式混乱的问题公共样式文件中，使用/deep/，在main.js中引用，chrome89版本以下生效。chrome89+ /deep/选择器失效，导致样式错乱，覆盖的样式失效。问题分析Chrome 63将删除::shadow 和 /deep/在Chrome63之后，你将无法使用shadow-piercing 选择器， ::shadow 和 /deep/ 来设计(style) shadow root里面的内容。

这篇文章主要介绍了vuex中modules的基本用法。1. store文件结构- src- components- store -index.js -modules -app.js -bus.js2.1index.js中-手动引入modulesimport Vue from 'vue'import Vuex from 'vuex'import bus from './module/bus'import app from './modul

这篇文章主要介绍了如何在vue项目中按需加载动态组件。目录结构// view下有个page1文件夹，其中包含componensts组件和page1.vue，还有map.js存放page1.vue中动态加载componensts组件的映射关系- view-- page1--- components---- com1---- com2--- page1.vue--- map.js主文件page1.vue引入组件(常规引入组件)<template> <div cla

问题描述：<InputNumber min="9" v-model="num"><InputNumber/>输入任意数字都会变成9，我想输入12但是刚输入1输入框中的值就成了9,感觉是个InputNumber组件的bug？？解决问题：查看文档说明 限制最大值最小值只能设置 :active-change=“false” 失去焦点去设置限制修改后的：<Inp...

问题：ColorUI-UniApp 导航栏返回只能返回上一页,如何设置自定义的页面？解析：1.找到colorUi下的导航组件 cu-custom.vue2.定义一个自定义导航的url属性props: { // 定义一个导航url属性，如果有这个属性就使用这个跳转url url: { type: String, default: '' ...

后台提供下载接口，可传参数使用get方法window.location.href = '/api/xxx/xxx?params'window.open('/api/xxx/xxx?params')<a href="/api/xxx/xxx?params" download="excel.xls">export</a>get方法参数拼接/...

1.问题描述：在vue2.0+ 中做一个公用的评论组件，:key使用的时创建评论的时间，当加载更多的时候，会报错：Duplicate keys detected: '2019-01-24T07:15:35.000Z'.This may cause an update error. 2. 出问题的代码部分：&lt;li v-for="(item, i) in cmtList" :ke...

title: webpack学习这篇文章主要介绍了webpack使用的一个小demo，来学习如何利用webpack构建项目，以及打包js文件，通过安装loader模块打包css，less，sass等文件。1. nrm(牛肉面)的安装使用作用：提供了一些最常用的NPM包镜像地址，能够让我们快速的切换安装包时候的服务器地址；什么是镜像：原来包刚一开始是只存在于国外的NPM服务器，但是由于...

vue+iview 通过a标签实现文件下载方法一：注意: 如果下载的文件放在本地目录下，一定要将模板文件放到 public 目录下，否则由于权限问题找不到文件路径： 项目更目录–》public–》tpls–》下载模板.xls1.1 直接使用a标签 + download属性<a :href="downUrl" target="_blank" :download="downNm"&gt...

1. 如果一个页面有多个分页那么可以把每个page和pageSize放到一个对象中，如下：dataList: { name: 'dataList', // 方便取到dataList对象 id: null, // 如果需要通过id获取一个列表 fun: 'getDataList', // 获取列表的方法 total: 0, page: 1, page...

1.问题描述iview-admin项目中使用axios的post方法发送请求到后台，message中数据多的时候会出现报错，请求url超长，Request Url Too Long2.解决办法在服务端的httpd.conf文件中修改下请求url的默认长度就可以了...

title: iview的表单验证category:iviewtags:valid这篇文章时关于如何使用iview的form表单校验。主要学习如何使用form校验（以校验文字长度为例），以及如何动态添加校验规则。1.为需要校验的表单添加form标签<!--注意: ref/rules/model/prop等属性是必须的--><Form res="foemR...

这篇文章主要介绍了iview的table组件中使用选择框，日期，可编辑表格，超链接等组件。1.select选择组件// tableColumn数组响应对象需要传入一个固定的option数组，如果该数组是异步动态生成的该组件不能正常渲染，因为在获取option数组之前table渲染时option是undefined。supportSelect(item) { item.rende...

这篇文章主要介绍如何在webpack中使用vue。1. 基于webpack-study构建的项目框架在webpack中使用vue1.1 将webpack-study中除了node_modules文件夹都拷贝到新的项目中，src目录下只保留main.js和index.html1.2 安装vue# 重新安装所有依赖包npm i# 将vue安装到项目的依赖中npm i vue ...