前端工作过程遇到的问题总结(五)-Vue篇--(上部)

àì夳堔傛蜴生んèń 2022-03-02 02:05 244阅读 0赞

**目录**

Vue webapp项目通过HBulider打包原生APP

vue项目打包后打开空白解决办法

Vue如何使用rules对表单字段进行校验

vue中修改css样式和添加CSS样式

vue获取屏幕宽高 width height

vue键盘回车事件

Vue项目中设置背景图片方法

VUE获取验证码倒计时

element更改表头样式

vue面试总结：

--------------------

### Vue webapp项目通过HBulider打包原生APP ###

原文：[Vue webapp项目通过HBulider打包原生APP][Vue webapp_HBulider_APP]

### vue项目打包后打开空白解决办法 ###

原文：[vue项目打包后打开空白解决办法][vue]

网上很多说自己的VUE项目通过Webpack打包生成的list文件，放到HBulider打包后，通过手机打开一片空白。这个主要原因是路径的问题。

*  记得改一下config下面的index.js中build模块导出的路径。因为index.html里面的内容都是通过script标签引入的，而你的路径不对，打开肯定时空白的，先看下默认的路径

module.exports = {
      build: {
        env: require('./prod.env'),
        index: path.resolve(__dirname, '../dist/index.html'),
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        productionSourceMap: true,

assetsPublicPath默认的是'/'也就是根目录。而我们的index.html和static在同一级目录下面，所有要改成'./'

*  另外还需要注意一点。src里边router/index.js路由配置里边默认模式是hash，如果你改成了history模式的话，打开也会是一片空白。所以改为hash或者直接把模式配置删除，让它默认的就行 。如果非要使用history模式的话，需要你在服务端加一个覆盖所有的情况的候选资源：如果URL匹配不到任何静态资源，则应该返回一个index.html,这个页面就是你app依赖页面。

// mode: 'history'  // 默认hash

### Vue如何使用rules对表单字段进行校验 ###

原文：[vue如何使用rules对表单字段进行校验][vue_rules]

基于element-ui

*  在代码中添加属性： ':rule'

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"></el-form> 并且，在<el-form-item>中添加prop属性，对应rules中的规则

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70][]

注意提交和取消的按钮传递的参数：

![20190319151327949.png][]

js中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 1][]

*  新开一个文件夹（validate.js定义验证规则）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 2][]

*  在页面(index.vue)中引入验证规则定义的文件，并在export default中定义rule规则，使用语法：\{validator:验证方法,trigger:验证触发\}

