Vue
小问号_
小白一个
展开
-
vue实现左右两栏布局宽度可拖拽
项目里需要左右两栏布局根据内容多少可以用户自己拖拽宽度的需求。原创 2024-04-28 15:12:00 · 195 阅读 · 4 评论 -
vue项目每次更新后清除浏览器缓存
vue项目每次更新后清除浏览器缓存原创 2022-07-22 10:20:00 · 2881 阅读 · 0 评论 -
vue+element plus 点击左侧菜单,右侧内容根据路由切换
菜单切换之前都是用菜单el-menu和el-tabs标签页拼接的,但是菜单没有的组件打不开了,所以改为根据路由打开内容,主要就是改为router-view借鉴学习了这位大大的思路 指路链接自己成功之后记录下路由 router.jsconst routes = [ { path: '/', name: 'home', component: () => import("../views/Home.vue"),////这里是核心: center作为容器组件,包含左右菜单原创 2022-01-19 10:53:31 · 4415 阅读 · 2 评论 -
vue移动端适配,flexible+px2rem-loader
首先装包npm i lib-flexible --save npm i px2rem-loader --save 装完之后修改一下flexible.js的一个地方(因为依赖中当屏幕宽度大于540后,width固定写死了)改完之后的代码function refreshRem(){ var width = docEl.getBoundingClientRect().width; if (width / dpr > 540) { wi原创 2021-08-17 16:08:24 · 275 阅读 · 0 评论 -
vue导出excel (兼容ie)
参考文章链接首先在公共js文件里新建exportExcel.js文件,输出一个exportMethod函数import axios from "axios";// 导出Excel公用方法export function exportMethod(data) { axios({ method: data.method, url: `${data.url}${data.params ? "?" + data.params : ""}`, responseType: "blob"原创 2020-12-09 11:19:52 · 606 阅读 · 0 评论 -
vue解决IE9及以下不显示placeholder的问题
参考文章链接因为我是vue+elementUI的项目,所以不会每次切换菜单都会刷新浏览器,所以整理了一下vue里的用法首先在公共js文件里新建placeholder.js文件,输出一个PlaceholderInit函数//解决ie下 input 的placeholder不显示问题export function PlaceholderInit() { return jQuery(function() { var placeholderfriend = { focus: fun原创 2020-12-08 13:44:45 · 880 阅读 · 0 评论 -
vue项目安装使用scss
npm安装一些包的时候,会默认安装最新版本,但过高版本的sass会导致scss编译错误安装依赖(指定低版本安装)npm install [email protected] --save-devnpm install [email protected]在build文件夹下的webpack.base.conf.js的rules里面添加配置{test: /\.scss$/,loaders: ['style', 'css', 'sass']}在vue文件中使用<template>原创 2020-11-12 19:41:41 · 258 阅读 · 0 评论 -
VUE项目打包之后修改配置文件(包括后台地址,图片公共路径等)
Vue 打包后,如果想修改整体的后台接口域名,或者图片文件的路径,就需要在源代码中修改后,再次进行build打包。这样很不灵活,先看一下vue打包后的文件结构:项目打包后会生成一个dist文件夹dist中有一个存放外部资源的static,它里面的文件是不会被打包编译的,所以我们就可以利用外部引入js的方式将我们的想要的数据在index.html中以js文件的方式引入,也就是将图中的config.js引入到项目里的index.html中使用,然后就可以全局使用。项目中使用到的文件大致有上图几个1原创 2020-11-03 16:09:59 · 10403 阅读 · 5 评论 -
vue项目ie浏览器不显示问题
安装babel-polyfillnpm install --save-dev babel-polyfillmain.js里引入该包build下面的webpack.base.conf.js里加入以下代码以上可以解决的话,下面的可以不用管,如果不行也加进去看看吧...原创 2020-03-11 18:53:06 · 1927 阅读 · 0 评论 -
vue项目里不用npm怎么引入使用外部包
在index.html头部用script引入包,包最好放在static里在main.js里引入和定义,在页面即可直接使用$echart原创 2020-03-11 19:24:59 · 2839 阅读 · 1 评论 -
饿了么table后台排序以及分页问题
首先,官网是这么说的不需要后台的排序很简单,就不说了,接下来说一下对接后台的排序以及分页问题首先在table上写一个 sort-change 事件,指向一个函数 sortChange然后在需要排序的列上面写上 sortable=‘custom’sort-change方法自带三个参数,分别代表意义是:column:当前列prop:当前列需要排序的数据order:排序的规则(升序、降...原创 2020-03-12 15:38:14 · 1913 阅读 · 0 评论 -
服务器端饿了么图标显示不正常
在项目里build文件下utils.js文件里加入下面一行代码原创 2020-03-13 09:39:36 · 942 阅读 · 0 评论 -
VUE项目打包之后修改配置文件(包括后台地址,图片公共路径等)
本文是在借鉴了vue实现分环境打包步骤https://blog.csdn.net/zuoyiran520081/article/details/80812788的基础上实现了自己想要的效果:打包后可以修改地址项目目录及需要修改的文件如下图首先修改config配置文件修改config内的dev.env.js文件:'use strict'const merge = require('webpack-merge')const prodEnv = require('./prod.env')mo原创 2020-09-08 09:19:17 · 3324 阅读 · 0 评论 -
Vue图片预览组件v-viewer,支持旋转、缩放、翻转等操作
借鉴:Vue Vue图片浏览组件v-viewer,支持旋转、缩放、翻转等操作官网:v-viewer原创 2020-09-17 10:56:12 · 562 阅读 · 0 评论 -
ElementUI自定义表头 :render-header
将饿了么表格表头的文字修改为图标template部分修改如下:<el-table-column align="center" :render-header="renderHeader"> <template></template></el-table-column>js添加事件如下:// render 事件renderHeader(h, { column }) { // h即为cerateElement的简写,具体可看vue官方文原创 2020-09-17 11:09:15 · 2993 阅读 · 0 评论