tangyuan的博客

1.原生的js刷新方式：location.reload();2.vue自带的路由跳转方式：this.$router.go(0);使用过后发现这俩种方式都会使页面有短暂的空白，体验效果不是特别好所以总结出了第三种方式3. 在app或者路由插槽处声明以下代码：<template> <div id="app"> <router-view v-if="isShow"/> </div></template><scr

vue中echarts报错 Cannot read property ‘init’ of undefined将代码import echarts from 'echarts'改为import * as echarts from 'echarts'

子组件中利用watch监听父组件值的变化// 子组件props: ["a"], watch: { a(oldValue, newValue) { // oldValue a旧值 // newValue a新值 } }

假如子组件中有一个方法，想在父组件中直接调用、触发，这个时候就会用到ref属性子组件children中有一个方法jumpTrger()methods: { jumpTiger() {},在父组件中调用子组件，并加上ref属性// 在这里加上ref属性<children ref="child"></children>父组件的方法中this.$refs.refName.methodsFromChildren();methods: { jumpButton() {

数组：遍历其中数据<li v-for="item in items"> {{ item.message }}</li>数组：遍历数据及索引<li v-for="(item,index) of items"> {{ item.message }} + {{ index }}</li>字典：键 值 索引<li v-for="(value,key,index) in object"> {{ value }} {{key}}

<template> <div class="title-container"> <div> <el-image style="width: 100px; height: 100px; left: 10px" :src=shuLog fit="contain"> </el-image> <div class="title"> <span>xxxx平台</span&

屏幕信息screen.height // 屏幕的高度screen.width // 屏幕宽度screen.availHeight // 屏幕可用高度：即屏幕高度减去上下任务栏后的高度，可表示为软件最大化时的高度任务栏高/宽度 ：可通过屏幕高/宽度 减去 屏幕可用高/宽度得出。如：任务栏高度 = screen.height - screen.availHeight浏览器信息window.outerHeight // 浏览器高度window.outerWidth // 浏览器宽度window

Vue中抽取的footer组件，可复用<template> <div class="app-foot"> {{footerMsgCopyright}} <span class="source">{{footerMsgName}}</span> </div></template><script>export default { name: 'AppFoot', data() {

vue页面中显示图片，直接在src中指明图片路径，页面显示加载失败，下面介绍在vue页面中显示图片。html页面<div class="shu-log"> <el-image style="width: 100px; height: 100px" :src=shuLog fit="cover"> </el-image></div>script声明export default { name: 'L

keep-alive遇见vue-routerkeep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染router-view也是一个组件，是vue-router的内置组件，如果直接被包在keep-alive里面，所有路径匹配到的视图组件都会被缓存...

1. Vue ob: Observerob_: Observer这些数据是vue这个框架对数据设置的监控器，一般都是不可枚举的。假设list里面存放的就是那些带有__ob__: Observer的可以用下面代码解决```javascriptJSON.parse(JSON.stringify(this.list)）```2. vue中实现先请求数据再渲染dom按照 请求数据—>...

安装npm install @xunlei/vue-context-menu在组件代码中引用<script>import { component as VueContextMenu } from '@xunlei/vue-context-menu'export default{ 'vue-context-menu': VueContextMenu}</scrip...

element-ui el-select组件 使用报错Missing required prop: "value"<el-form-item label="进程"> <el-select placeholder="请选择"> <el-option v-for="item in process" :value="item.id" ...

<template> <div> <el-table ref="filterTable" :data="tableData.slice((currpage - 1) * pagesize, currpage * pagesize)"> <el-table-column ...

使用菜单栏进行路由跳转<el-menu :default-active="this.$route.path" class="el-menu-vertical-demo" router background-color="#708090" text-colo...

在vue中将简体字转化成繁体字这段代码写在utils.js中function simpPYStr(){ return '啊阿埃挨哎唉哀皑癌蔼矮艾碍爱隘鞍氨安俺按暗岸胺案肮昂盎凹敖熬翱袄傲奥懊澳芭捌扒叭吧笆八疤巴拔跋靶把耙坝霸罢爸白柏百摆佰败拜稗斑班搬扳般颁板版扮拌伴瓣半办绊邦帮梆榜膀绑棒磅蚌镑傍谤苞胞包褒剥薄雹保堡饱宝抱报暴豹鲍爆杯碑悲卑北辈背贝钡倍狈备惫焙被奔苯本笨崩绷甭泵蹦迸逼鼻比鄙笔...

1、安装依赖npm install element-china-area-data -S2、在组件内引入import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'其中：...

存放Echarts的DOM容器，如果给的高和宽是百分比，渲染的时候DOM容器的高和宽是按百分比给的，但是DOM容器下的子元素div和canvas高和宽是根据图标内容渲染。项目应用的时候，底部会有一部分DOM容器和div的高度差，不美观。希望Echarts的canvas和DOM容器的高宽一致。下面给出代码：<template> <div id="main"><...

网络请求request.jsimport axios from 'axios'export function request(config) { // 1、创建axios的实例 const instance = axios.create({ baseURL: 'http://', timeout: 5000 }) // 2、axios的拦截器 // 2...