import {isUserName, passwordStrength} form '../../../utils/validate'  //导入验证规则
    
    
     data() {
          return {
            ruleForm: {
              name: '',
              password: ''
            },
            rules: {
              name: [
                { required: true, message: '请输入活动名称', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
                { validate: isUserName, trigger: 'blur' }
              ],
              password: [
                { required: true, message: '请输入密码', trigger: 'change' },
                { validate: passwordStrength, trigger: 'blur' }
              ]
            }
          };
        },

*  以下是validator.js文件的部分验证方法

/*是否合法IP地址*/
    export function validateIP(rule, value,callback) {
      if(value==''||value==undefined||value==null){
        callback();
      }else {
        const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
        if ((!reg.test(value)) && value != '') {
          callback(new Error('请输入正确的IP地址'));
        } else {
          callback();
        }
      }
    }
    
    /* 是否手机号码或者固话*/
    export function validatePhoneTwo(rule, value, callback) {
      const reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;;
      if (value == '' || value == undefined || value == null) {
        callback();
      } else {
        if ((!reg.test(value)) && value != '') {
          callback(new Error('请输入正确的电话号码或者固话号码'));
        } else {
          callback();
        }
      }
    }
    /* 是否固话*/
    export function validateTelphone(rule, value,callback) {
      const reg =/0\d{2}-\d{7,8}/;
      if(value==''||value==undefined||value==null){
        callback();
      }else {
        if ((!reg.test(value)) && value != '') {
          callback(new Error('请输入正确的固话（格式：区号+号码,如010-1234567）'));
        } else {
          callback();
        }
      }
    }
    /* 是否手机号码*/
    export function validatePhone(rule, value,callback) {
      const reg =/^[1][3,4,5,7,8][0-9]{9}$/;
      if(value==''||value==undefined||value==null){
        callback();
      }else {
        if ((!reg.test(value)) && value != '') {
          callback(new Error('请输入正确的电话号码'));
        } else {
          callback();
        }
      }
    }
    /* 是否身份证号码*/
    export function validateIdNo(rule, value,callback) {
      const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      if(value==''||value==undefined||value==null){
        callback();
      }else {
        if ((!reg.test(value)) && value != '') {
          callback(new Error('请输入正确的身份证号码'));
        } else {
          callback();
        }
      }
    }
    /* 是否邮箱*/
    export function validateEMail(rule, value,callback) {
      const reg =/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/;
      if(value==''||value==undefined||value==null){
        callback();
      }else{
        if (!reg.test(value)){
          callback(new Error('请输入正确的邮箱地址'));
        } else {
          callback();
        }
      }
    }
    /* 合法uri*/
    export function validateURL(textval) {
      const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
      return urlregex.test(textval);
    }
    
    /*验证内容是否英文数字以及下划线*/
    export function isPassword(rule, value, callback) {
      const reg =/^[_a-zA-Z0-9]+$/;
      if(value==''||value==undefined||value==null){
        callback();
      } else {
        if (!reg.test(value)){
          callback(new Error('密码仅由英文字母，数字以及下划线组成'));
        } else {
          callback();
        }
      }
    }
    
    /*自动检验数值的范围*/
    export function checkMax20000(rule, value, callback) {
      if (value == '' || value == undefined || value == null) {
        callback();
      } else if (!Number(value)) {
        callback(new Error('请输入[1,20000]之间的数字'));
      } else if (value < 1 || value > 20000) {
        callback(new Error('请输入[1,20000]之间的数字'));
      } else {
        callback();
      }
    }
    
    //验证数字输入框最大数值,32767
    export function checkMaxVal(rule, value,callback) {
      if (value < 0 || value > 32767) {
        callback(new Error('请输入[0,32767]之间的数字'));
      } else {
        callback();
      }
    }
    //验证是否1-99之间
    export function isOneToNinetyNine(rule, value, callback) {
      if (!value) {
        return callback(new Error('输入不可以为空'));
      }
      setTimeout(() => {
        if (!Number(value)) {
          callback(new Error('请输入正整数'));
        } else {
          const re = /^[1-9][0-9]{0,1}$/;
          const rsCheck = re.test(value);
          if (!rsCheck) {
            callback(new Error('请输入正整数，值为【1,99】'));
          } else {
            callback();
          }
        }
      }, 0);
    }
    
    // 验证是否整数
    export function isInteger(rule, value, callback) {
      if (!value) {
        return callback(new Error('输入不可以为空'));
      }
      setTimeout(() => {
        if (!Number(value)) {
          callback(new Error('请输入正整数'));
        } else {
          const re = /^[0-9]*[1-9][0-9]*$/;
          const rsCheck = re.test(value);
          if (!rsCheck) {
            callback(new Error('请输入正整数'));
          } else {
            callback();
          }
        }
      }, 0);
    }
    // 验证是否整数,非必填
    export function isIntegerNotMust(rule, value, callback) {
      if (!value) {
        callback();
      }
      setTimeout(() => {
        if (!Number(value)) {
          callback(new Error('请输入正整数'));
        } else {
          const re = /^[0-9]*[1-9][0-9]*$/;
          const rsCheck = re.test(value);
          if (!rsCheck) {
            callback(new Error('请输入正整数'));
          } else {
            callback();
          }
        }
      }, 1000);
    }
    
    // 验证是否是[0-1]的小数
    export function isDecimal(rule, value, callback) {
      if (!value) {
        return callback(new Error('输入不可以为空'));
      }
      setTimeout(() => {
        if (!Number(value)) {
          callback(new Error('请输入[0,1]之间的数字'));
        } else {
          if (value < 0 || value > 1) {
            callback(new Error('请输入[0,1]之间的数字'));
          } else {
            callback();
          }
        }
      }, 100);
    }
    
    // 验证是否是[1-10]的小数,即不可以等于0
    export function isBtnOneToTen(rule, value, callback) {
      if (typeof value == 'undefined') {
        return callback(new Error('输入不可以为空'));
      }
      setTimeout(() => {
        if (!Number(value)) {
          callback(new Error('请输入正整数，值为[1,10]'));
        } else {
          if (!(value == '1' || value == '2' || value == '3' || value == '4' || value == '5' || value == '6' || value == '7' || value == '8' || value == '9' || value == '10')) {
            callback(new Error('请输入正整数，值为[1,10]'));
          } else {
            callback();
          }
        }
      }, 100);
    }
    // 验证是否是[1-100]的小数,即不可以等于0
    export function isBtnOneToHundred(rule, value, callback) {
      if (!value) {
        return callback(new Error('输入不可以为空'));
      }
      setTimeout(() => {
        if (!Number(value)) {
          callback(new Error('请输入整数，值为[1,100]'));
        } else {
          if (value < 1 || value > 100) {
            callback(new Error('请输入整数，值为[1,100]'));
          } else {
            callback();
          }
        }
      }, 100);
    }
    // 验证是否是[0-100]的小数
    export function isBtnZeroToHundred(rule, value, callback) {
      if (!value) {
        return callback(new Error('输入不可以为空'));
      }
      setTimeout(() => {
        if (!Number(value)) {
          callback(new Error('请输入[1,100]之间的数字'));
        } else {
          if (value < 0 || value > 100) {
            callback(new Error('请输入[1,100]之间的数字'));
          } else {
            callback();
          }
        }
      }, 100);
    }
    
    // 验证端口是否在[0,65535]之间
    export function isPort(rule, value, callback) {
      if (!value) {
        return callback(new Error('输入不可以为空'));
      }
      setTimeout(() => {
        if (value == '' || typeof(value) == undefined) {
          callback(new Error('请输入端口值'));
        } else {
          const re = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/;
          const rsCheck = re.test(value);
          if (!rsCheck) {
            callback(new Error('请输入在[0-65535]之间的端口值'));
          } else {
            callback();
          }
        }
      }, 100);
    }
    // 验证端口是否在[0,65535]之间，非必填,isMust表示是否必填
    export function isCheckPort(rule, value, callback) {
      if (!value) {
        callback();
      }
      setTimeout(() => {
        if (value == '' || typeof(value) == undefined) {
          //callback(new Error('请输入端口值'));
        } else {
          const re = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/;
          const rsCheck = re.test(value);
          if (!rsCheck) {
            callback(new Error('请输入在[0-65535]之间的端口值'));
          } else {
            callback();
          }
        }
      }, 100);
    }
    
    /* 小写字母*/
    export function validateLowerCase(str) {
      const reg = /^[a-z]+$/;
      return reg.test(str);
    }
    /*保留2为小数*/
    export function validatetoFixedNew(str) {
      return str ;
    }
    /* 验证key*/
    // export function validateKey(str) {
    //     var reg = /^[a-z_\-:]+$/;
    //     return reg.test(str);
    // }
    
    /* 大写字母*/
    export function validateUpperCase(str) {
      const reg = /^[A-Z]+$/;
      return reg.test(str);
    }
    
    /* 大小写字母*/
    export function validatAlphabets(str) {
      const reg = /^[A-Za-z]+$/;
      return reg.test(str);
    }

### vue中修改css样式和添加CSS样式 ###

原文：[vue中修改css样式和添加CSS样式][vue_css_CSS]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 3][]

