前端面试（3）

前端面试（3）

接上：前端面试（2）：https://blog.csdn.net/weixin_45266979/article/details/122704709

前言

被支配的恐惧感，只有不断的面试面试面试，认识到，原来自己真的是一个小菜鸡…
牛亨智能

一、将如下https请求⽤Promise形式进⾏改写。

解答：

二、举出三种垂直居中的⽅法

解答：

三、在⼀个容器中有三个模块，定义某⼀模块⾼度，使得其它模块能⾃适应最⾼⾼度

解答：

代码：

<template>
  <div>
    3.自适应最高高度
    <div class="mheight">
      <div class="box1">模块1(高度未定义)</div>
      <div class="box2">模块2(高度未定义)</div>
      <div class="box3">模块3(高度为120px)</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MixHeight'
}
</script>

<style scoped>
.mheight{
  margin: 0 auto;
  background-color: antiquewhite;
  width: 600px;
  display: flex;
  text-align: center;
}
.mheight .box1{
  width: 100px;
  background-color: pink;
}
.mheight .box2{
  width: 100px;
  background-color: skyblue;
}
.mheight .box3{
  width: 100px;
  height: 120px;
  background-color: purple;
}
</style>

四、vue编写⼀个步骤条组件实现类似效果，使⽤时可以⾃定义所有步骤的名称，和⾼亮颜⾊

解答：

代码：

<template>
  <div>
    4.步骤条组件
    <div class="articlesteps">
      <div class="step">
        <div :model="stepname" class="head">
          <div class="iconfont num1" label=1 v-bind:style="{background:num1bgc,color:num1color}">&#xe63e; {{ stepname.step1 }}</div>
          <div class="iconfont num2" label=2 v-bind:style="{background:num2bgc,color:num2color}">&#xe63f; {{ stepname.step2 }}</div>
        </div>
        <div class="container">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item v-if="label===1" :label="form.telName">
              <el-input v-model="form.tel" :placeholder="form.telName"></el-input>
            </el-form-item>
            <el-form-item v-if="label===2" :label="form.userName">
              <el-input v-model="form.name" :placeholder="form.userName"></el-input>
            </el-form-item>
            <el-form-item v-if="label===2" :label="form.userPwd">
              <el-input v-model="form.pwd" :placeholder="form.userPwd"></el-input>
            </el-form-item>
            <el-form-item v-if="label===1" style="text-align: right">
              <el-button @click="resetForm('form')">取消</el-button>
              <el-button :style="{background:btnbgc}" class="btn" @click="nextClick">下一步</el-button>
            </el-form-item>
            <el-form-item v-if="label===labelmax" style="text-align: right">
              <el-button @click="resetForm('form')">取消</el-button>
              <el-button :style="{background:btnbgc}" class="btn" @click="beforeClick">上一步</el-button>
              <el-button type="primary" @click="submitForm('form')">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ArticleSteps',
  data () {
    return {
      // 步骤变化
      label: 1,
      labelmax: 2,
      // 步骤名称
      stepname: {
        step1: '填写手机号',
        step2: '确认管理员信息'
      },
      // 步骤条颜色
      num1bgc: 'rgb(44, 209, 169)',
      num2bgc: 'rgb(241, 244, 249)',
      num1color: 'white',
      num2color: 'black',
      btnbgc: 'rgb(44, 209, 169)',
      btncolor: 'white',
      // 表单变化
      form: {
        telName: '手机号',
        tel: '',
        userName: '用户名',
        name: '',
        userPwd: '密码',
        pwd: ''
      }
    }
  },
  methods: {
    resetForm (form) {
      this.$refs[form].resetFields()
    },
    submitForm (form) {
      console.log(form)
      this.$refs[form].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    beforeClick () {
      this.label = this.label - 1
      var c = this.num1bgc
      this.num1bgc = this.num2bgc
      this.num2bgc = c
      var d = this.num1color
      this.num1color = this.num2color
      this.num2color = d
    },
    nextClick () {
      this.label = this.label + 1
      var c = this.num1bgc
      this.num1bgc = this.num2bgc
      this.num2bgc = c
      var d = this.num1color
      this.num1color = this.num2color
      this.num2color = d
    }
  }
}
</script>

<style scoped>
@import "~@/assets/font/iconfont.css";

.articlesteps {
  margin: 0 auto;
  box-sizing: border-box;
}

.step {
  width: 600px;
  height: 600px;
  margin: 0 auto;
}

.head {
  display: flex;
  text-align: center;
  line-height: 50px;
}

.step .head .num1 {
  width: 50%;
  height: 50px;
  font-size: 22px;
}

