vue项目学习笔记（一）

一、vue import中@的作用

@方式可以防止以后路径改变导致代码出错，这是webpack的路径别名，相关代码定义在配置文件vue.config.js里：

'use strict'
const path = require('path')

function resolve(dir) {
    return path.join(__dirname, dir) //文件夹名加上文件名
}

module.exports = {
    publicPath: './',
    lintOnSave: true,
    devServer: {
        open: false, //配置是否自动启动浏览器
        port: 9001,
        overlay: {
            warnings: false,
            errors: true
        },
        // proxy: 'http://172.22.128.184:19000/'
        // proxy: 'http://127.0.0.1:19000/'
        proxy: 'http://172.22.128.200:19000'

    },
    configureWebpack: {
        resolve: {
            alias: {
                '@': resolve('src')
            }
        }
    }
}

import gPanel from '@/components/gPanel';

VsCode写完代码后可以用快捷键格式化代码

二、vue获取参数时，数组中的值可能为空，需要判断

let param = {
        IN_PARAM: {
          LOGIN_NAME: this.searchParams.name,
          LOGIN_NO: this.searchParams.no,
          OPR_IP: this.searchParams.ip
        },
        PAGE_INFO: {
          PAGE_NUM: this.pageInfo.curPage,
          PAGE_SIZE: this.pageInfo.pageSize
        }
      };

      if(!this.searchParams.dateTimeRange){
          param.IN_PARAM['START_TIME'] = this.searchParams.dateTimeRange[0];
          param.IN_PARAM['END_TIME'] = this.searchParams.dateTimeRange[1];
      }

三、vue自定义事件实现ip输入框

1. 自定义组件

<template>
    <ul class="ipAdress">
        <li v-for="(item,index) in ipAddress" :key=index>
            <input ref="ipInput" v-model="item.value" type="text" class="ipInputClass" @input="checkIpVal(item)" @keyup="turnIpPosition(item,index,$event)"/>
            <div></div>
        </li>
    </ul>
</template>

<script>
export default {
    props: {
        value: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            ipAddress: [
                {
                    value: ''
                },{
                    value: ''
                },{
                    value: ''
                },{
                    value: ''
                }
            ]
        }
    },
    watch: {
        ipAddress: { // 双向数据绑定的value
            handler: function (newVal, oldVal) {
                let str = '';
                // console.log('ipaddress',this.ipAddress)
                for (const i in this.ipAddress) {
                    str += this.formatter(this.ipAddress[i].value)
                }
                if (str === '000000000000') {
                    str = ''
                }
                this.$emit('input', str)
            },
            deep: true
        }
    },
    methods: {
        // 格式化方法
        formatter(val) {
            let value = val.toString()
            if (value.length === 2) {
                value = '.' + value
            } else if (value.length === 1) {
                value = '.' + value
            } else if (value.length === 0) {
                value = '' 
            }
            return value
        },
        // 检查ip输入为0-255
        checkIpVal(item) {
            //确保每个值都处于0-255
            let val = item.value;
            // 处理非数字
            val = val.toString().replace(/[^0-9]/g,'');
            val = parseInt(val, 10);
            if(isNaN(val)) {
                val = ''
            } else {
                val = val < 0 ? 0 : val;
                val = val > 255 ? 255 : val;
            }
            item.value = val;
        },
        // 光标位置判断
        turnIpPosition(item, index, event) {
            let self = this;
            let e = event || window.event;
            if (e.keyCode === 37) { // 左箭头向左跳转，左一不做任何措施
                if(index !== 0 && e.currentTarget.selectionStart === 0) {
                    self.$refs.ipInput[index - 1].focus();
                }
            } else if (e.keyCode == 39) { // 右箭头向右跳转，右一不做任何措施
                if(index !== 3 && e.currentTarget.selectionStart === item.value.toString().length) {
                    self.$refs.ipInput[index + 1].focus();
                }
            } else if (e.keyCode === 8) { // 删除键把当前数据删除完毕后会跳转到前一个input，左一不做任何处理
                if(index !== 0 && item.value === '') {
                    self.$refs.ipInput[index - 1].focus();
                }
            } else if (e.keyCode === 13 || e.keyCode === 32 || e.keyCode === 190) {// 回车键、空格键、冒号均向右跳转，右一不做任何措施
                if(index !== 3) {
                    self.$refs.ipInput[index + 1].focus();
                }
            } else if (item.value.toString().length === 3) { // 满3位，光标自动向下一个文本框
                if(index !== 3) {
                    self.$refs.ipInput[index + 1].focus();
                }
            }
        }

    }
}
</script>
<style type="text/css" scoped>
    .ipAdress{
        display: flex;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        width: 196px;
        height: 36px;
        padding-inline-start: 0px;
    }
    .ipAdress li{
        position: relative;
        height: 36px;
        margin: 0;
        list-style-type: none;
    }
    .ipInputClass{
        border: none;
        width: 49px;
        height: 23px;
        text-align: center;
        background: transparent;
    }
    .ipAdress li div{
        position: absolute;
        bottom: 8px;
        right: 0;
        border-radius: 50%;
        background: #505050;
        width: 2px;
        height: 2px;
    }
    /*只需要3个div*/
    .ipAdress li:last-child div{
        display: none;
    }
    /*取消掉默认的input focus状态*/
    .ipAdress input:focus{
        outline: none;
    }

</style>

2.导入组件并注册

import ipAddressInput from "@/components/ipAddressInput"; // ip输入框组件
export default {
  name: "serviceLog",
  components: {
    ipAddressInput
  }

3.模板中引用

 <ip-address-input ref="ip" v-model="searchParams.ip"></ip-address-input>

四、vue v-for循环需要绑定key，且key不可以为遍历时重复的值，建议为index索引

<li v-for="(item,index) in ipAddress" :key=index>

五、el-col为线性元素，需要绑定span后才能为块级元素

<el-col :span="4" :offset="1">