calss语法格式=> ：class=”\{ ’ a ’ : f \}”   
a表示添加的css样式，f 表执行条件，满足条件就添加写好的Css样式。用于添加Css样式

style语法格式=> ：style=”\{ ’ Q ’ : R \}”   
Q表示具体修改的Css样式，R表示修改的值。用于修改CSS某一个样式。

### vue获取屏幕宽高 width height ###

原文：[vue 获取屏幕宽高 width height][vue _ width height]

函数封装：

/**
     * 获取屏幕宽高
     */
    Vue.prototype.getViewportSize = function(){
      return {
        width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
        height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
      };
    };

我是定义在main.js中：

截图：

![20190319153219715.png][]

使用：

mounted(){
        this.getbannerHeight();
        this.getBannerList();
        // 动态设置banner高度
        const size = this.getViewportSize();
        this.setSize(size);
    }

截图：

![20190319153422587.png][]

### vue键盘回车事件 ###

原文：[vue 键盘回车事件][vue 1]

如果是原生的input，使用 @keyup.enter就可以，若是使用了element-ui，则要加上native限制符，因为element-ui把input进行了封装，原事件就不起作用了，代码如下：

<el-input v-model="form.name" placeholder="昵称" @keyup.enter.native="submit"></el-input>

现在发现这个键盘事件好像对input框支持比较好，其他的元素多少会有点问题，或者直接无效，究其原因是其他的元素没有获取焦点或者没有键盘事件。

