vue
Web_阿凯
这个作者很懒,什么都没留下…
展开
-
vue使用addRoute实现动态路由
vue使用addRoute实现动态路由原创 2023-02-13 15:49:37 · 1529 阅读 · 0 评论 -
vue项目下载项目本地文件
将文件放置 public 文件夹下,在需要下载直接 window.location = '/+文件名';eg: 我文件直接放置在public文件夹下的根目录,文件名为student_list window.location = '/student_list.xlsx';原创 2021-11-12 11:53:27 · 2185 阅读 · 0 评论 -
vue3使用vue-seamless-scroll注意事项
1.安装vue-seamless-scroll 插件npm install vue-seamless-scroll --save2.原创 2021-06-01 10:19:36 · 2517 阅读 · 2 评论 -
vue切换用户时,重置路由
目前路由大多都是后端动态传过来的,不同用户菜单权限会有所不同,在切换用户时,会出现菜单错乱的情况,这时候就需要重置菜单了import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题const originalPush = Router.prototype.pushRouter.prototype.push = function原创 2021-05-24 15:33:38 · 8144 阅读 · 8 评论 -
vue子组件如何修改父组件值
子组件直接修改父组件的值的话会提示错误,如下:父组件:<template> <div class="home"> <page1 :msg.sync="msg"></page1> </div></template><script>import page1 from "@/components/page1.vue";export default { name: "Home", c.原创 2021-04-01 08:36:58 · 1115 阅读 · 0 评论 -
vue-router中children使用方法
children的使用场景:比如页面左侧显示菜单,右侧显示不同菜单下的内容,类似如下element网站,那么右侧部分的内容就是当前页面的children存在如下场景,点击导航一跳转至页面1,导航二跳转页面2,且页面1中存在子页面路由js如下:const routes = [{ path: '/', name: 'Home', component: Home, children: [{ path: '/page1', name: '..原创 2020-10-20 11:18:28 · 32158 阅读 · 0 评论 -
解决uni-app中movable-view放大后无法缩小
<movable-area scale-area class="movable-area"> <movable-view class="movable-view" direction="all" scale="true" scale-min="0.5" scale-max="4" :scale-value="scale"> <image class="lookimg" :src="nowSrc" mode="widthFix"></image&..原创 2020-05-26 16:59:09 · 2485 阅读 · 1 评论 -
Element日期时间范围选择框添加范围限制
主要利用判断时间戳来设置是否可选html如下: <el-date-picker v-model="value" type="datetimerange" format="yyyy-MM-dd HH:mm" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions0"> </el-date-picker>js如下:原创 2020-05-15 09:35:01 · 1307 阅读 · 1 评论 -
Element循环表单验证(单层循环与双重循环)
Element的表单验证要注意的就是v-model和prop的值要对应上,不然无法触发验证1.单层循环表单html代码如下: <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <templat...原创 2020-04-24 23:11:56 · 5466 阅读 · 9 评论 -
非脚手架,vue项目兼容ie方法
主要用babel这个js,可以去这个网址下载https://github.com/babel/babel-standalone/releases按照正常得引用方式引用即可<script src="./static/js/babel.min.js"></script>另外还需要修改script标签的type类型<script type="te...原创 2020-04-21 14:09:09 · 1001 阅读 · 1 评论 -
element添加日期限制
一、单个日期框<el-date-picker v-model="value1" type="date" placeholder="选择日期" :picker-options="pickerOptions"></el-date-picker>情景1: 设置选择今天以及今天之后的日期data (){ ...原创 2020-04-17 21:44:37 · 2974 阅读 · 0 评论 -
element多选下拉实现全选效果
实现效果如下 :下拉选项全都勾选时,【全选】自动勾选; 下拉选项部分勾选时,点击【全选】后,所有下拉项全部勾选; 下拉选项全都未勾选时,点击【全选】后,所有下拉选项不勾选; 下拉选项和【全选】都选上的时候,不勾选任意下拉选项,【全选】按钮就不勾选了;html代码如下:<template> <el-select multiple collapse-tags v-...原创 2020-04-16 16:28:05 · 1568 阅读 · 1 评论 -
element表单验证数字类型和范围
判断数字类型需要用到number修饰符html如下:<el-form:model="ruleForm1":rules="rules"ref="ruleForm"label-width="100px"class="demo-ruleForm"><el-form-itemlabel="年龄"prop="region...原创 2020-04-15 18:58:57 · 14203 阅读 · 2 评论 -
实现点击element已上传文件进行下载
实现这个功能主要用到element的on-preview钩子函数html代码如下: <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" ...原创 2020-04-06 11:36:31 · 6579 阅读 · 7 评论 -
vue判断是否登录,若未登录跳转登录页
需要使用vuex,在state中存储一个isLogin字段,用于判断是否登录export const store = new Vuex.Store({ state: { isLogin: false }})在main.js中添加判断是否登录 //判断是否登录 router.beforeEach(function (to, from, next) {...原创 2020-01-13 15:16:37 · 3136 阅读 · 1 评论 -
如何设置element的时间选择器,当日后面的时间无法选中
html代码如下: <el-date-picker v-model="dataDate" size="small" type="daterange" :picker-options="pickerOptions0" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-p...原创 2020-01-11 16:29:45 · 2732 阅读 · 2 评论 -
vue利用三目运算符绑定class
通过三目运算符来绑定class是一种比较常见的操作需要注意的是要在data里面声音下class的名称 <p :class="isIncrse?incrseP:downP">环比<i></i>{{item.num}}</p>data() { return { isIncrse: true, in...原创 2020-01-09 17:40:45 · 7961 阅读 · 0 评论 -
使用element的tabs切换时,echarts无法正确显示
最近在使用tabs切换时,发现除了第一页的echarts显示正常以外,其他的显示都不正常,具体现象如下: 其他页的echarts会挤在一起,没办法正常显示,可以在tab切换的事件中,在相应的tab页设置定时器,并在定时器中渲染echarts,以及resize对应的echarts对象。setTimeout(function () { ...原创 2019-12-31 11:20:22 · 1746 阅读 · 0 评论 -
vue的this.$set()用法
在vue中,如果我们直接为对象增加新属性并赋值、数组的增删,并不会触发页面的更新,这是由于es5的限制这时候就可以用this.$set(this.data,”key”,value’)例如:this.$set(this.student,"age", 24)...原创 2019-12-05 09:32:10 · 1795 阅读 · 0 评论 -
vue实现倒计时功能
简单介绍下倒计时功能html如下:<div class="time_line">倒计时:{{hour}}:{{minute}}:{{second}}</div>js如下:<script type="text/javascript"> new Vue({ el: "#page", data() {...原创 2019-11-02 17:32:58 · 9086 阅读 · 6 评论 -
解决vue路由跳转页面时显示的是页面的底部
相信在利用路由跳转时都遇到过,打开的新页面是页面的底部而不是顶部。我们可以用过修改解决这个问题。export default new Router({ routes: [{ path: '/', name: 'Index', component: Index, meta: { keepalive: false, } }], scr...原创 2019-09-04 14:24:34 · 3326 阅读 · 1 评论 -
vue移动端自动将px转换成rem
在开发移动端的过程中,如何频繁的去计算rem和px之间的转换时一件非常麻烦的过程,接下来提供一个vue框架可以自动转换一、安装lib-flexible依赖npm install lib-flexible --save二、引入lib-flexible依赖main.js中添加以下代码import 'lib-flexible/flexible'三、配置meta 标签内容 <m...原创 2019-09-02 11:46:05 · 1227 阅读 · 0 评论 -
vue实现点击动态更换样式
vue有一个很大的优点就是不用操作dom,极大的提高了性能,就像下面的实现点击动态绑定样式这个功能,相比js和jq就精简了很多。html:<div class="type_div"> <span class="type_item" :class="{ active:index==typeActive }" v-for="(item, index) in types" @c...原创 2019-08-28 14:12:45 · 3105 阅读 · 0 评论 -
第一个Vue脚手架项目搭建
①安装node运行环境我这里node环境是已经安装完毕了,具体安装的步骤就不演示了,需要注意的是版本不能太低,否则版本过低会出现问题。②安装vue-cli脚手架依赖这里是使用npm来进行安装npm install -g vue-cli //-g表示安装到全局安装完成后可输入vue来进行查询是否安装成功。可能会有一些人使用npm安装很慢,这里也可以用淘宝的cnpm来进行安装...原创 2019-06-05 09:10:10 · 251 阅读 · 0 评论 -
router-view实现页面缓存机制
项目中页面进行跳转时,大多都会向服务器发送请求,不仅会增加服务器的压力,页面的加载相对来说也会比较慢。在vue中可以利用router-view来实现页面的缓存机制,减少请求的次数。①App.vue<keep-alive> <router-view></router-view></keep-alive><router-view v...原创 2019-05-30 11:21:32 · 4402 阅读 · 0 评论 -
使用vue-resource来进行网络请求
本篇文章主要讲解如何用vue-resource来进行简单的网络请求,vue中vue-resource类似ajax的网络请求功能。①安装vue-resource依赖在使用vue-resource之前,我们需要进行依赖的安装,在项目根目录的命令行中,输入npm install --save vue-resource②在main.js中引入在引入基本的vue之后,我们需要在在main.js...原创 2019-05-27 17:28:09 · 393 阅读 · 0 评论 -
利用axios读取后台接口
我们都知道在vue2.0以后就对vue-resource停止更新了,推荐使用的则是axiosaxios使用的方式也很简单,通过三个步骤就可以实现一、安装 axiosnpm install axios二、引入 axios在main.js文件中import Vue from 'vue'import App from './App'import router from './route...原创 2019-09-04 16:20:10 · 1161 阅读 · 0 评论 -
element根据输入框内容筛选table
<template> <div class="table"> <div class="search-Box"> <el-input placeholder="请输入关键字" icon="search" class="search" v-model="search"></el-input> </...原创 2019-09-11 15:26:53 · 4686 阅读 · 1 评论 -
vue父组件改变子组件的data
在项目开发的过程中,我们会经常使用到ref,刚开始学习vue的时候以为这个是鸡肋,后来发现真香父组件改变子组件的data父组件<template> <button @click="changeData()">改变子组件的data</button> <child ref="childDom"></child></templ...原创 2019-09-16 09:59:28 · 1256 阅读 · 0 评论 -
vuex的安装以及使用
vuex是vue的状态管理包,通常在中大型项目中使用①安装vuex安装vuex的方法和安装其他包的方法一样,直接 npm install vuex --save②使用vuex在src的目录下创建store,然后再store目录下创建state.js文件state.js文件内容如下import Vue from 'vue'import Vuex from 'vuex'Vue.u...原创 2019-09-17 15:06:21 · 284 阅读 · 0 评论 -
vue路由守卫的使用
使用路由守位我们需要使用vuex来存放全局的用户信息①存在全局用户信息1.首先展示我的项目路径2.store/index.js文件内容如下:这里主要是引入一些文件,以及进行挂载import Vue from 'vue'import Vuex from 'vuex'import state from './state'import mutations from './mutatio...原创 2019-09-17 16:07:10 · 1234 阅读 · 0 评论 -
解决vue-cli3使用axios显示404
今天第一次用调取后台的接口,接口是通的,但是一直显示404后来发现是我调的接口没加/api加上以后就行了原创 2019-09-19 16:10:15 · 1749 阅读 · 0 评论 -
element的表单提交后如何清空表单
使用element的清空表单,有几个地方要注意下,先上代码 <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline"> <el-form-item label="供应商" prop="region"> <el-sel...原创 2019-09-23 13:42:18 · 8376 阅读 · 2 评论 -
VUE父子组件传值以及父子组件触发对方的方法
父子组件传值1、父传子父传子主要通过在父组件v-model绑定数据,在子组件进行用props进行数据的接收父组件<template> <div id="container"> <Child :msg="data"></Child> </div></template><...原创 2019-09-29 09:27:12 · 1772 阅读 · 0 评论 -
Vue--配置路由步骤
本篇文章主要是用过一个小Demo来实现路由的搭建①在main.js文件中引入路由这个格式通常是固定的,一般是:import VueRouter from 'vue-router'②在main.js文件中配置路由const router = new VueRouter({ routes: [ {path: "/",component:Home}, {path: "/h...原创 2019-05-25 09:53:31 · 9357 阅读 · 2 评论