vue
yumihe
这个作者很懒,什么都没留下…
展开
-
vue项目中mockjs的简单场景使用
安装mockjs:npm install mockjs --save-dev在vue.config.js平级创建mock.jsimport Mock from 'mockjs'// 该方法用于拦截带参数的地址let getRegExpUrl = (url) => { return RegExp(url + '.*')}Mock.mock(getRegExpUrl('/cooperate-case-server/flowRules/selectFlowRules'), { '原创 2020-06-17 14:24:43 · 794 阅读 · 0 评论 -
vue-cli3 vue.config.js 配置entry 引入mock..js
使用场景:在开发环境,使用mock.js;在生产环境,不使用mock.jspackage.json配置:"scripts": { "serve": "cross-env NODE_ENV=development vue-cli-service serve", "build": "cross-env NODE_ENV=production vue-cli-service build",}vue.cofig.jsconfigureWebpack: (config) => {原创 2020-06-17 14:16:13 · 8506 阅读 · 0 评论 -
el-table 动态生成多级表头
html代码:<el-table v-loading="loading" :data="orgTableData" :header-cell-style="{'background':'#f5f7fa','color':'#666'}" stripe border> <el-table-column prop="number" label="序号" width="80" type="index" align="cent原创 2020-06-17 14:07:50 · 4337 阅读 · 3 评论 -
el-table 动态生成表头
html代码:<el-table v-loading="loading" :data="orgTableData" :header-cell-style="{'background':'#f5f7fa','color':'#666'}" stripe border> <el-table-column prop="number" label="序号" width="60" type="index" align="cent原创 2020-06-17 14:04:41 · 5513 阅读 · 0 评论 -
axios post请求变成了get 报错405
今天sb了……创建了axios实例,配置选项后,发现post请求变成了get请求,报错405对axios封装的部分代码:let instance = axios.create()const $axios = function(opts) { opts.params = { time: new Date().getTime() } retu...原创 2019-08-05 17:47:36 · 8336 阅读 · 11 评论 -
vue打包dist包,通过nginx反向代理,在本地访问
第一步:去官网下载nginx第二步:打开配置文件:conf/nginx.conf,有三处配置server { listen 8888; location / { # 配置dist文件路径 root /project/project-rsdq/RSDQ/rsdq-client/dist; index index.html i...原创 2019-07-25 10:42:01 · 2469 阅读 · 2 评论 -
iView - table 解决分页后跳转到其它页,序号还是从1开始的问题
不分页的情况下,可以type="index";data() { return { tableColumn: [{type: 'index', width: 70, align: 'center', title: '序号'}] }}分页的情况下,有两种方式:方式一:在data中定义列表项时赋值data() { return { tableColu...原创 2019-08-08 09:45:33 · 2098 阅读 · 0 评论 -
vue项目中如何嵌入其它项目的页面
通过iframe嵌入,src的路径在static中(vue-cli3在public)配置编译打包时,不会将static/public里的文件编译,前端可修改index.js里的url方式一:创建index.js,在入口页面中引入static/urls/index.jswindow.urlsPath = { statisticsUrl: 'http://xx.xx.xx.x...原创 2019-08-08 15:01:09 · 35098 阅读 · 3 评论 -
visibilitychange - 指定标签页可见时,刷新页面数据
三个知识点: 一通过监听浏览器页面可见性改变(visibilitychange)事件,来判断标签页是否可见 二配置路由的meta,来判断是否是指定的标签页 三调用其它模块的actions,刷新数据router.jsroutes: [ { path: "/", redirect: "index" }, { path: "/ind...原创 2019-08-08 16:31:53 · 1198 阅读 · 0 评论 -
new RegExp() + scrollIntoView() 实现关键词查询,添加高亮样式
通过一个小demo实现以下功能点: (1)对内容做关键词查询,将内容中的关键词添加高亮样式,默认第一个关键词样式区别其它关键词样式 (2)点击上一个下一个按钮查找关键词,使当前关键词样式区别于其它关键词样式 (3)当前关键词通过scrollIntoView(),使其始终出现在可见区域内 (4)点击清空,清空所有关键词高亮样式,滚动条...原创 2019-08-19 15:34:05 · 418 阅读 · 0 评论 -
js - 通过锚点实现导航联动内容,通过监听容器里的滚动条,实现内容联动导航
写这篇文章的背景:接手的项目中有一个页面,通过锚点实现了导航联动内容,但是没有实现内容滚动时联动导航于是我在项目中实现这一功能之前,在本地模拟了相同的场景以下代码可以直接复制到本地查看效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <ti...原创 2019-08-15 17:19:40 · 2553 阅读 · 0 评论 -
vue-cli 3.0 反向代理 配置跨域
描述:通过定义的参数,代理到proxy中target指向的地址。vue.config.jsmodule.exports = { devServer: { proxy: { // 配置跨域 '/api': { target: "http://172.33.44.11:8081/rsd...原创 2019-07-24 17:08:58 · 1846 阅读 · 0 评论 -
vuex,缓存字典数据 + 调用其它模块的actions里请求
描述:调用其它模块actions里的请求接口,查字典,用于格式化数据。在查字典接口里,第一次会把请求数据缓存起来,以便调用时,先从缓存里拿字典数据,如果缓存没有,才会发起请求。store -> modules -> dic.jsimport axios from '@/utils/http'import api from '@/api/dic'import * as ...原创 2019-07-24 16:55:43 · 3583 阅读 · 1 评论 -
vuejs实现折叠面板展开收缩动画
vuejs通过css3实现元素固定高度到auto高度的动画和auto高度到固定高度的动画。循环列表,html:<template> <div class="newslist"> <ul> <li v-for="(item,index) in newslist" :key="index">原创 2018-09-05 16:01:27 · 19501 阅读 · 1 评论 -
mpvue开发微信小程序,在vue中能用,但在mpvue中不支持的地方
mpvue是使用vue.js开发微信小程序的前端框架,这篇文章主要说一下,开发微信小程序过程中遇到的在vue中支持,但在mpvue中不支持的地方:(1)不支持v-html。因为小程序没有dom的概念。(2)不支持部分javascript渲染表达式,如:<!--方法的调用--><p>{{getDesc(song)}}</p><!--过滤...原创 2018-08-16 17:35:20 · 6393 阅读 · 3 评论 -
vue中实时监听input值的变化,停止输入n秒后去请求,而不是时时请求数据
在做搜索功能的时候,我们不希望input框中值一改变,就马上去请求数据,而是在指定间隔内没有输入时,才会执行函数。如果停止输入但是在指定间隔内又输入,会重新触发计时。这就是函数防抖。因为我们可能在input框中的值还没有输完,这个时候,增加一个字符,就发送一次请求,这样太消耗程序,可能出现卡顿的情况。因此,实时监听input值的变化,输入一个字符,200ms后再去获取input中的输入值。...原创 2018-08-17 16:21:01 · 23436 阅读 · 6 评论 -
vue中rem自适应布局 -- lib-flexible && px2rem-loader
(1)安装插件lib-flexible && px2rem-loader npm install lib-flexible px2rem-loader --save(2)在build目录下找到utils.js在cssLoaders里增加: const px2remLoader = { loader: 'px2rem-loader', ...原创 2018-08-17 16:32:49 · 1500 阅读 · 0 评论 -
vue项目打包报错
npm run build , 将vue项目打包,在浏览器中运行,可能会出现的问题:(1) js css 路径报错解决:在config/index.js中,将build对象下的assetsPublicPath: '/'改成assetsPublicPath: './'即把绝对路径变成相对路径(2)页面不报错,但是空白。在src里面router/index.js路由设置里边默认...原创 2018-08-17 17:07:20 · 2849 阅读 · 1 评论 -
Mint-UI之Toast与Indicator在flyio中的使用
Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库Fly.js 是一个基于 promise 的,轻量且强大的Javascript http 网络库(1) 安装mint-ui与flyio npm install mint-ui flyio --save (2) 在引用fly的组件中,引入Indicator与Toast.或者将其封装到js中,页面引入这...原创 2018-08-17 17:27:19 · 2668 阅读 · 0 评论 -
vue中使用Vue.set()报错 Cannot convert undefined or null to object
使用Vue.set()直接在data上增加属性 export default { data() { return { width: '100' } }, methods: { scrollFn(e) { Vue.set(this.data, 'height', 0) } ...原创 2018-08-27 14:27:01 · 22710 阅读 · 0 评论 -
vue将时间戳转换成日期格式
(1)创建一个处理时间格式的js,内容如下:export function formatDate(date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) } let o = { ...原创 2018-08-23 16:53:05 · 45130 阅读 · 2 评论 -
vue中.sync修饰符的使用
场景需求:在父组件data里定义一个变量page,我们希望在子组件里改变这个变量并传给父组件。在父组件里: <template> <v-pagination :page.sync="page></v-pagination> </template> <script type="text/ecmascript-6">.原创 2018-08-24 11:53:28 · 12316 阅读 · 0 评论 -
vue中element-ui组件的使用
element-ui Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库(1)通过npm安装:npm install element-ui --save-dev(2)完整引入,全局配置:在main.js中引入:import Element from 'element-ui'import 'element-ui/lib/theme-ch...原创 2018-08-24 13:37:39 · 2528 阅读 · 0 评论 -
vue中wowjs的使用
(1)通过npm安装:npm install wowjs --save-devanimate.css会自动安装。(2)在main.js中引入animate.cssimport 'animate.css'在组件需要的地方引入wowjs有两种使用方式:1. import {WOW} from 'wowjs' mounted() { new WOW().init() ...原创 2018-08-24 13:47:45 · 11296 阅读 · 3 评论 -
获取url传参id
(1)vue获取url传参id,this.$route.query.id(2)mpvue获取url传参id,this.$root.$mp.query.id(3)微信小程序获取url传参idonLoad: function(options) { console.log('传来的id', options.id)}...原创 2018-08-12 19:03:54 · 3610 阅读 · 0 评论