vue学习

最近使用vue遇到的一些问题

跨域

前后端分离，前台使用axios访问接口获取数据 如访问 https://blog.csdn.net/doRecvAction
config下的index.js文件配置

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api' :{
        target : 'https://blog.csdn.net',				//前缀
        changeOrigin :true,
        pathRewrite: {//代理地址重写
          '^/api': ''
        }
      }
    },
......

vue中axios获取数据

 this.$axios.post("/api/doRecvAction",				//这里的  /api  指的是index.js里面配置的前缀  https://blog.csdn.net
       {
         参数
        }
      )
        .then(res => {
        console.log(res.data);
        })
        .catch(error => {
          console.log(error);
        })

在浏览器中请求头的地址会以‘ /api/后缀 ’的形式访问，但实际上请求的网址中api的值被替换 ，不要纠结/api这一点，有时报错可能是参数的问题。

请求成功，响应获取数据

element table 前台的分页

slice相当于MySQL中的limit
设置table的height后，如果pagesize过大，出现滚动条，但在下边会出现一条分割线，适用于整齐的页面。
scope.row 获取当前行的数据对象

<el-table
            :data="PaperList.slice((currentPage-1)*pagesize,currentPage*pagesize)"				
            height="255"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
              prop="paperName"
              width="300">
            </el-table-column>
            <el-table-column >
              <template slot-scope="scope">
                <div class="ksks"><router-link :to="{name:'startExam',params:{'PaperId':scope.row.id}}">开始考试</router-link></div>
              </template>
            </el-table-column>
          </el-table>

分页
@size-change @current-change 改变时触发事件

 <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page=currentPage
              :page-sizes="[4, 10, 20, 50]"
              :page-size=pagesize
              layout="total, sizes, prev, pager, next, jumper"
              :total=PaperList.length>
            </el-pagination>

methods`

	 //每页数据量
      handleSizeChange(val) {
        this.pagesize = val;
      },
      //当前页
      handleCurrentChange(val) {
       this.currentPage = val;
      }

data中定义pagesize 、currentPage 、PaperList数据

scss

安装

npm install sass-loader node-sass --save-dev

style中引入后，嵌套css

<style lang="scss" rel="stylesheet/scss"  scoped>
.bodycenter{
    width: 1200px;
    height: 500px;
    position: relative;
    margin: auto;
      .li_leftclick {
        width: 140px;
        text-align: center;
        height: 50px;
        line-height: 50px;
        background-color: white;
      }
    }
</style>

li

data定义的isllil改变后，li样式改变，使用active

  <li :class="{active:isllil[index]}"  v-for="index in subjectcount" :key="index" @click="toSubject((index-1))"  ><a href="#">{{index}}</a></li>

style

li.active{
      background-color: #FF7477;
      border: 1px solid #FF7477;
       a{
      color: white;
      }
    }

router-link 参数传递

name：跳转路由
params:{键 ：值}
接受使用 this.$route.params.键

<router-link :to="{name:'endExam',params:{'correctanswer':correctanswer,'submittime': new Date().format('yyyy-MM-dd hh:mm:ss'),'PaperName':PaperName}}">提交</router-link>

script中重写的的format方法，format(‘yyyy-MM-dd hh:mm:ss’) ,format(‘yyyy-MM-dd’)

Date.prototype.format = function(fmt) {
  var o = {
    "M+" : this.getMonth()+1,                 //月份
    "d+" : this.getDate(),                    //日
    "h+" : this.getHours(),                   //小时
    "m+" : this.getMinutes(),                 //分
    "s+" : this.getSeconds(),                 //秒
    "q+" : Math.floor((this.getMonth()+3)/3), //季度
    "S"  : this.getMilliseconds()             //毫秒
  };
  if(/(y+)/.test(fmt)) {
    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
  }
  for(var k in o) {
    if(new RegExp("("+ k +")").test(fmt)){
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
    }
  }
  return fmt;
}

倒计时组件

参考的一篇博客，需要传入秒数。
引入组件，
获取当前时间let date = new Date();
转换毫秒 let now = date.getTime();
转换秒 Examdjs=(结束时间-当前时间)/1000

 倒计时  <Timed :remainTime="Examdjs"/>

timed组件

<template>
  <span>{{hour? hourString+':'+minuteString+':'+secondString : minuteString+':'+secondString}}</span>
</template>

<script>
  export default {
    name : "timed",
    data () {
      return {
        hour: '',
        minute: '',
        second: '',
        promiseTimer: ''
      }
    },
    props: {
      remainTime: {    // 倒计时间总秒数

      }
    },
    mounted () {
      if (this.remainTime > 0) {
        this.hour = Math.floor((this.remainTime / 3600) % 24)
        this.minute = Math.floor((this.remainTime / 60) % 60)
        this.second = Math.floor(this.remainTime % 60)
        this.countDowm()
      }
    },
    methods: {
      countDowm () {
        var self = this
        clearInterval(this.promiseTimer)
        this.promiseTimer = setInterval(function () {
          if (self.hour === 0) {
            if (self.minute !== 0 && self.second === 0) {
              self.second = 59
              self.minute -= 1
            } else if (self.minute === 0 && self.second === 0) {
              self.second = 0
              self.$emit('countDowmEnd', true)
              clearInterval(self.promiseTimer)
            } else {
              self.second -= 1
            }
          } else {
            if (self.minute !== 0 && self.second === 0) {
              self.second = 59
              self.minute -= 1
            } else if (self.minute === 0 && self.second === 0) {
              self.hour -= 1
              self.minute = 59
              self.second = 59
            } else {
              self.second -= 1
            }
          }
        }, 1000)
      },
      formatNum (num) {
        return num < 10 ? '0' + num : '' + num
      }
    },
    computed: {
      hourString () {
        return this.formatNum(this.hour)
      },
      minuteString () {
        return this.formatNum(this.minute)
      },
      secondString () {
        return this.formatNum(this.second)
      }
    }
  }
</script>

<style scoped>

</style>

效果

监听键盘

@keyup.enter || @keyup.enter.native 监听input
<input @keyup.enter=“function”>
但是当出现多个按钮时，无法获取光标，导致点击之后才能触发事件，而且只能点击一个，切换光标
采用下面方式可以解决，我绑定的是键盘的w(83)、s(87)。

keyup(){
        let This = this    //存一下this
        document.onkeydown = function (event) {
          let e = event || window.event || arguments.callee.caller.arguments[0];
          if (e && e.keyCode == 83) {
            This.next();				//上一题
          }else if(e && e.keyCode == 87){
            This.last();				//下一题
          }
        };
      }

el-dialog

关闭右上角×， :show-close = false

<el-dialog
        :visible.sync="dialogVisible"
        width="45%"
        :show-close = false
        :before-close="handleClose">

效果