vue项目2020实例

el-carousel 懒加载

懒加载原理

• 在刚开始的时候我们把图片地址赋给img标签一个自定义属性例如data-src，src属性留空。
• 设置一个定时器定时检测出现在视图内的图片，并将其data-src属性的值赋值给src属性。

// 原生js脚本

setInterval(lazyload,1000);
var imgs = document.getElementsByTagName("img");
function lazyload(){
    var scrollTop = window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop;
    var viewportSize = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    for(var i=0,len=imgs.length;i<len;i++){ 
			var x = scrollTop + viewportSize - imgs[i].offsetTop; 
			if(x>0){imgs[i].src = imgs[i].getAttribute("loadpic");}
    }
}

lazyload 脚本分析

// dom 对象  document
var imgs = document.getElementsByTagName("img");
// 视口
var scrollTop = window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop;
var viewportSize = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
// for()  循环
// 定时器
setInterval(lazyload,1000);

npm install vue-lazyload

教程指路–>

json 元数据共用

// youth.json
[{
    "label": "共青团",
    "url": "index/youthTeam",
    "isMain": true
  },
  {
    "label": "公告",
    "url": "/index/youthTeam/youthNotice",
    "isChecked": false
  },
  {
    "label": "团刊",
    "url": "/index/youthTeam/YouthPublication",
    "isChecked": false
  },
  {
    "label": "青年大讲堂",
    "url": "/index/youthTeam/LectureHall",
    "isChecked": false
  },
  {
    "label": "活动信息",
    "url": "/index/youthTeam/ActivityMsg",
    "isChecked": false
  }
]

	created() {
		// 元数据共用
		this.youthData = youth.slice(1);
	},

富文本ql-editor

<div class="inner-content">
  <div class="ql-editor" v-html="detailData.cDbnr"></div>
</div>

js 添加css动画监听事件

const elementBtn = document.querySelector('.show-btn')
const elementSty = document.querySelector('.studying')
let that = this
function handler() {
  that.showStudy = true
  elementSty.classList.add('animated', 'fadeIn')
  elementBtn.removeEventListener('animationend', handler, false)
}
elementBtn.addEventListener('animationend', handler, false)

vue-router

• query传参相当于get方式，会把要传递的参数显示在导航栏中。
• params传参相当于post方式。默认不会把传递的参数显示在导航栏中。

     this.$router.push({
        name: 'jobdetail',
        params: { nSjid: data.nSjid }
      })

	// 判断当前路由是否传参
	if (!this.$route.params.nSjid) {
	  this.$router.go(-1)
	  return
	}
	this.initJobDetail(this.$route.params.nSjid)

	{
		path: 'job/jobdetail/:nSjid',
		component: JobDetail,
		name: 'jobdetail'
	}

this.$router.push({
        path: '/index/construct/reportingdetail',
        query: {
          id
        }
      })

// json 数组操作
this.breadData.unshift({
      "label": "共青团",
      "url": "index/youthTeam",
      isMain: true
    })

jumpDetail(id) {
      this.$router.push({
        name: 'NoticeDdetail',
        params: { id }
      })
    },

// 判断当前路由是否传参
if (!this.$route.params.id) {
  this.$router.go(-1)
  return
}