![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
倔强的烤马铃薯
互联网从事人员,工作为前端开发,擅长pc端,小程序,APP开发。
展开
-
VUE+Element实现历史搜索
实现历史搜索,主要用到了 localStorage 储存localStorage 可以长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除。引入element的 autocomplete输入框 是一个可带输入建议的输入框组件<template> <div> <el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearch" placehold原创 2021-09-04 12:14:31 · 1137 阅读 · 1 评论 -
element 输入框禁止输入空格
<el-input v-model.trim="staname" clearable></el-input> //绑定值的时候, 用 v-model.trim 就行了原创 2021-06-08 14:18:58 · 496 阅读 · 1 评论 -
input限制只输入数字,小数
html 代码<el-input clearable class="box-card-main-input" v-model="number" @input="getnumber"></el-input>export default { data() { return{ number:'' } }, methods:{ getnumber(value){ this.numb原创 2020-09-17 11:49:20 · 90 阅读 · 0 评论 -
vue根据颜色选择器改变,背景颜色跟字体颜色
如果你在根组件下注入了store,那么就可以在 .vue文件中使用 $store.state.xxx然后根据颜色颜色选择器,选择的颜色动态改变 $store.state.xxx ,以达到改变背景色跟字体颜色的目的。<template> <div> <!-- leftbackground 跟 leftcolor是我自定义设置的 --> <div :style="{backgroundColor: $store.state.leftbackgro原创 2021-03-23 16:14:45 · 2145 阅读 · 0 评论 -
vue声音报警功能
1.在页面上添加audio<template> <div> <audio id="audio" src="/static/newjingbao.mp3"/> //src 后面的链接是我保存在static文件下的一段报警声 <el-button type="warning" icon="el-icon-edit" @click="startplay">开始播放</el-button> </div></templa原创 2021-03-18 14:03:17 · 3117 阅读 · 3 评论 -
vue本地图片路径正确,但是for循环不显示
今天for循环图片的时候,发现图片不显示,以下是代码<div v-for="(item,index) in img"> <img :src="item.imc" width="80" height="80"></img></div>img:[{imc:'./ww.png'},{name:'./imc.png'}],看了看代码路径也是正确的,而且单个是能显示的,可for循环之后图片就显示不出来了最后发现单个显示的跟for循环显示的图片路径不一原创 2021-03-01 17:20:17 · 566 阅读 · 0 评论 -
vue引入vue-baidu-map,并获取选中点的详细信息
1.npm 安装$ npm install vue-baidu-map --save //https://dafrok.github.io/vue-baidu-map/#/2.main.js引入import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, { // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */ ak: 'lV6lw6NZhEQK0CFfT2原创 2021-01-18 10:16:07 · 2979 阅读 · 0 评论 -
vue防止按钮多次点击,重复提交数据
1.设置按钮的loading属性,为 true 时就是加载中<el-button type="success" icon="el-icon-search" @click="inquire" :loading="loadingtype">查询</el-button>export default { data() { return { loadingtype:false,//按钮加载 } }, methods: { this.loadingtype=true原创 2021-01-14 09:08:02 · 644 阅读 · 0 评论 -
新建vue项目
1.cnpm install vue-cli -g //全局安装 vue-cli2.新建一个文件夹,cd到这个文件夹中,我的文件夹名字是webvue3.输入 vue init webpack ”项目名称“ 命令新建vue项目 我的新建vue项目名称为 onevue4.创建成功 cd到 onevue目录 然后npm install 安装依赖(简写npm i)5.npm run dev 运行项目 就行了...原创 2021-01-07 11:46:09 · 75 阅读 · 2 评论 -
vue+element 实现表格,键盘上下键选择某一行,并选中
1.直接上代码<template> <div> <el-form label-width='0.5rem' style='display:flex' class='fromclass aline'> <el-form-item label="公司" required> <el-input style='width:1.6rem' v-model="purchase" autocomplete="off" @keyup.native.原创 2020-12-31 10:33:24 · 4248 阅读 · 4 评论 -
element 时间选择器禁止选择以前或以后的时间
<el-date-picker v-model="certificatetime" value-format="yyyy-MM-dd" :picker-options="pickerOptions" clearabletype="date" placeholder="选择日期" style='width:0.8rem'></el-date-picker>export default { data() { return { pickerOptions: { d原创 2020-12-29 09:35:20 · 2068 阅读 · 5 评论 -
element 单位写在input输入框中
input 输入框需要写在 el-form 中<el-form ref="userInfo"> <el-form-item label="金额" label-width="0.5rem"> <el-input style='width:0.7rem' v-model="money" autocomplete="off" oninput="value=value.replace(/[^\d.]/g,'')" onafterpaste="this.value=th.原创 2020-12-28 18:24:38 · 374 阅读 · 0 评论 -
vue导出Excel表格
1.安装导出excel依赖 npm install -S file-saver xlsx npm install -D script-loader2.在str文件夹中新建文件,引入两份文件 Blob.js和Export2Excel.js3.在页面中添加导出事件<el-button type="success" icon="el-icon-download" @click.native.prevent='dialogFormAdd'>导出</el-button>im原创 2020-12-28 17:54:38 · 229 阅读 · 0 评论 -
element select选择器获取选中的所有数据
1.引入select选择器 <el-select v-model="defaults" filterable placeholder="请选择" style='width:1.2rem' @change="getdefaults"> <el-option v-for="item in datalist" :key="item.code" :label="item.name" :value="item" > </el-option></el-select&原创 2020-12-28 17:19:43 · 7259 阅读 · 7 评论 -
vue webpack打包后动态修改后台接口的配置
1.在static文件下添加setup.js在里面添加ip, window.ip是添加全局变量window.ip={ baseurl:'http://localhost:8888'// 自己的ip地址}2.将setup.js文件引入index.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content=原创 2020-12-28 11:46:03 · 898 阅读 · 6 评论 -
vue实现计数器
1.展示界面<div style='font-size:50px;color:red'>{{hour}}:{{branch}}:{{second}}</div> <el-button type="primary" icon="el-icon-video-pause" @click='start'>开始</el-button> <el-button type="info" icon="el-icon-video-play" @click='suspe原创 2020-12-21 19:19:13 · 234 阅读 · 0 评论 -
vue 引入echarts并切换柱状折线图,改变折线的颜色
1.安装依赖npm install echarts -S2.引入main.jsimport echarts from 'echarts'Vue.prototype.$echarts = echarts3.创建一个vue页面<template> <DIV> <el-card id="main" style="width:32.5%;height:1.7rem;"></el-card> </DIV></template&原创 2020-11-27 14:38:22 · 2147 阅读 · 0 评论 -
vue实现图片放大预览缩放
1.引入viewerjsnpm install viewerjs2.在main.js中配置import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'Vue.use(Viewer,{ defaultOptions: { zIndex: 9999 }})Viewer.setDefaults({ Options: { 'inline': true, 'button': true, 'navbar': true,原创 2020-11-24 16:44:16 · 1088 阅读 · 0 评论 -
vue+element上传多张图片并回显
1.html代码<el-upload class="avatar-uploader" :action="url" 请求的地址 :headers='myheaders' 请求头 :on-preview="handlePictureCardPreview" 点击文件列表中已上传的文件时的钩子 :auto-upload='false' 是否在选取文件后立即进行上传:on-remove="handleRemove" 文件列表移除文件时的钩子:on-success原创 2020-11-11 09:24:39 · 2100 阅读 · 4 评论 -
vue鼠标事件
<div @click='event'>单击事件</div> <div @dblclick='event'>双击事件</div> <div @mousedown='event'>按下事件</div> <div @mouseup='event'>抬起事件</div> <div @mousemove='event'>移动事件</div> <div @mouseleav..原创 2020-11-10 10:51:31 · 504 阅读 · 0 评论 -
vue无缝滚动
vue无缝滚动插件地址:https://chenxuan1993.gitee.io/component-document/index_prod#/component/svg-bar-default原创 2020-11-09 09:09:30 · 104 阅读 · 0 评论 -
vue+百度地图实现海量点
用海量点来展示多个坐标,实测2万个坐标点显示出来只有两三秒的延迟代码示例1.在显示地图的组件中 template 中(必须设置组件高跟宽):<div id="allmap" style="width:66.2%;height:2.5rem;margin-top: 0.1rem;" ></div>2.在script 中export default { name: "home", data() { return { };原创 2020-09-17 11:27:10 · 2244 阅读 · 0 评论 -
vue+element动态搜索条件
html代码<el-card class="box-card"> <el-form label-width='0.5rem' class='fromclass'> <el-form-item :label="item.name" v-for="item in searchlist" :key='item.code' v-if="item.type=='input'" style='float: left;'> <el-input st原创 2020-09-17 10:28:59 · 1005 阅读 · 0 评论 -
vue+element 动态表格
一.html代码<el-table ref="multipleTable" :data="rolelist" border stripe tooltip-effect="dark" :height='tableHeight' v-loading="loading" element-loading-text="拼命加载中"> <el-table-column type="index" label="序号" width="70" align="center"></el原创 2020-09-17 10:18:47 · 210 阅读 · 0 评论