标准化校验

数字输入

v-as-inputnumber表示数字输入校验指令。

<template>
  <div class="t-input-number-area">
    <div>
      <input v-model="value1" placeholder="整数" v-as-inputnumber />
    </div>
    <div>
      <input v-model="value2" placeholder="保留两位小数" v-as-inputnumber.float="2"/>
    </div>
  </div>
</template>

<script>
export default {
  name: "t-input-number",
  data () {
    return {
      value1: '',
      value2: ''
    }
  }
}
</script>

<style>
.t-input-number-area{
  width: 100%;
}
.t-input-number-area>div{
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.t-input-number-area>div input{
  width: 180px;
  height: 32px;
  border-radius: 3px;
  border:none;
  outline: none;
  border: dodgerblue solid 1px;
}
</style>

Expand Copy Copy

表情禁用

v-as-prohibit-emoji表示表情禁用指令,代码如下:

<template>
  <div class="t-prohibit-emoji-area">
    <input type="text" v-as-prohibit-emoji v-model="value"/>
  </div>
</template>

<script>
export default {
  name: "t-prohibit-emoji",
  data () {
    return {
      value:12
    }
  }
}
</script>

<style>
.t-prohibit-emoji-area{
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.t-prohibit-emoji-area>input{
  width: 180px;
  height: 32px;
  border-radius: 3px;
  border:none;
  outline: none;
  border: dodgerblue solid 1px;
}
</style>

Expand Copy Copy