Vue使用总结

URL传参解决参数在/#/前

 this.code = this.$route.query.code || null
if (window.location.search) {
  const search = window.location.search
  window.location.replace('/app/#/index' + search)
} else if (this.code !== null) {
  this.loginByCode()
}

公用css

创建scss文件：

$menuHover:#DCEDFF;
$menuHoverText:#56595D;

在vue文件中用@import（会产生css污染）引入：

<style lang="scss" scoped>
@import "~@/styles/variables.scss";
.img{
 color: $visuColorWhite;
}
</style>

另外一种引入scss文件值对当前组件生效的方式：

<style lang="scss" src="@/styles/protal/new.scss" scoped></style>

vue文件中scss中引入图片

background-image: url('~@/assets/module_images/visu/visu-bg.jpg');

vue文件中使用图片

<img :src="aroundEffect" />
<div :style="{backgroundImage: `url(${ctaBg})`}">
export default {
  name: 'SyntheticalView',
  data() {
    aroundEffect: require('@/assets/module_images/visu/aroundeffect.png')
  }

}

监控绑定内容的变化

export default {
  name: 'SyntheticalView',
  data() {
    areaCode:'0000'
  }
  watch: {
    areaCode: function() {
      console.log('areaCode:' + this.areaCode)
    }
  }
}

条件判断给元素添加class

:class="['visu-content,{'active': current===index}]"

使用$ref给元素添加/删除class

<div @mouseover="changeActive($event)" @mouseout="removeActive($event)">{{ category }}</div>


changeActive($event) {
  $event.currentTarget.className = $event.currentTarget.className + ' active'
},
removeActive($event) {
  $event.currentTarget.className = $event.currentTarget.className.replace(' active', '')
}
          

class动态切换

:class="['visu-title-r-tab',{'visu-title-r-tab-selected': headerIndex===1}]"

$router.push跳转传参

gotoWarn(this, { areaCode: this.areaCode, areaName: this.areaName })
// 预警信息
const gotoWarn = function(obj, params) {
  obj.$router.push({ name: '/visu/warn', params: params })
}

// 实现_blank
<router-link target="_blank" :to="{path:'/home',query:{id:'1'}}">新页面打开home页</router-link>
//或
const routeUrl = obj.$router.resolve({
    path: path,
    query: params
})
window.open(routeUrl.href, '_blank')

//传参跳转：
this.$router.push({ path: '/infodetail', query: { detailId: id }})
watch: {
	$route(to, from) {
	  this.detailId = this.$route.query.detailId || 0
	}
},
created() {
	this.detailId = this.$route.query.detailId || 0
}

DOM加载完成执行

mounted() {
	this.$nextTick(() => {

	})
}

根据页面resize调整根字体大小

const resizePage = function() {
  (function(doc, win) {
    const docEl = doc.documentElement
    const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
    const recalc = function() {
      const clientWidth = docEl.clientWidth
      if (!clientWidth) return
      docEl.style.fontSize = parseInt(clientWidth / 1000) + 12 + 'px'
      // docEl.style.fontSize = parseFloat(clientWidth / 1900) + 'rem'
    }
    if (!doc.addEventListener) return
    recalc()
    win.addEventListener(resizeEvt, recalc, false)
    doc.addEventListener('DOMContentLoaded', recalc, false)
  })(document, window)
}

强制刷新当前页

this.$router.go(0) 强制刷新页面

子组件调用父组件方法

this.$emit('getList')
或者：
this.$parent.getList()

使用过滤

{{news.createTime | timeFilter}}

filters: {
    timeFilter: function(value) {
      if (value && value.length > 16) {
        return visuUtil.cutDesc(value, 0, 16)
      }
      return value
    }
  },

常用JS

//数组循环
that.data.filter(e => {
})

//json循环key
for (const key in that.data) {
}


//判断json对象是否包含某个属性：
Object.prototype.hasOwnProperty.call(obj, k))

//vue循环json
 v-for="(value,key) in data"

更新绑定的数组元素

// 元素替换
this.resourceList.splice(0, 1, response.data.items)

使用背景图

 :style="{backgroundImage: `url(${slideImg2})`}" 
data() {
    return {
        slideImg2: require('@/assets/protal-images/slide2.jpg')
    }
}

echart在vue中初始化不正确或宽度不正确

that.$nextTick(() => {
    // 防抖
    setTimeout(() => {
	   this.initChart()
    }, 0)
})