输入框美化(vue组件)

1,效果

2，源码
链接：https://pan.baidu.com/s/1maJ74uRe4eEXZ_BwhKP0tA?pwd=0lne
提取码：0lne
–来自百度网盘超级会员V4的分享
3，代码
inputWl.vue

<template>
<div :style="{'--width':width,'--height':height}">
  <div class="one" >
    <input  type="text" name="inputName" placeholder="请输入内容" value=""/>
  </div>
</div>
</template>

<script>
export default {
  name: "inputWl",
  data(){
    return{
      // //输入框width
      // width:'',
      // //输入框height
      // height:''
    }
  },
  props:['width','height']

}
</script>

<style scoped>
:root{
/*  宽width*/
  --width:'';
/*  长height*/
  --height:'';
}

.one{

}
input {
  border: 1px solid #ccc;
  padding: 8px;
  font-size: 16px;
  width: var(--width);
  height: var(--height);
  background-color: #fff;
  border-radius: 10px;

}
input:hover {
  box-shadow: 0 0 10px gray;
  border-color: rgb(64, 158, 255);
}
input:focus{
  outline: rgb(64, 158, 255);
}

</style>

homeWl.vue

<template>
<div>
<input-wl :width="width" :height="height"></input-wl>
</div>
</template>

<script>
import InputWl from "@/components/input/inputWl";
export default {
  name: "homeWl",
  data(){
    return{
      //可改参数width,height  分别代表输入框的width,输入框的height
      //输入框width
      width:'',
      //输入框height
      height:''
    }
  },
  mounted() {
    this.gethomeheight()
    this.gethomewidth()
    window.addEventListener('resize', this.gethomewidth); // 在窗口大小改变时重新获取窗口宽度
    window.addEventListener('resize', this.gethomeheight);
  },

  methods:{
    gethomewidth(){
      // 获取窗口宽度
      var windowwidth = window.innerWidth
      //宽width
      this.width = parseInt(windowwidth/2/3)+'px'
    },
    // 获得窗口height度
    gethomeheight(){

      var windowheight = window.innerHeight
      //高height
      this.height = parseInt(windowheight/3/9)+'px'

    }
  },
  components: {InputWl}
}
</script>

<style scoped>

</style>

4，参数解释
//可改参数width,height 分别代表输入框的width,输入框的height