vue
关注
分享
扫一扫
hangGe0111
这个作者很懒，什么都没留下…
展开
-
element-ui 表单验证，rules给自定义方法传参数，rules正则验证
el-form表单rules扩展传参原创 2022-08-21 11:36:29 · 3619 阅读 · 0 评论 -
vue路由传参的三种基本方式
项目中很多情况下都需要进行路由之间的传值，想过很多种方式sessionstorage/localstorage/cookie 进行离线缓存存储也可以，用vuex也可以，不过有些大材小用吧，不管怎么说因场景而异下面我来说下vue自带的路由传参的三种基本方式先有如下场景 点击当前页的某个按钮跳转到另外一个页面去，并将某个值带过去<div class="examine" @click="insurance(2)">查看详情</div>第一种方法 页面刷新数据不会丢失转载 2021-04-28 21:26:40 · 496 阅读 · 0 评论 -
ue中二次封装axios请求，支持url参数拼接、blob数据流和formdata上传等
可以滑到页面最底部，之前的部分为思路部分现在vue项目基本上都是使用axios进行请求操作，但是axios有时候并不能完全满足业务的需求，因为官方axios只支持一些比较规则的请求参数和方式，比如body类型的post，params类型的get。而实际业务中后台给的接口可不会那么如你所愿的规范，当后台同事肆意挥洒，尽情装逼，完全是即兴发挥，不考虑前端感受的时候，往往给出来的api接口是很变态的：get方法的url后面拼接参数？没办法，谁让前端是万能的呢，只能将就一下后台同事了。实际项转载 2021-04-28 21:17:51 · 1241 阅读 · 0 评论 -
vue项目中路由不匹配或者路径错误，添加默认404页面的方法
在Vue项目中，当访问的页面路由不存在或错误时，页面显示为一片空白。然而，通常我们需要对访问url不存在或者错误的情况下添加默认的404页面，即not found页面。处理方法如下，在router中添加方法：router.beforeEach((to, from, next) => { if (to.matched.length === 0) { //匹配前往的路由不存在 from.name ? next({ name: from.name }) : next('转载 2021-04-28 20:19:33 · 1844 阅读 · 0 评论 -
vue中点击复制粘贴功能
1.下载clipboard.jscnpm install clipboard --save 2.引入，可以在mian.js中全局引入也可以在单个vue中引入import Clipboard from 'clipboard'; 3.使用，在template中，这里我用了elementui框架<el-table-column label="taskId"> <template slot-scope="scope">转载 2021-03-02 21:48:05 · 883 阅读 · 0 评论 -
vue 如何下载文件
import axios from 'axios'// 添加请求拦截器axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 config.headers.common['contentType'] = 'application/json;charset=utf-8'; const token = localStorage.getItem('token'); if (token) { .转载 2021-03-01 21:35:30 · 796 阅读 · 0 评论 -
js判断一个字符串是以某个字符串开头
方法1:substr() 方法if("123".substr(0, 2) == "12"){ console.log(true);}方法2:substring() 方法if("123".substring(0, 2) == "12"){ console.log(true);}方法3:slice()方法if("123".slice(0,2) == "12"){ console.log(true);}方法4:indexOf() 方法转载 2021-03-01 21:30:39 · 587 阅读 · 0 评论 -
elementui el-form 默认不支持回车提交，回车第一次页面刷新
概念：1.在表单的提交按钮上添加 Vue 原生属性native-type="submit"可以让按钮变为表单提交按钮；2.阻止表单默认提交事件（默认是阻止），在表单上（即<el-form>标签上）添加@submit.native.prevent即可3.因为el-form默认不支持表单回车提交，在表单上（即<el-form>标签上）添加@keyup.enter.native="submitForm('form')"可实现回车提交表单template:<...转载 2021-03-01 21:24:20 · 648 阅读 · 0 评论 -
Element的input 实现带图标密码框的明密文（点击眼睛显示密码,再次点击图标隐藏密码）
点击眼睛图标显示密码,再次点击图标隐藏密码一、知识点：带 icon 的输入框，可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。因为图标涉及点击事件，带 icon 的输入框，采用的是 slot 方式。slot="suffix" 表示，图标会出现在input 的尾部；二、实现思路要变化的有，图标样式和input的显示方式定义一个flag默认false，绑定input 的type值，flag为true时，转载 2021-03-01 21:16:11 · 1803 阅读 · 1 评论 -
element UI hover把线压断了
::v-deep .el-table td,.el-table th.is-leaf { border-top: 1px solid #EBEEF5; border-bottom: 0;}:v-deep .el-table__body{ border-bottom: 1px solid #EBEEF5;}原创 2021-03-01 21:12:17 · 221 阅读 · 0 评论 -
vue+django——webshell的实现，xterm.js实现webshell
Webshell“web”的含义是显然需要服务器开放web服务，“shell”的含义是取得对服务器某种程度上操作权限。webshell常常被称为通过网站端口对网站服务器的某种程度上操作的权限。一方面，webshell被站长常常用于网站管理、服务器管理等等，根据FSO权限的不同，作用有在线编辑网页脚本、上传下载文件、查看数据库、执行任意程序命令等。另一方面，被入侵者利用，从而达到控制网站服务器的目的。这些网页脚本常称为WEB脚本木马，比较流行的asp或php木马，也有基于.NET的脚本木马与JSP脚转载 2021-03-01 20:57:58 · 2603 阅读 · 0 评论 -
vue yaml代码编辑器组件,elementui的弹窗把错误遮挡
一、前期准备 此组件的功能主要依赖于codemirror，另外加入了js-yaml进行语法检查，方便在实时编辑时提示语法不正确的地方。因此首先需要在项目中安装codemirror与js-yaml:codemirror: npm install codemirrorjs-yaml: npm install js-yaml --save二、组件源码及说明新建@/components/YamlEditor/index.vue文件：<template> <div cla.转载 2021-03-01 20:40:46 · 1268 阅读 · 0 评论 -
关于‘webpack-dev-server‘ 不是内部或外部命令，也不是可运行的程序 或批处理文件。
今天在执行npm run dev启动项目时遇到'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序 或批处理文件。这个问题开始我想着吧重新装 吧，就运行了：webpack-dev-server可是装完之后会有很多的依赖都需要重装，有点心烦。。。最后打开了万能的百度 找到了一篇不错的文章嘻嘻第一种方法尝试进行:cnpm install而后重新执行：npm run dev这里就成功运行了，如果还是不可以就尝试第二种方法，通常是没有装依赖导.转载 2020-11-05 17:15:16 · 265 阅读 · 0 评论 -
vue-cli如何安装指定版本
1.背景：问：我目前是vue-cli v4的版本想降回v3， 怎么操作？答：卸载重装即可。2.方法：npm uninstall -g @vue/clinpm install -g @vue/cli@3.11.0转载 2020-11-05 17:01:07 · 585 阅读 · 0 评论 -
vue报错Module build failed: Error: Failed to load plugin html: Cannot find module ‘eslint-plugin-html‘
1.命令行展示2.命令行运行cnpm install eslint-plugin-html原创 2020-09-30 11:06:33 · 1927 阅读 · 0 评论 -
vuejs的computed(计算属性) 和 methods (方法)异同
1.html<div id="demo"> <h1>{{msg}}</h1> <div class="run1">{{methodsRun}}</div> <div class="run2">{{methodsRun()}}</div&g原创 2018-07-05 16:54:25 · 728 阅读 · 0 评论 -
向左滑动删除，vue向左滑删除
转载：https://www.jb51.net/article/136221.htm1.vuejs部分（1）HTML代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" id="viewport" content="width=device-width, initial-转载 2020-05-13 15:49:11 · 6421 阅读 · 4 评论 -
vue运行时再控制台输出Cannot read property 'AllInfor.baseinfo.name' of undefined
1.做项目时，出现了比较诡异的现象，当数据为对象中包含对象（第二层对象里的属性如果没有初始化，获取完数据渲染页面会报undefined错误，如果是数组形式不会报错，所以说比较诡异）；例如：{{AllInfor.baseinfo.name}}2.其实在接口请求完数据，将数据赋值给了第一层对象，同时打印各层对象的值也能打印出来，但在html中数据渲染死活出不来，于是就想能不能在data中初始化...原创 2018-09-11 19:29:00 · 546 阅读 · 0 评论 -
vue选项卡tab切换
1.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content=&原创 2018-09-11 19:29:08 · 1051 阅读 · 0 评论 -
This dependency was not found: * common/stylus/index.styl in ./src/main.js To install it, you can ru
有如下错误：This dependency was not found:* common/stylus/index.styl in ./src/main.jsTo install it, you can run: npm install --save common/stylus/index.styl解决：1、首先npm install stylus-loader stylus...转载 2019-03-22 09:18:08 · 1279 阅读 · 0 评论 -
bscroll制作轮播图，jq和vue两种方式，带下边的点点
1.vue方式1.1代码<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc...原创 2019-03-28 16:10:15 · 542 阅读 · 0 评论 -
axios的get和post方法封装
最近项目中用到了axios进行请求数据，从百度看了一圈，基本将两种方法都分开写了，因为项目从零开始，所以post和get方法都会用到，想把它封装为一个函数，便于管理使用，没看到合适的资料，自己尝试写了一下，作为笔记方便以后使用:function ajax_curl(posttype, url, params, cb) { var method_type = posttype.toLower...原创 2018-06-22 18:03:52 · 2868 阅读 · 2 评论