现在的解决方式，

如果是没有键盘事件使用css把input框绝对定位到需要绑定键盘事件的元素之上并且把input框设置为透明，把该input框与原来要绑定键盘事件的元素进行绑定，达到效果；

test.vue：

<div class="container">
      <input class="item opa" @keyup="deleteDiv">
      <div class="item">div内容</div>
      <span click="DeleteDiv">X</span>
    </div>

css：

div.container{
      position:relative;
    }
    .item{
      position:absolute;
      top:0;
      left:0;
      width:100px;
      height:100px;
      border:1px solid #ccc;
    }
    .opa{
       opacity:0;
       z-index:5;
    }
    span{
      position:absolute;
      top:5px;
      right:5px;
      z-index:10;
    }

js:

methods:{
      deleteDiv(){
        alert("delete");
      }
    }

### Vue项目中设置背景图片方法 ###

原文：[Vue项目中设置背景图片方法][Vue]

**例如css样式：**

background:url("../../assets/head.jpg");

1. 在data中定义如下：

export default {
    name: 'productdetailspage',
    data() {
     return {
      note: {
      backgroundImage: "url(" + require("../../assets/save.png") + ")",
      backgroundRepeat: "no-repeat",
      backgroundSize: "25px auto",
      marginTop: "5px",
      },
     }
    },

2. 通过行内样式将样式引入：

**引入img图片方法：**

第一步：在.vue文件中import  edit from 'path'（path是图片与.vue的相对路径）

第二步：在data对象中定义一个属性edits，值对应edit

![Center][]

第三步：在template中 给标签绑定属性

![Center 1][]

### VUE获取验证码倒计时 ###

参考：[VUE获取验证码倒计时][VUE]

html:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 4][]

js：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 5][]

最后的效果：

发送之前：

![20190319155345924.png][]

点击发送之后，从60s倒计时（这里的图就是说明实现了）

![20190319155305223.png][]

###  element更改表头样式 ###

原文：[element更改表头样式][element]

想要更改表头颜色，只要在el-table里引 :header-cell-style="\{background:'red'\}"，

<el-table :header-cell-style="{background:'red'}"></el-table>

这样就可以了，或者使用函数

<el-table
          :data="tableData"
          border
          :header-cell-style="getRowClass"
          size="mini">
          <el-table-column
            prop="Name"
            align='center'
            label="">
          </el-table-column>
        </el-table>

js：

methods: {
        getRowClass ({ row, column, rowIndex, columnIndex }) {
          if (rowIndex === 0) {
            return 'background:#c90a5b;color:#fff;text-align:center;font-size:9px;font-weight:500;'
          } else {
            return ''
          }
        }
    }

![20190319160054333.png][]

### vue面试总结： ###

原文：[Vue面试题总结][Vue 1]