Vue
关注
分享
扫一扫
冷太阳a
小小前端工程师，小本本记笔记。
展开
-
vue实现可拖拽dialog封装
可拖拽弹窗封装原创 2024-07-18 16:11:16 · 416 阅读 · 0 评论 -
el-form动态检验无法生效问题（已解决）
要对el-form里面的字段动态生成校验规则，测试了一系列的骚操作也无法生效，要么是require视图生效了，校验规则还是不生效;原创 2023-09-12 13:39:41 · 1686 阅读 · 0 评论 -
vue权限permission实现
vue权限permission实现。原创 2022-08-05 15:20:16 · 2325 阅读 · 3 评论 -
通过promise.all方法去判断一组接口验证结果
promise.all原创 2022-06-23 23:43:21 · 388 阅读 · 0 评论 -
VeeValidate表单校验
一、安装npm install vee-validate --save //安装可能会报错npm install vee-validate@2.0.0-rc.25 //报错用这个二、统一封装validate.jsimport Vue from 'vue'import VeeValidate, { Validator } from 'vee-validate'import zh from 'vee-validate/dist/locale/zh_CN' // 引入中文文件Validat原创 2022-05-04 22:35:41 · 627 阅读 · 0 评论 -
antdV中Anchor 锚点总结
<div :class="$style.title"> <a-anchor :get-container="getContainerBox" :affix="false" :target-offset="targetOffset" :class="$style.anchor" @click="handleAnchorClick" ...原创 2022-04-21 12:22:25 · 6394 阅读 · 2 评论 -
快速实现筛选效果
<!-- * @Description: * @Author: Ran junlin * @Date: 2021-04-29 21:21:38 * @LastEditTime: 2022-03-22 09:02:55 * @LastEditors: Ran junlin--><template> <div> <!-- <van-dropdown-menu> <van-dropdown-item title="原创 2022-03-22 09:25:14 · 486 阅读 · 0 评论 -
Vue3中简单使用vuedraggable拖拽
一、安装引入npm i vuedraggable@4.1.0 --saveimport Draggable from 'vuedraggable';二 、使用<template> <button @click="submit">提交数据</button> <div class="drag-box"> <Draggable v-model="tags" :list="list" :animat转载 2022-02-18 15:56:59 · 9244 阅读 · 4 评论 -
Vue3+element-plus 表格实现上移下移排序
<!-- * @Description: * @Author: Ran junlin * @Date: 2022-02-18 10:16:09 * @LastEditTime: 2022-02-18 14:48:10 * @LastEditors: Ran junlin--><template> <el-page-header content="生成试卷" @back="goBack" /> <el-divider></el-di原创 2022-02-18 14:49:31 · 1774 阅读 · 0 评论 -
vue-router中页面直接拿参数的 props传值的三种方式
一、原始方法{path: ‘/about/:id/:name’,component: About}页面拿参数 : this.$route.params.id二、props(布尔值方法)tips：此方法只能通过params方式上行得通{path: ‘/about/:id/:name’,component: About，props:true}页面拿参数 在页面 props:['id','name]二、props(函数方法) { path: '/about/:id原创 2022-02-14 14:40:37 · 1130 阅读 · 0 评论 -
vue2中兄弟组件通讯
方法一：（bus事件总线）推荐一、 main.js//创建vmnew Vue({ el:'#app', render: h => h(App), beforeCreate() { Vue.prototype.$bus = this },})二、App 搜索案例APP组件<template> <div class="app"> <Search /> <br /> <hr />原创 2022-02-11 14:59:12 · 733 阅读 · 0 评论 -
vue中transition动画（移动端页面切换左右滑动效果）
例子一：（简单进入和离开动画）demo1<template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition-group name="hello" appear> <h1 v-show="!isShow" key="1">vue2！</h1> <h1 v-show="isShow"原创 2022-02-11 10:12:18 · 8295 阅读 · 0 评论 -
vue利用computed简单实现过滤筛选
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&.原创 2022-02-08 16:35:37 · 917 阅读 · 0 评论 -
js快捷使用递归构建树
一、方法封装导出export const makeElementTree = (params) => { // console.log(params); // 解构取出参数 const { pid, list, pidFiled, labelFiled, valueFiled } = params // 构建一个内部函数，用于实现递归 const makeTree = (pid, arr) => { const res =原创 2021-12-21 16:05:10 · 974 阅读 · 0 评论 -
JS中substr和substring的用法和区别
实例隐藏手机号码中间位数userInfo.phone?userInfo.phone.toString().substr(0, 3)+'****' +userInfo.phone.toString().substr(7):'--'substr返回一个从指定位置开始的指定长度的子字符串。stringvar.substr(start [, length ])参数说明：start ：表示从什么位置开始（0~n）索引length：表示要截取的长度。substring返回位于 String原创 2021-12-09 16:23:31 · 592 阅读 · 0 评论 -
eachart toolbox图标转表格数据
toolbox: { show: true, feature: { dataZoom: { yAxisIndex: "none", }, //区域缩放，区域缩放还原 dataView: { readOnly: false, optionToContent: function (opt) { let axisData = opt.xAxis[0].dat.原创 2021-11-30 14:43:39 · 283 阅读 · 0 评论 -
前端请求下载二进制流的word excel
// 下载apiexport async function downloadWord(data) { const res = await request.post('/double-reduce/report/downloadWord', data, { FORM: true, responseType: 'blob', // 表明返回服务器返回的数据类型 这里不写接受类型，文件格式乱码 }); return res;}调用下载接口下载类型对应xls: ‘ap原创 2021-10-20 17:59:01 · 507 阅读 · 0 评论 -
element-table组件，动态添加行背景。
<el-table :data="tableData" highlight-current-row //点击当前行高亮 ref="multipleTable" //绑定ref > <el-table-column fixed align="center" type="index" width=".原创 2021-10-08 17:38:33 · 447 阅读 · 0 评论 -
js原生楼层实现scrollIntoView
1.基于原生Api scrollIntoViewscrollIntoView用法：element.scrollIntoView(scrollIntoViewOptions);在循环数组时给标签动态添加class，注意scrollIntoView地位的是到具体一个位置数，所以clas一定是唯一的，用动态id更好 <!-- 楼层 --> <ul class="ul"> <li v-for="qn in questionnaireList" :ke原创 2021-08-19 11:02:46 · 684 阅读 · 2 评论 -
js数组、数组嵌套根据某个字段排序（eachart图标双击事件、vue双击）
1.根据某个字段排序var arr = [ {name:'张三',age:15}, {name:'李四',age:18}, {name:'王五',age:28}];function compare(property){ return function(a,b){ var value1 = a[property]; var value2 = b[property]; return value1 - value2; //降原创 2021-08-18 16:19:54 · 5169 阅读 · 1 评论 -
element Tree树形控件的使用
<!-- * @Description: * @Author: Ran junlin * @Date: 2021-07-01 12:58:01 * @LastEditTime: 2021-07-14 15:38:46 * @LastEditors: Ran junlin--><template> <div class="table-wrapper"> <button @click="handleCancelSelect">取消所有原创 2021-07-14 15:49:50 · 571 阅读 · 0 评论 -
Vue项目启动时：Plugin/Preset files are not allowed to export objects, only functions.报错解决
原因是babel的版本冲突导致的。解决方案1.卸载当前babel版本npm uninstall babel-loader2.安装babel 7 的版本npm install babel-loader@7 -D原创 2021-06-17 14:41:21 · 1422 阅读 · 0 评论 -
Vue+Driverjs做用户引导页面
简单的demo练习，有更好的引导方案望指正一、安装1.无论你喜欢哪种方式，你都可以使用 yarn 或 npm 进行安装。yarn add driver.jsnpm install driver.js2.或者直接在文件中引入它。<link rel="stylesheet" href="/dist/driver.min.css"><script src="/dist/driver.min.js"></script>二、引入我是通过npm安装的，原创 2021-06-16 18:06:26 · 1531 阅读 · 0 评论 -
PDF.js在页面的简单使用
安装和导入npm install --save vue-pdf导入模块import pdf from "vue-pdf";导入pdf组件components: { pdf, },HTML<div #="pdf"> <div class="pdf-tab"> <div class="btn-def btn-pre" @click.stop="prePage">上一页</div> <原创 2021-05-07 10:39:31 · 349 阅读 · 3 评论 -
vue中使用组件按钮与原始button点击后显示加载中，防止重复提交
<div id="test"> <textarea placeholder="请填写你的答案" v-model.trim="answer"></textarea> <el-button class="login-btn" type="primary" @click="submitForm" :loading="loadingBtn" >{{ loadingButText }}<..原创 2021-04-02 00:39:54 · 1213 阅读 · 0 评论 -
router-link相关用法小技巧
在前面的<router-link>中,只需要使用属性: to,用于指定跳转的路径.<router-lilik to='/home' tag='li'><router-lilik to='/home' tag='button'>tag: tag可以指定之后渣染成什幺html标签,比如上面的代码会被渲染成一个<li>、 button元素,而不是<a>replace: replace不会留下history记录,所以指定replace.原创 2021-02-25 11:30:18 · 695 阅读 · 0 评论 -
利用Vue-cli3简单快速搭建前端项目架构
安装如果在电脑上已经安装了vue-cli2.0如果想要把其替换成vue-cli3.0的话需要先卸载原有vue-cli2.0的版本。npm uninstall vue-cli -g卸载完成之后就直接安装vue-cli3.0就好了npm install -g @vue/cli检测是否安装成功vue --version通过上面的步骤就可完成vue-cli3.0的安装。创建项目在使用vue-cli2.0创建项目的时候，直接使用vue webpack init 项目名称这样工具就可以轻松创建一个项目原创 2021-02-20 11:41:41 · 700 阅读 · 1 评论 -
js中 数组根据某个字段去重
1.封装过滤数据的方法 unique(arr, val) { const res = new Map() return arr.filter((item) => !res.has(item[val]) && res.set(item[val], 1)) },2.直接调用去重方法 this.newData=this.unique(this.obj, "schoolName") // newData 一个新的数组来接受 方法中传需要去重的数组和原创 2021-01-07 16:10:40 · 4573 阅读 · 2 评论 -
element_ui table修改表格样式
修改表格点击选中时效果 /deep/.el-table__body tr.current-row > td { background: #406bf8 !important; color: #fff; cursor: pointer;}2.修改过渡时效果/deep/.el-table--enable-row-hover .el-table__body tr:hover > td { background: #406bf8 !important; color: .原创 2020-12-14 11:53:32 · 1363 阅读 · 0 评论 -
input按回车换行
需求描述：页面是table里面嵌入input,用户要求按回车去下一个input之前由于用到elementUI的,用于改变许多类型，之后就自己用原生的input去实现具体代码： <input type="number" :ref="`ipt` + index" :class="`ipt` + index" v-model=原创 2020-12-08 14:51:45 · 1635 阅读 · 1 评论 -
vue中使用video-player视频插件，第一次无法监听父组件穿过来的值解决办法
需求： 页面作品清单是从后端请求回来的不同格式的url，前端需求根据后缀动态判断格式，然后对齐进行下载和原创 2020-12-08 14:30:31 · 637 阅读 · 0 评论 -
Vue中调用原生微信的分享接口配置
1.安装微信分享插件 npm install weixin-js-sdk 2.引入 import wx from 'weixin-js-sdk'3.在assets里面新建wx.js文件，封装配置微信的配置import { share} from "@/api/ad"; //封装的api地址接口import wx from "weixin-js-sdk";引入微信分享插件export const wexinShare = function () { var s_link = "原创 2020-10-20 10:49:33 · 919 阅读 · 0 评论 -
关于Vue父传子异步传递数据问题
问题描述：使用videoPlayer插件封装视频组件，父组件通过网络请求的数据URL地址传给视频URL使其显示，由于异步问题，需要用一个中间变化数据来通知传递过程解决：在父组件里面定义个flag,父组件中网络请求成功后把flag变为true，组件上通过v-if去监听网络请求完成以后再去传值代码视频子组件父组件...原创 2020-09-22 22:37:51 · 803 阅读 · 0 评论 -
Vue中移动端适配禁止用户缩放屏幕
控制移动端页面的缩放最近用vue和mint-ui框架开发了一个微信公众号，部署以后，进入页面，发现页面会随着手指的滑动而缩放，查阅资料后发现要在index.html中设置一下。以下是解决方法：vue生成的index.html页面中，meta标签是这样子的：这里只要把meta标签改成以下内容，就可以控制页面的缩放具体属性值分析： width=device-width 使用设备的宽度来解析 initial-scale=1.0 页面初始倍数为1倍 m原创 2020-09-14 16:39:26 · 1043 阅读 · 0 评论 -
处理axios fordata格式传参
//处理axios fordata// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';// axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded';// axios.defaults.transformRequest = [function (data) {// let原创 2020-08-10 14:27:19 · 351 阅读 · 0 评论 -
ElementUI 关闭对话框清空验证和发送数据完成后清除form表单
1.先给表单绑定 ref="formDataC" 这里的formDataC就是data里面需要传输的数据。2.给提交（取消）按钮绑定 <el-button type="primary" @click="submitForm('formDataC')">提交</el-button> 3.提交事件submitForm(formName) this.$refs[formName].resetFields(); submitForm(formName) {原创 2020-08-04 11:37:10 · 976 阅读 · 0 评论 -
vue-router通过replace,push动态传参报错解决
解决：在router index.js里面配置如下代码const originalReplace = VueRouter.prototype.replace;VueRouter.prototype.replace = function replace(location) { return originalReplace.call(this, location).catch(err => err);};原创 2020-08-02 09:51:26 · 2530 阅读 · 0 评论 -
vue-cli3脚手架下Eslint的配置报错问题
在Eslint严格模式下会对代码进行一定的规范，一下是不规范的报错。解决方案在目录.eslintrc.js下配置常用的规范 'indent': [2, 4], // 开启缩进风格 缩进4格 'no-spaced-func': 2, //函数调用时 函数名与()之间不能有空格 - 开启 'no-const-assign': 2, //禁止修改const声明的变量 - 开启 'space-before-function-paren': [0, 'always'], //函数定义时括原创 2020-07-08 22:56:32 · 616 阅读 · 0 评论 -
axios发送并发网络请求
第一步安装配置axiosnpm install axios --sava第二部全局引用并将其挂在到vue的原型上。//将axios挂载在vue全局使用Vue.config.productionTip = false;Vue.prototype.$axios = Axios;第三步实现并发请求Advice.vue页面//定义两个接口 const img_Url = "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperd原创 2020-05-31 11:38:26 · 278 阅读 · 0 评论 -
Sass &Less中mixin的用法
Sass的mixin用法1.以vue项目开发演示，先在assets里面建Sass文件夹mixin.sass// 1. 布局 //flex布局复用@mixin flex($hov:space-between,$col:center){ display:flex; justify-content:$hov; align-items:$col;}//after伪类加小图标@mixin bgImg($w:0,$h:0,$img:'',$size:contain){ display:in原创 2020-05-31 11:37:17 · 1388 阅读 · 0 评论