vue、elementUi、input 常用知识点

1.input输入框限制只能输入大于0的数据

<input type="number" step="1"  min="0" 
onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''"
>

2.elementUI中input输入框限制只能输入数字

<el-input
onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
maxlength="8"
>
限制输入数字，且长度最大为8
</el-input>

3.el-input修改placeholder的样式

//在样式表中定义一个 ::placeholder 伪类选择器，指定需要修改的属性和值，例如修改占位符文本颜色为灰色（#888888）。
::v-deep .el-input__inner::placeholder {
  color: #888888;
}

4.vue 过滤字典翻译

 //获取字典值
    formatDictValue(dictValue) {
      //获取字典
      let dictArr = this.dict.type.device_type
      return dictArr.find(item => {
        return item.value == dictValue
      })?.label ?? ""
    }

5.修改el-select的样式

方法1、在index.html中全局修改
方法2、 加:popper-append-to-body="false"属性

 <el-select v-model="value" popper-class="setSelect" 
 :popper-append-to-body="false" placeholder="请选择"></el-select>

popper-class是给select下拉框的起的类名，搭配使用的话，会让css代码少写点

6.vue页面中点击按钮实现让页面的指定dom元素实现全屏展示功能

6.1 第一步、首先安装screenfull
npm install screenfull@4.2.0 --save
6.2 第二步、在需要全屏的组件中引入
import screenfull from "screenfull";
6.3 第三步、在methods中添加btn事件

  <div :class="isCollapse ? 'ifa-collapsed' : 'ifa'" id="screen">放大的内容 </div>
  btn() {
       let element = document.getElementById("screen"); //指定全屏区域元素
        screenfull.toggle(element); //全屏显示
    },

7.vue实现禁止页面滑动

 document.body.addEventListener('touchmove', function(e){
        e.preventDefault();
        e.stopPropagation();
    }, { passive: false });