- 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;
}
- 3.vue 过滤字典翻译
//获取字典值
formatDictValue(dictValue) {
//获取字典
let dictArr = this.dict.type.device_type
return dictArr.find(item => {
return item.value == dictValue
})?.label ?? ""
}
- 修改
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代码少写点
- 5.vue页面中点击按钮实现让页面的指定dom元素实现全屏展示功能
- 第一步、首先安装screenfull
npm install screenfull@4.2.0 --save - 第二步、在需要全屏的组件中引入
import screenfull from "screenfull";
- 第一步、首先安装screenfull
- 第三步、在methods中添加btn事件
<div :class="isCollapse ? 'ifa-collapsed' : 'ifa'" id="screen">放大的内容 </div>
btn() {
let element = document.getElementById("screen"); //指定全屏区域元素
screenfull.toggle(element); //全屏显示
},
