![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
浪里白条那片海
这个人很懒
展开
-
JS校验上传图片类型
file.type校验类型。原创 2022-12-22 11:31:24 · 1190 阅读 · 0 评论 -
表格嵌套输入框加校验 vue
1、表格数组需要el-form的optForm点出来。2、在data里面定义rules。原创 2022-07-28 18:11:45 · 999 阅读 · 0 评论 -
vue 利用css实现元素扩大鼠标选中区域及音乐拖动进度条实现(初版)
html部分<view class="audiost" :style='"width: 300px;height: "+heig+"px;background: #078AFD; position: fixed;top: 300px;left: 300px;"' @tap="clickD($event)" @mousedown="down" @mousemove="mouse" @mouseup=".原创 2022-05-13 15:27:44 · 689 阅读 · 0 评论 -
前端解析apk安装包详细信息—app-info-parser
安装:npm i app-info-parser // 使用包管理工具安装使用:// 获取apk的基础信息const AppInfoParser = require('app-info-parser')const parser = new AppInfoParser(file) // file 上传的apk文件parser.parse().then(result => { console.log('app info ----> ', result) // resu原创 2022-02-11 11:52:58 · 1514 阅读 · 0 评论 -
props使用及接收值的多种写法
props: { // 基础类型检测, null意味着任何类型都行 propA: Number, // 多种类型 propB: [String, Number], // 必传且是String propC: { type: String, required: true }, // 数字有默认值 propD: { type: Number, default: 101 }, /.原创 2021-12-22 10:23:47 · 1854 阅读 · 0 评论 -
element v-for循环列表的表单校验(动态绑定的数据)
1、一层循环时嵌套:html:<el-form :model="addform" ref="addform" :rules="rules"> <el-form-item label="资源" required label-width="120px"> <el-row v-for="(item,i) in addform.resourceList" :key="i"> <el-col :span="10">原创 2021-12-21 10:41:10 · 4010 阅读 · 2 评论 -
Upload prop校验
解决办法:this.$refs.ruleForm.clearValidate("region"),在upload上传成功的回调里取消验证提示<el-form :model="ruleForm" :rules="rules" ref="ruleForm"> <el-form-item label="活动区域" prop="region"> <el-select v-model="ruleForm.region" placeholder="请选择原创 2021-09-08 18:02:04 · 508 阅读 · 0 评论 -
el-input-number直接在输入框输入内容v-model的值不会跟着改变 问题
有一个需求就是,只能输入一个大于0并且是0.5的倍数两位小数,使用elemnt ui 的inputNumer控件,但是使用的时候添加了属性step和precision两个属性,问题就来了,输入了一个小数值,在判断是否是0.5的倍数时,修改值v-mode得不到更新于是乎 解决办法:<el-input-number @change="priceChange(dataForm.price)" v-model="dataForm.price" :step='0.5'原创 2021-07-16 15:15:52 · 2752 阅读 · 0 评论 -
公共js文件return一个方法写法
公共js:export const disableBrowserBack = (param) => { return (function () { history.pushState(null, null, document.URL); if (window.history && window.history.pushState...原创 2021-07-08 19:43:57 · 260 阅读 · 0 评论 -
Vue.js中this.$nextTick()的使用
this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。假设我们更改了某个dom元素内部的文本,而这时候我们想直接打印出这个被改变后的文本是需要dom更新之后才会实现的,也就好比我们将打印输出的代码放在setTimeout(fn, 0)中;先来第一个例子看一看<template> <section>原创 2021-03-10 14:11:47 · 314 阅读 · 0 评论 -
element 表格是否可以勾选和是否在数据更新之后保留之前选中的数据
第一个问题 :element 表格是否可以勾选:html部分:<el-table-column type="selection" :selectable="selectable"></el-table-column>js部分:selectable(row, column) { console.log(row.aiStatus); // return false; 状态 0-未识别 1...原创 2020-12-22 14:21:07 · 1350 阅读 · 2 评论 -
键盘事件 vue
html部分:<div> <el-input v-model="search_name" placeholder="请输入患者姓名" @keyup.enter.native="markStatisticFun(search_name)"> </el-input></div>js部分:markStatisticFun(search_name) { .....}@keydown(键.原创 2020-11-19 17:40:47 · 368 阅读 · 0 评论 -
深度监听 watch 、立即执行、销毁watch,防止内存溢出
immediate: true, // 立即执行deep: true // 深度监听<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p></div> new Vue({ el: '#root', data: { firstName:.原创 2020-11-18 18:06:49 · 6147 阅读 · 0 评论 -
element el-image放多张图片 显示大图
html部分:<el-image v-for="(ele,index) in detailsData.fileIds" :key="index" style="width: 100px; height: 100px" :src="ele.fileDataUrl" :preview-src-list="getPreviewImgList(index)"> </el-image>detailsData.fileIds :// 后台返回的 u原创 2020-11-17 15:52:49 · 5948 阅读 · 0 评论 -
input type=“file“ 文件上传类型限制
1、<input text="file" accept=".csv" /> cvs格式2、<input text="file" accept="application/vnd.ms-excel"/> 上传.xls格式3、<input text="fiel" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/> 上传.xslx格式4、<input.原创 2020-08-20 19:45:45 · 5284 阅读 · 0 评论 -
写 React / Vue 项目时为什么要在列表组件中写 key,其作用是什么
框架中的key: 1. 为啥在遍历元素时要用 key :在开发过程中为了保证遍历同级元素的唯一性,用来提高更新 dom 的性能; 2. 凭啥要保证元素的唯一性:从原理上来说就是框架会通过 key 来判断元素是否需要重新渲染,即key 唯一则可保证元素唯一,key的作用就是更新组件时判断两个节点是否相同。相同就复用,不相同就删除旧的创建新的。; 3. 硬刚会有啥的问题:如果遍历渲染的数据变化量大,例如通过 socket 推送的实时数据,会导致数据最前一列数据展示为空,对于大...原创 2020-08-19 10:55:10 · 663 阅读 · 0 评论 -
如何判断当前脚本是运行在浏览器还是node环境中
<script> this === window ? console.log('browser') : console.log('node'); /* 判断global对象是否为window, 为window在浏览器中运行 不为window在node环境中运行 */</script>原创 2020-08-19 10:53:43 · 1613 阅读 · 0 评论 -
vue 请求转发代理,不同端口号和域名 vue+axios跨域请求代理
在cli3.X版本中 vue工程中根目录增加一个配置文件:vue.config.jsmodule.exports = { // 修改的配置 publicPath: process.env.NODE_ENV === 'production' ? './' : '/', devServer: { proxy: { '/api': { target: 'http://192.168.13.197:5000',..原创 2020-07-03 15:55:45 · 2662 阅读 · 0 评论 -
vue 鼠标滚动事件 滚动方向
@wheel.prevent="scrollBarWheel"scrollBarWheel(e) { if (this.synchronizationVar === 1) { e = e || window.event; if (e.wheelDelta) { //判断浏览器IE,谷歌滑轮事件 if (e.wheelDelta &g...原创 2020-06-24 14:00:36 · 2886 阅读 · 2 评论 -
vue指令、鼠标键盘事件、computed/methods/watch、js对象
目录一、Vue简介 1、数据驱动视图 2、MVVM架构 3、快速体验 二、Vue指令 2.0 属性指令事件指令简写 2.1 v-once 指令 只渲染一次 2.2 v-if,v-else-if,v-else 条件指令 2.3 v-show和v-if的隐藏指令区别 2.4 v-cloak 斗篷指令 2.5 v-bind 属性指令 2.6 v-on 事件指令 2.7 v-model 表单指令 2.8 v-for 循环指令 2.9 v-text 文本指令原创 2020-06-04 20:51:31 · 736 阅读 · 0 评论 -
记录element Select 下拉选择器结合Tree 树形控件实现(选中自动收起)
粗略记录一下自己做过的总结 此文章代码为项目中组件template部分<template> <el-select ref="selectTree1" :value="value" v-model="valueTitle" :clearable="clearable" @clear="clearHandle"> <el-option...原创 2020-04-30 15:48:28 · 3698 阅读 · 0 评论 -
浏览器禁用右键功能 vue 记录一下
mounted() { document.oncontextmenu = function () { return false; }; },自己写的 禁用 像打开的时候找了半天 贱笑 贱笑........原创 2020-04-23 10:58:31 · 1338 阅读 · 0 评论 -
vue项目中发起请求使用viewer.js出现的问题
安装: npm install viewerjs 引入: import Vue from 'vue'; import Viewer from 'v-viewer'; import 'viewerjs/dist/viewer.css'; <template> <div id="imgTooles"> <ul&g...原创 2020-03-03 13:52:52 · 1723 阅读 · 0 评论 -
vConsole
说明由于移动端项目在手机中调试时不能使用chrome的控制台,而vconsole是对pc端console的改写使用方法使用 npm 安装:npm install vconsole使用webpack,然后js代码中:import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsolelet vCo...原创 2020-01-09 15:06:17 · 476 阅读 · 0 评论 -
js更换自定义鼠标指针图片
$("#osd").css("cursor","url(/pmt/sassafras10.ico) 64 64 ,pointer");url地址一定要写对,使用绝对路径。我这里是cli3.0引入静态资源的写法64 64 这两个数字 是光标的位置,你尝试一下就会明白pointer 是给光标一个默认值,当找不到前面设置的文件或者错误时,会使用默认值...原创 2019-12-18 09:26:57 · 3321 阅读 · 0 评论 -
前端实现下载pdf
async downloadFun() { // 下载使用说明书 const InstructionManualvv = await InstructionManual(); let blob = new Blob([InstructionManualvv.data], {type: 'application/pdf;charse...原创 2019-12-04 19:12:45 · 2742 阅读 · 2 评论 -
vue禁用浏览器返回功能
// 引入jqmounted() { // 看好周期 disableBrowserBack(); history.pushState(null, null, document.URL); if (window.history && window.history.pushState) { $(window).on('popstate', f...原创 2019-12-04 17:04:28 · 2607 阅读 · 0 评论 -
【VUE/JS】vue和js禁止浏览器页面后退
1、vue 禁止浏览器后退需求是:需要某个路由不能通过浏览器返回,同时不影响相互之间的切换整理一下解决方法 和 使用方法:1.在路由配置中给这个路由添加meta信息,比如:{ path: '/home', component: xxx, meta: {allowBack: false} }2.在全局的router.beforeEach 函数里面获取allowBack的状态,同时更新...转载 2019-12-03 15:45:39 · 2169 阅读 · 0 评论 -
使用 Element+vue实现开始时间结束时间限制
html部分:<div> <div style=" width: 220px; margin: 20px auto 0;"> <el-date-picker v-model="start...原创 2019-11-25 18:05:17 · 1713 阅读 · 0 评论 -
路由前置守卫 设置token存储
登录也登录成功后保存token/ 保存用户名 sessionStorage.setItem("username", data.user.name); sessionStorage.setItem("token", data.token); ...原创 2019-11-20 15:37:34 · 829 阅读 · 0 评论 -
vue element 的el-checkbox-group默认全部选中
<!--标注选择标签弹层组件--><template> <div class="message-box dialog-mask"> <div class="dialog-content"> <el-checkbox :indeterminate="isIndeterminate" v-mod...原创 2019-11-19 14:10:49 · 14884 阅读 · 1 评论 -
vue+element 谷歌禁止自动填充用户名和密码
<el-form-item prop="pwd"> <el-input v-model="ruleForm.pwd" placeholder="密码" type="pass...原创 2019-11-07 11:33:48 · 3683 阅读 · 4 评论 -
vuex
store 文件夹下的 index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex);// 创建实例 并导出export default new Vuex.Store({ state: { count: 1 }, getters: { // 监听 依赖的的值变化,会重新...原创 2019-11-05 11:54:34 · 75 阅读 · 0 评论 -
判断移动端还是PC端
router.jsroutes: [ { name: 'pc', path: '/pc', component: pc, redirect: '/pc/homePage', meta: {title: 'pc端'}, children: [ {...原创 2019-10-30 19:30:35 · 486 阅读 · 0 评论 -
:class vue
<div :class="ind.titleSrc?'bgImgSet':''"></div> 三元表达如果存在两个动态class 可以如下这样写 注意标签上不能写两个:class 1 2 <divclass="allCommon " @contextmenu.prevent="clickSet(_module)" :...原创 2019-10-25 14:36:57 · 342 阅读 · 1 评论 -
vue-cli@3.0 直接打包成zip压缩文件
安装filemanager-webpack-pluginnpm i filemanager-webpack-plugin -D在vue.config.js中配置,如果没有这个文件可以自己创建一个const FileManagerPlugin = require('filemanager-webpack-plugin')module.exports = { configu...原创 2019-10-24 17:29:47 · 2636 阅读 · 0 评论 -
兄弟组件传参 vue
写一个公共的中间人dridge. js:import Vue from 'vue'export default new Vue()哥哥为发送方 header.vue:<script> import eventVue from './../api/bridge' export default { data() { ...原创 2019-10-22 09:34:42 · 227 阅读 · 0 评论 -
i18n 中英文翻译
执行以下命令安装vue 国际化插件vue-i18nnpm install vue-i18n --save执行以下命令安装js-cookienpm install js-cookie --save在src目录下 新建lang文件夹 在lang文件夹下存放 语言脚本 如下:en.jsexport default { // 导航栏 linkArr: [...原创 2019-10-15 10:59:03 · 593 阅读 · 0 评论 -
vue 锚链接
min.jsVue.directive('anchor', { // 锚链接自定义指令 inserted: function (el, binding) { el.onclick = function () { document.documentElement.scrollTop = $('#anchor-' + binding.value)....原创 2019-10-15 10:40:05 · 229 阅读 · 0 评论 -
“Failed to load resource: net::ERR_FILE_NOT_FOUND“错误 。vue-cli 3.0 创建的项目,dev下能运行,打包后报错,页面空白 。
cli3.0 解决办法:Failed to load resource: net::ERR_FILE_NOT_FOUND打开dist/index.html, 引入是有问题的,在vue-cli 3.0 创建的项目中是找不到webpack的配置文件,因为vue-cli 3.0 将其封装起来了,只需要在项目的根目录下的vue.config.js文件中修改就行了(若项目没有...原创 2019-10-15 10:22:54 · 18352 阅读 · 6 评论