Vue
昨夜太平长安888
愿你我既可以朝九晚五,也可以浪迹天涯;愿你我既可以拈花把酒,也能围炉诗书茶。
展开
-
「微信二次分享」➡️ 自定义标题和图片
微信二次分享,自定义标题和图片原创 2022-11-17 13:52:25 · 286 阅读 · 0 评论 -
前端 Vue与flutter之间通信
vue 如何 跟 flutter 之间进行参数传递原创 2022-11-17 13:28:40 · 987 阅读 · 2 评论 -
vue 重置页面数据
vue 重置页面数据原创 2022-09-02 09:11:07 · 1558 阅读 · 0 评论 -
element-ui 中标签el-select选中无反应问题
el-select标签,如果外部还嵌套循环,点击选中标签无反应,删除也不好使,原因由于层次太多,导致render函数没有自动更新;在el-select标签内加入 @change=“$forceUpdate()” ,强制刷新视图即可。原创 2022-06-20 13:56:52 · 5643 阅读 · 0 评论 -
vue在多方法执行完后再执行另一个方法(等待请求完数据再执行)async/await使用方法
vue 中的 async await 异步 等待 按顺序执行原创 2022-06-17 14:17:30 · 8765 阅读 · 0 评论 -
vite项目启动报错【 Cannot find module ‘unplugin-vue-components/vite 】
vite项目启动项目报错原创 2022-06-01 17:14:36 · 3016 阅读 · 0 评论 -
vue 动态添加条件或表头
话不多说 直接看效果代码如下:<template> <div> <el-form ref="formRef" label-width="70px" :model="formData" autocomplete="on" @submit.prevent> <el-row v-for="(item, index) in formData.querys" :key="index" :gutter="16" :xs="24">原创 2022-03-07 13:50:46 · 1208 阅读 · 1 评论 -
vue使用clipboard.js 《一键复制》
安装npm install clipboard --savevue项目我们可以对其进行简单的处理我们可以在项目目录下utils(没有新建)新建一个 clipboard.js文件import Clipboard from 'clipboard' //引入cliboardimport { ElMessage } from 'element-plus' //消息提示function clipboardSuccess(msg) { ElMessage.success(msg || '..原创 2021-11-11 15:09:16 · 1962 阅读 · 0 评论 -
VUE3项目搭建【vue-cli 及 vite】
第一种:通过 vue-cli 脚手架进行项目搭建:VUE3项目创建对VUE-cli的版本是有限制的,版本必需在 4.5.0以上才可以我们可以在 cmd 窗口 输入 vue -V 来进行查看如果版本不对的话可以进行版本升级:npm install -g @vue/cli建议以下方式:1.通过config命令npm config set registry https://registry.npm.taobao.orgnpm info underscore (如果上面配置正确这个命令会有字原创 2021-08-25 14:09:34 · 380 阅读 · 0 评论 -
vue input输入框实时搜索
废话不多说先看效果:代码如下:<template> <div style="padding-left: 3px; margin-top: 3px"> <!-- 搜索框 --> <div class="input-warp"> <input class="input" v-model="keyWord" type="text" placeholder="输原创 2021-07-29 17:26:07 · 931 阅读 · 0 评论 -
vue全局修改字体样式(修改成苹方)
1.首先你要先下载你需要的字体(这里已苹方为例)2.在你的项目 src 文件下创建一个文件夹里面有两个文件, 一个是你需要的字体的文件,一个是 css 样式文件3.其中 css 文件里面设置一下样式:@font-face { font-family: 'PingFang'; src: url('./PingFang.ttf'); font-weight: normal; font-style: normal;}4. 在 app.vue 文件中引入字体,全局修改原创 2021-07-20 17:50:25 · 6198 阅读 · 3 评论 -
element-upload 上传图片限制文件格式、大小以及隐藏上传框
废话不多说 先看效果代码如下:<template> <div> <div> <el-upload class="avatar-uploader" :action="upUrl" :on-success="handleAvatarSuccess" list-type="picture-card" :before-upload="beforeAvatarUplo原创 2021-07-13 17:15:54 · 1384 阅读 · 0 评论 -
Vue项目 封装 axios请求 (直接复制可用)
首先先在你的项目中安装 axios$ npm install axios安装完成之后可以在 package.json 文件中看到然后在项目 src 文件夹下创建一个文件来进行请求的封装然后 request 文件是对 axios 的处理 ,里面包含 请求头的配置 已经请求拦截和响应拦截相关的一些配置,api 文件夹主要就是 对接口的封装。项目中用到的接口 都可以写道这里面1. 先看 request 文件代码如下:(当然这写注释可以删掉)// 这是一个封装请求接口的文件import ax原创 2021-07-11 19:03:24 · 271 阅读 · 0 评论 -
Vuex数据 页面刷新丢失问题解决方案
通常在vue项目中使用vuex做全局的状态管理,但是刷新之后,vuex中的数据会丢失因为store是存储在运行内存中,当浏览器刷新时,会重新加载vue实例,store也会重新赋值通常将一些数据保存在localstorage、sessionstorage或cookie中,可以保证页面刷新数据不丢失且易于读取。vue项目一般操作都在同一个页面跳转路由,所以使用sessionstorage进行存储直接在app.vue文件添加以下代码:解决页面刷新vuex数据丢失问题 created() { i原创 2021-07-03 11:31:06 · 348 阅读 · 0 评论 -
ES6 对象的简化写法
ES6允许在大括号里面,直接写入变量和函数,作为对象的属性和方法前提是对象的属性必须和变量的名字是一样的let name = '你好'let famous = function() { console.log('时间管理大师')}const star = { name, famous}// 相当于// const star = {// name: name,// famous: famous// }ES6还允许在对象中写函数时,去掉:原创 2021-06-04 19:36:32 · 269 阅读 · 0 评论 -
uniapp 小程序 手写弹框单选选择器
先看效果:直接贴代码:<template> <!-- 退款申请页面 --> <view> <nav-bar title="退款申请"></nav-bar> <view class="application"> <view class="goods"> <view class="houseImg"> <image :src=原创 2021-04-30 18:40:42 · 850 阅读 · 2 评论 -
vue 多选按钮 点击选中改变样式 再次点击取消选中
话不多说 先看图代码: <view class=""> <view class="oneTit"> 房源属性(多选) </view> <view class="listingsSty fangy"> <view class="firsty" v-bind:class="item.ischeck == true ? 'active'.原创 2021-04-24 10:30:07 · 2152 阅读 · 1 评论 -
Element-UI的Table组件解决换页后序号重新从1开始的问题
问题:使用了el-table,设置indx属性显示数据的行号后,发现第二页的序号还是从1开始排序解决:设置一个count方法,在换页后重新计算表格行号 <el-table-column label="ID" type="index" :index="count" />在method方法中添加以下方法:count(index) { return (this.currentPage - 1) * this.pageSize + index转载 2021-04-14 10:57:55 · 1082 阅读 · 0 评论 -
element el-table组件实现列表自动滚动
效果图:需要配合vue-seamless-scroll插件安装命令行执行:npm install vue-seamless-scroll --save然后在main.js文件里面引入使用:import scroll from 'vue-seamless-scroll'Vue.use(scroll)代码:<template> <div class="min"> <div style="display: inline-bloc原创 2021-01-29 16:19:24 · 4513 阅读 · 6 评论 -
Echarts 渐变折线图
图例:代码:<template> <div class="policPic"> <div id="chart_example" ref="chart_example"></div> </div></template><script>export default { data() { return {}; }, created() {}, mounted() {原创 2021-01-29 11:51:26 · 453 阅读 · 0 评论 -
Echarts 横向柱状图
实例图片:横向显示将xAxis的type设置为value, 将yAxis的type设置为category即可实现横向显示 placeCharts() { let myChart = this.$echarts.init(sportIMg); myChart.setOption({ grid: { left: "15", containLabel: true, }, xAxis:原创 2021-01-29 11:15:58 · 18613 阅读 · 2 评论 -
VUE项目中使用 Echarts data Zoom缩放功能
看实例:data zoom:有inslide和slide两种dataZoom,也分X,Y轴dataZoom:[ { type:"slider",//slider表示有滑动块的, show:true, xAxisIndex:[0],//表示x轴折叠 start:1,//数据窗口范围的起始百分比,表示1% end:20//数据窗口范围的结束百分比,表示20%坐标 }, { .原创 2021-01-29 09:45:43 · 2375 阅读 · 1 评论 -
vue项目如何实现每隔多长时间请求一次接口???
在实际项目中我们经常需要实现轮询-每隔一段时间请求一次接口刷新数据window.setInterval(() => {setTimeout(() => {///调取接口}, 0)}, 30000)具体秒数看需求而设定,这里先设定30秒(setTimeout是自带清除定时器)在vue项目中我们直接在 created(){} 生命周期中写就可以了 created() { this.currentTime(); this.getRoleList();原创 2021-01-27 13:22:29 · 6547 阅读 · 1 评论 -
关于VUE + Element 侧边栏页面刷新后不高亮显示的问题
写后台管理系统 我们会经常用到element,侧边栏导航的时候路由跳转没有问题 但之后页面刷新发现侧边栏的选中状态(高亮显示)没有了,针对这个问题特别提出以下见解:直接贴代码:<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" text-color="#333"原创 2021-01-25 09:26:33 · 1038 阅读 · 0 评论 -
VUE + Element-UI 使用el-table 如何实现表头文字加文字说明
先看效果:当鼠标放到“❓”上面是,弹出一个小框进行提示:代码如下:给 el-table-column 添加:render-header="renderHeader"然后在methods 方法中这样写: // 表头增加提示 // render 事件 renderHeader(h, { column }) { return h("div", [ h("span", column.label), h( ...原创 2021-01-21 18:19:38 · 3360 阅读 · 0 评论 -
VUE + element使用 el-table 组件实现不同的状态值显示不同的颜色?
先看想要的效果:因为现在从后台请求的数据都是离线的。所以都是红色,如果有在线的 ,字体需要变成绿色直接代码附上: <el-table-column prop="temperatureStatus" label="状态"> <template scope="scope"> <span v-if="scope.row.temperatureStatus == '正原创 2021-01-21 18:10:14 · 2548 阅读 · 0 评论 -
vue项目 手撸全屏遮罩层
<template> <div> <div id="mask" v-show="isPay"> <div class="mask_img"></div> </div> <button @click="mask()">11111</button> </div></template><style scoped>#mask { .原创 2020-11-27 11:05:39 · 983 阅读 · 0 评论 -
如何在vue项目中使用 Echarts?
先看效果:多余的话 不多说 直接上代码:(当然 如果你有更好的方法,欢迎私信留言)<template> <div class="Heart_rate"> <!-- 饼状图 --> <div class="piechartLeft"> <div id="chart_example" ref="chart_example"></div> </div> &l..原创 2020-11-13 16:27:30 · 245 阅读 · 0 评论 -
VUE + Element-UI 使用Cascader 级联选择器,后端返回的字段和我们需要的不一致怎么办?
我们先看Cascader 级联选择器 官方文档提供的数据格式: options: [ { value: "zhinan", label: "指南", children: [ { value: "shejiyuanze", label: "设计原则", children: [ {.原创 2020-11-09 10:36:36 · 4211 阅读 · 1 评论 -
VUE中使用sessionStorage或者localStorage存取对象或者数组时会显示[object object]
VUE如果直接使用sessionStorage.setItem和sessionStorage.getItem来进行存取对象的话,不能正常使用该对象,并且在Application的Session Storage中会显示[object object]解决方法:转换为json格式进行存取var ary = [1,2,3]var json = { x:1, b:2}存储://存储sessionStorage.setItem('arr',JSON.stringif原创 2020-11-06 16:28:26 · 5064 阅读 · 0 评论 -
关于vue+element-ui项目Pagination的分页,返回默认显示第一页的问题
先看问题效果:当我页面展示在第三页的时候,我点击某一列的信息详情,返回回来直接到第一页?这显然不是我想要的效果。我们期望的效果是:详情页返回回来后 还是在第三页。出现这种问题该怎么解决呢?(直接贴代码) <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="messageLis.原创 2020-11-06 16:01:53 · 4926 阅读 · 4 评论 -
VUE + ElementUi 表格实现单元格内容显示固定字数且超出省略号显示
在项目中我可能会遇到表格单元格内容过多的问题,那么如何将该列单元格格式化,只让它显示几个字呢? 就像这样。。我们可以给当前单元格设置 :formatter 属性,用来格式化内容 Function(row, column, cellValue, index) <el-table-column prop="messageContent" label="发布内容" width="300" :formatter="stateFormat"></el-table-colu..原创 2020-11-06 15:22:31 · 6721 阅读 · 8 评论 -
elementUI的时间选择器-选择日期范围,选择时间后获取时间的格式问题
选择日期范围:value-format="yyyy-MM-dd"//加上这行代码,不然获取的时间格式用不了 <el-date-picker v-model="tablesForm.options.attendanceDate" value-format="yyyy-MM-dd" format="yyyy-MM-dd" c..原创 2020-11-03 14:10:16 · 1450 阅读 · 0 评论 -
vue 点击键盘回车键和点击按钮,实现登录功能
欢迎各位看官大佬光临,麻烦各位文章末尾一键三联,你的支持是我坚持下去的动力,谢谢!!!在项目中我们想要实现点击按钮或者直接点击键盘回车键实现一键登录该怎么做呢?我们可以给登录按钮绑定两个点击事件:(代码如下)<el-button type="primary" @click="login" @keyup.enter="login">登录</el-button>login 是直接点击按钮的登录事件 methods: { login() { c原创 2020-11-03 11:12:49 · 9615 阅读 · 1 评论 -
VUE中如何给v-for循环出来的元素设置不同的样式
效果图:1. 我们可以给要循环的盒子动态绑定class名 并且传入一个数组 <div class="AllPeople" v-for="(item , index) in rankingData" :key="index" :class="sstt[index]"> <div class="inner"> <span class="innerContent">TOP1告警区域 {{item.area}}<.原创 2020-10-14 09:31:23 · 3813 阅读 · 1 评论 -
如何在 Vue 项目中使用 ECharts
1. 安装Echatsnpm install echarts --save2. 项目入口文件main.js中引入Echarts// 引入echartsimport echarts from 'echarts';Vue.prototype.$echarts = echarts;例子:<template> <div id="personDetail" ref="personDetail"></div></template>&l原创 2020-10-10 10:40:18 · 451 阅读 · 2 评论 -
Element-UI 项目中 Pagination 分页如何使用 ???
先看效果:应用场景: 一般分页功能多用于一些数据量较大的信息展示页面,通过分页可以设置每页的显示数量。多用于和el-table结合使用!属性参数 说明 类型 可选值 默认值 small 是否使用小型分页样式 boolean — false background 是否为分页按钮添加背景色 boolean — false page-size 每页显示条目个数,支持 .sync 修饰符...原创 2020-10-09 15:06:15 · 7923 阅读 · 0 评论 -
vue + axios + input实现图片上传 以及 文件上传及下载功能
图片上传:html部分<input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update($event)"/>axios的post请求,发送form数据部分,这样就可以无刷新的提交form数据到后台 methods: { // 图片上传 update(e) { let file = e.target.files[0原创 2020-09-27 14:48:42 · 1860 阅读 · 0 评论 -
VUE 项目手写穿梭框
项目用到了穿梭框这个功能,刚开始用 Element-UI 组件库来写,没有达到预期的效果,于是就自己手撸写了一个;先看效果:代码附上: <!-- 绑定设备弹窗 --> <el-dialog title="绑定定位触发器" :visible.sync="jobsBoundPopup" width="30%" center> <!-- 穿梭框 --> <div class="row"> <原创 2020-09-24 18:28:01 · 1390 阅读 · 1 评论 -
关于启动 vue 项目出现 98% after emitting CopyPlugin 的解决方法!
看你的页面组件是否正确引入,是不是有没有路径没有写,反正我的是路径没有写,造成的这个问题!!原创 2020-08-13 18:44:42 · 4585 阅读 · 1 评论