记录在vue-edu练习项目上遇到的问题

一、引入阿里图标

unicode引用

拷贝项目下面生成的font-face

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}

定义使用iconfont的样式

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}

挑选相应图标并获取字体编码，应用于页面

<i class="iconfont">3</i>

二、router路由注意项

自定义router-link选中class名：

在router.js中添加linkActiveClass: 'a-active',
指定强制跳转到某一路由下页面：

redirect: '/home'
as

三、slot

在组件中定义slot标签，添加name属性：<slot name="title"></slot>，在其他组件调用时，在添加的标签中添加slot属性, <div slot="title"></div>，则div会对应到在组件中设定的slot标签位置

绑定组件中的data值：<slot name="title" :user='user'></slot>

引用该组件调用绑定的data值：<div v-slot:title="user">{user.id}</div>

四、vue-awesome-swiper --> 基于swiper的vue轮播插件

Git网址：https://github.com/surmon-china/vue-awesome-swiper

五、this. $router和this.$ route

文档：https://router.vuejs.org/zh/api/#路由对象

this.$router.go(-1)：路由器(即可跳转页面)

this.$route.params：当前路由(即当前地址上的一些信息)

六、获取详情页面

router-link标签的一些事

:to='{name:"courseDet",params:{id:item.courseId}}' tag='div'

在详情组件中获取详情：

1)、先在计算属性中定义一个方法获取请求的id：

courseId(){
    // 这边的id是当时设置router-link中params传的key（id）
    return this.$route.params.id
}

2)、在调用api的时候拿id当参数：

 async CourseDet(){
     this.courseDet = await getCourseDet(this.courseId)
     console.log(this.courseDet);
 },

api中发送请求

export let getCourseDet = (id) => {
    return axios.get(`/getCourseDet?id=${id}`)
}

服务端

let {pathname,query} = url.parse(req.url,true)  
let courseId = parseInt(query.id)//query.id是字符串类型，所以需要转一下
if(pathname === '/getCourseDet'){
   res.writeHead(200, {'Content-Type': 'application/json;charset=utf8' });
   read((courses) => {
       let course = courses.find((item) => item.courseId === courseId)
       res.end(JSON.stringify(course));
   })
 }

七、ref

在标签中添加ref='val'，然后可以在方法中直接调用this.$refs，这是个对象，可直接this.$refs.val取值

（一般用来操作dom）

八、上拉无限加载

注：需要当前触发scroll事件的容器 “固定高度” 才能触发scroll事件

	let flag = true
	more(){
      /* 上拉加载'三剑客'：1+2 = 3
        1.clientHeight(可视区域的高度),
        2.scrollTop(滚动的距离),
        3.scrollHeight(主体总高度) */
        //利用this.$refs.course获取dom元素
      let {scrollHeight,scrollTop,clientHeight} = this.$refs.course
      if(scrollHeight <= scrollTop + clientHeight + 20 && flag){
        flag = false
        this.pageIndex++
        this.getCourses()
      }
    },
    async getCourses(){
      let {courses,hasMore} = await pagination(this.pageIndex)
      this.courses = [...this.courses,...courses]
      this.hasMore = hasMore
      flag = true
      if(!this.hasMore){
          flag = false
      }
    }

要点：

设置开关（flag），防止一直触发请求，当没有更多的数据时，将开关设置为“关”
设置“三剑客”的差值，触发请求
利用对象解构赋值，数组拓展赋值

九、瀑布流布局

在遍历的li上设置ref属性，这样this.$refs.authorList的类型就是数组，方便遍历

<li v-for="(item,index) in authors" :key="index" ref="authorList"></li>

//用来存放每列的高度
	let top = [0,0]
	waterFollow(){
      // console.log(this.$refs);  
      let lis = this.$refs.authorList
      // console.log(lis);
      lis.forEach((el,index) => {
// 需要获取到top数组中最小值的值和位置
        if(index>=(this.index-1)*4){
	//获取最小值及其下标
          let min = Math.min(...top)
          let minIndex = top.indexOf(min)
          el.style.top = min + 'px'
          el.style.left = minIndex*50 + 2.5 + '%'
          top[minIndex] += el.clientHeight + 100
          el.parentNode.style.height = top[minIndex] + 'px'
          /* console.log(el.offsetTop);
          console.log(`${index}---:最小值${min} + 元素高度${el.clientHeight} + 100 = ${top[minIndex]}`);
          console.log('-----------------------'); */
        }
      });
    },

要点：

需要声明一个数组，let top = [0,0]来存放每列的最小值，同时方便设定left值
因为是分段获取数值，会添加数据，所以遍历时需要做过滤：if(index>=(this.index-1)*4){...}，判断从最新添加的数据开始
let min = Math.min(...top)利用数组拓展和 Math.min方法，找出最小值
top[minIndex] += el.clientHeight + 100对元素定位完之后，需要在原有最小值的基础上加上元素高度和边距