qwyio的博客

原创 element ui 动态添加表单实现验证规则

动态增减表单验证规则的实现和思路，简单实现表单的增删 ，并且对新增表单项及默认表单项进行必填项校验

原创 element ui 点击NavMenu 导航菜单 is-active 类名丢失，高亮不显示

原创 css 设置元素样式隔行变色

:nth-child() 选择器，该选择器选取父元素的第 N 个子元素，与类型无关。odd 奇数行even 偶数行效果图页面<template> <div class="page-container"> <transition-group tag="ul" appear> <li v-for="item in 10" :key="item"> {{ item % 2 == 0 ...

原创 uniapp 组件内onLoad里调用的方法不执行

问题背景：考虑到代码的复用性，对部分代码进行了封装，在组件内去初始化接口数据，却迟迟没有接口响应，经过最终的排查，发现问题出现在uniapp的生命周期上。uniapp官方文档上明确写出：uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。组件里没有页面级的onLoad等生命周期uni-app的组件中可以直接使用Vue的生命周期函数进行处理解决方案：使用vue的生命周期函数 mountedmounted(){}...

原创 element ui Breadcrumb面包屑二次封装

<template> <div class="back-breadcrumb justify-between mt10 mb10"> <div class="breadcrumb"> <div class="flex-start"> <span class="current-position">当前位置：</span> <el-breadcrumb separator="/.

原创 js简单实现日历

示例代码<template> <div id="calendar"> <!-- 年份 月份 --> <div class="month"> <ul> <!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) --> <li class="arrow hands el-icon-arrow-...

原创 dayjs入门使用——vue

简介：Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。安装npm install dayjs --save全局配置main.jsimport dayjs from "dayjs"Vue.prototype.dayjs = dayjs;运用console.log(this.dayjs(new Date()).format("YYYY-MM-DD"))// 2022-05-12console.log(this.dayj

原创 vue项目对单个按钮进行权限控制

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。参数说明：el：指令所绑定的元素，可以用来直接操作 DOM。 binding：一个对象，包含以下 property： name：指令名，不包括v-前缀。 value：指令的绑定值，例如：v-my-directive="1 + 1"中，绑定值为2。 oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。 exp...

原创 解决项目启动提示vue-video-player引入css样式报错

require('vue-video-player/node_modules/video.js/dist/video-js.css')require('video.js/dist/video-js.css')require('vue-video-player/src/custom-theme.css')

原创 解决npm 安装依赖提示：Node Sass does not yet support your current environment报错问题。

NodeJS Supported node-sass version Node Module Node 17 7.0+ 102 Node 16 6.0+ 93 Node 15 5.0+, <7.0 88 Node 14 4.14+ 83 Node 13 4.13+, <5.0 79 Node 12 4.12+ 72 Node 11 4.10+, <5.0 67 N

原创 解决npm 安装依赖提示 Maximum call stack size exceeded问题

问题场景：项目npm install 安装依赖时报错：Maximum call stack size exceeded。解决思路：1、删除node_modules之后再去安装2、清空缓存之后再去安装npm cache clean --forcenpm install

原创 解决前段项目运行提示：Syntax Error TypeError token.type.endsWith is not a function 问题

背景：项目安装依赖，npm run dev时项目报错：Syntax Error TypeError token.type.endsWith is not a function。原因：最终发现本地项目babel-eslint依赖包已经被弃用，babel-eslint现在是@babel/eslint-parser。解决思路：1，移除babel-eslint，安装@babel/eslint-parser。npm uninstall babel-eslintnpm install @b.

原创 element table组件实现单选，单选回显操作

最近开发遇到一个需求：选择表格的一条数据在表格外进行操作，还有一个最令人痛疼的是回显数据，要把选中的那条数据的radio按钮高亮展示，最近刚好有时间整理了一下，大家可以去借鉴一下。...

原创 uniapp 获取当前页面路由

getCurrentPages( ) 用于获取当前页面栈的实例，以数组形式按照栈的顺序返回，第一个元素为首页，最后一个为当前页面。let currentRoutes = getCurrentPages(); // 获取当前打开过的页面路由数组let currentRoute = routes[currentRoutes.length - 1].route //获取当前页面路由let currentParam = routes[currentRoutes.length - 1].options;.

原创 JavaScript String.fromCharCode()方法

定义和用法：fromCharCode() 可接受一个指定的 Unicode 值，然后返回一个字符串。该方法是 String 的静态方法，字符串中的每个字符都由单独的 Unicode 数字编码指定。所有主要浏览器都支持 fromCharCode() 方法。语法：String.fromCharCode(n1, n2, ..., nX)参数值：参数 描述 n1,n2, ...,nX 必需。一个或多个 Unicode 值，即要创建的字符串中的字符的 Unicode 编码..

原创 iview 给render函数创建的标签添加属性，样式，点击事件，文本信息，自定义指，插槽

渲染出一个标签，要怎么去添加这个标签的属性，样式，点击事件，以及文本信息？下面用一个element ui 组件的<el-button>按钮做一个简单的示例。介绍：attrs domProps两者都可以去添加该元素的属性。下面的attrs也可以换成domProps，效果都是一样的。用法：render: (h, params) => { return h("div", [ h("el-button", { attrs: { .

原创 获取dom元素6种实现方式

querySelectordocument.querySelector('选择器')querySelectorAlldocument.querySelectorAll('选择器')getElementByIddocument.querySelectorAll('id名')getElementsByClassNamedocument.getElementsByClassName('类名')getElementsByNamedocument.getElementsB

原创 css实现文本内容超出长度隐藏,显示省略号——(单行，多行)

1，超出换行.div{ height:auto; word-wrap: break-word; /*强制换行*/}2，超出显示省略号、单行文本隐藏。.div{ width: 300px; height: auto; word-wrap: break-word; /*强制换行*/ overflow: hidden; /*超出隐藏*/ text-overflow: ellipsis;/*隐藏后添加省略号*/ white-space: nowrap;/*强制不换行

原创 实现块级元素垂直水平居中的2种简单实现方式

flex布局属性：更多的属性以及一些用法可以去flex菜鸟教程看具体用法flex-direction决定主轴的方向（即项目的排列方向）。 flex-wrap默认情况下，项目都排在一条线（又称”轴线”）上。 flex-flow是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 justify-content定义了项目在主轴上的对齐方式。 align-items 定义项目在交叉轴上如何对齐。 align-content...

原创 uniapp 循环遍历picker绑定值问题

需求背景：根据后台返回的数据动态渲染picker，radio，textarea三种类型表单控件。下面用到了uniapp的uni-forms、uni-datatime-picker拓展插件，有需要的小伙伴可以去uniapp官网下载，

原创 element table表格基于sortable.js拖拽组件实现表格列，行拖拽排序

sortable.js功能强大的JavaScript 拖拽库特性1，支持多种框架（angular、vue、react等） 4，简单的API，方便使用2，支持所有的css框架, 5，不依赖Jquery等其他框架3，支持触屏设备和大部分浏览器 6，基于原生HTML5中的拖放API安装npm ins...

原创 解决 (22 errors, 0 warnings) 21 errors and 0 warnings potentially fixable with the --fix op 报错

eslint规范报错问题lintOnSave: false,

原创 解决NavigationDuplicated: Avoided redundant navigation to current location: “/home“.报错问题

解决NavigationDuplicated: Avoided redundant navigation to current location: “/home“.报错问题

原创 element 表单验证失败，滚动到第一个错误的地方

scrollIntoView()说明：调用它的元素滚动到浏览器窗口的可见区域。this.$refs["form"].validate((valid) => { if (valid) { return; } else { this.$nextTick(() => { let isError = document.getElementsByClassName("is-error"); i

原创 实现数组去重的8种方式

方法一： 利用 ES6的set 方法。function unique1(arr){ let object = new Set(arr); return Array.from(object)}console.log(unique([1,2,3,4,5,6,6,6,7,8,9])) //[1, 2, 3, 4, 5, 6, 7, 8, 9]方法二： 利用数组的indexOf下标属性来查询。function unique2(arr){ var newArray = [

原创 vue swiper轮播图不显示 pagination 小圆点，navigation前进后退按钮

<div class="swiper-pagination" slot="pagination"></div><div class="swiper-button-prev" slot="button-prev"></div><div class="swiper-button-next" slot="button-next"></div>// 在swiper插件里面插入 slot="pagination" slot="button.

原创 swiper动态加载数据问题，轮播失效问题（配置失效问题）

相信小伙伴们刚开始有swiper轮播图也会遇到和我一样的问题：加了属性效果出不来npm install swiper vue-awesome-swiper --save默认下载的swiper是目前最新的 8+ 版本而swiper的api文档目前支持的是 Swiper(4-7)的配置选项...

原创 element ui 弹框点击其他区域不关闭

在做vue开发的项目中遇到过这样一个需求：点击弹框外部 弹框不关闭，把下面这个属性方到入口文件main.js中，全局设置一下import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';ElementUI.Dialog.props.closeOnClickModal.default = false; //弹框点及其他区域不关闭Vue.use(ElementUI);...

原创 element ui form 表单 二次封装 (行内表单和基础表单)

element ui form表单进行二次封装，封装支持输入框，时间，日期选择器，单选框类型，适用于表单查询，dialog弹框里的普通表单。可以和前几篇的table表格，dialog弹框，pagination分页一起使用，提高开发人员的工作效率，方便维护,实现增删详情三复用

原创 js 深拷贝函数 —— 适用于对象

export function deepClone(source) { if (!source &am.

原创 element ui dialog 弹框 二次封装

下次会为大家更新form表单的封装，table，pagination,form的封装使用后期能更好的维护代码新建一个dialog文件，下面是封装内容<template> <div> <el-dialog ref="currentDialog" v-bind="$props" :class="`dialog-${size}`" :close-on-click-modal="closeOnClickModal"

原创 git 命令操作 —— 持续更新中...

1,配置自己用户名和账号信息git config --global user.name "dushulong"git config --global user.email "dushulong@jiastudy.com"2,新建本地新分支git checkout -b xxxxx //分支名称3，拉取远程最新代码git pull4,拉取远程最新分支git fetch5,提交代码，把本地分支推送到代码仓库// .将本地所有修改全部提交git add . ..

原创 Vue开发问题 —— axios二次封装，请求、响应拦截器。

Vue项目基于axios进行二次封装

原创 element ui table 表格 二次封装——支持自定义列，render渲染表格数据，支持单选。

基于element table 表格二次封装，可以自定义表头信息，支持render函数渲染表格数据。封装支持基础表格，多选，单选，排序，表尾合计行，合并行或列。

原创 element ui Pagination 分页二次封装

效果图如下，后续还会为大家更新 自定义表格，日历，表单等组件的封装封装组件内容<template> <div class="j-el-pagination"> <el-pagination v-bind="tableProprs" :current-page="data.current ? Number(data.current) : 0" :page-size="data.size ? Number(data.si