.step .head .num2 {
  width: 50%;
  height: 50px;
  font-size: 22px;
}

.container {
  width: 600px;
  height: 500px;
  padding: 40px 40px 0 40px;
}

.container .btn {
  border: none;
}
</style>

五、vue编写如下密码输⼊组件

解答：

代码：

<template>
  <div>
    5.密码输入组件
    <div class="pwdcontain">
      <div id="payPwd">
        <div class="font">
          <div>请输入支付密码(数字)</div>
          <div style="cursor: pointer;font-size: 12px" @click="showpwd" title="输入密码后点我有惊喜哦~">点我显示密码：{{ this.data }}</div>
        </div>
        <div class="paybox">
          <el-input v-model="input.input1" class="inputbox" maxlength="1" name="num" type="password"></el-input>
          <el-input v-model="input.input2" class="inputbox" maxlength="1" name="num" type="password"></el-input>
          <el-input v-model="input.input3" class="inputbox" maxlength="1" name="num" type="password"></el-input>
          <el-input v-model="input.input4" class="inputbox" maxlength="1" name="num" type="password"></el-input>
          <el-input v-model="input.input5" class="inputbox" maxlength="1" name="num" type="password"></el-input>
          <el-input v-model="input.input6" class="inputbox" maxlength="1" name="num" type="password"></el-input>
          <el-button class="resetbtn" @click="clearAllNumber">重置</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'

export default {
  name: 'Password',
  data () {
    return {
      data: undefined,
      input: {
        input1: undefined,
        input2: undefined,
        input3: undefined,
        input4: undefined,
        input5: undefined,
        input6: undefined
      },
      num1: null,
      num2: null,
      num3: null,
      num4: null,
      num5: null,
      num6: null
    }
  },
  created () {
    // 只能输入数字
    $(document).on('keyup', 'input[name="num"]', function (e) {
      if ($(this).val() !== '') {
        const temp = $(this).val()
        $(this).val(temp.replace(/[^\d]/g, ''))
        if (temp.indexOf('.') === -1) {
          if (temp.substring(0, 1) === '0' && temp.length > 1) {
            $(this).val('0')
          }
        } else {
          console.log(123)
        }
      }
    })
  },
  watch: {},
  methods: {
    showpwd () {
      this.sumnum(this.input)
    },
    clearAllNumber () {
      this.input.input1 = undefined
      this.input.input2 = undefined
      this.input.input3 = undefined
      this.input.input4 = undefined
      this.input.input5 = undefined
      this.input.input6 = undefined
    },
    sumnum (sum) {
      const a = sum.input1 + sum.input2 + sum.input3 + sum.input4 + sum.input5 + sum.input6
      this.data = parseInt(a)
    }
  }
}
</script>

<style scoped>
.pwdcontain {
  width: 600px;
  background-color: antiquewhite;
  margin: 0 auto;
  padding: 20px 10px;
  border-radius: 10px;
}

.pwdcontain #payPwd {
  background-color: white;
  border-radius: 10px;
  padding: 20px;
}

.pwdcontain #payPwd .font {
  font-size: 24px;
}

.pwdcontain #payPwd .paybox {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
  padding: 20px;
}

.pwdcontain #payPwd .paybox .inputbox {
  box-sizing: border-box;
  border-top: 3px solid rgb(154, 154, 154);
  border-left: 3px solid rgb(154, 154, 154);
  border-right: 3px solid rgb(238, 238, 238);
  border-top: 3px solid rgb(154, 154, 154);
  border-bottom: 3px solid rgb(238, 238, 238);
}

.pwdcontain #payPwd .paybox .resetbtn {
  margin-left: 20px;
  border-top: 3px solid rgb(154, 154, 154);
  border-left: 3px solid rgb(154, 154, 154);
  border-right: 3px solid rgb(238, 238, 238);
  border-top: 3px solid rgb(154, 154, 154);
  border-bottom: 3px solid rgb(238, 238, 238);
}

/*方法一*/
/*.pwdcontain #payPwd .paybox .el-input /deep/ .el-input__inner {*/
/*  方法二*/
.pwdcontain #payPwd .paybox .el-input >>> .el-input__inner {
  border-radius: 0px;
  padding: 0;
  text-align: center;
  border: none;
}
</style>

六、全套项目

vue文件+部分题目的html文件

csdn资源
链接：https://download.csdn.net/download/weixin_45266979/84078964

网盘资源
链接：https://pan.baidu.com/s/1Ihrf7rehsHDqL37uUU-DmQ
提取码：wo8j

推荐：前端面试（4）：https://blog.csdn.net/weixin_45266979/article/details/123503879