• ref 可以把值类型转成响应式
  • reactive 可以把一个引用数据类型转成响应式的
  • isReactive 检查是否是一个响应式的对象
  • toRef 把一个响应式的对象的某个属性转成响应式(可以用来为源响应式对象上的某个property新建一个ref。然后,ref可以被传递,它会保持对其源property的响应式连接。当你要将prop的ref 传递给复合函数时, toRef很有用。即使源property不存在,toRef也会返回一个可用的ref。这使得它在使用可选prop时特别有用,可选prop并不会被toRefs处理。)
  • toRefs 把一个响应式的对象转成普通对象 但是里边每一个属性还是响应式的
  • toRaw 获取代理对象的原始对象 

.js

// 禁止输入表情包
export const includeSpecial = (value) => {
  // eslint-disable-next-line
  const regStr = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi
  value.value = value.value ? value.value.replace(regStr, '') : ''
}

.vue   使用

<template>
  <div class="form_search">
    <el-form class='form_flex' :inline="true" size="mini" :model="searchParam" ref="searchForm" label-width="100px">
      <div class='form_flex_item'>
        <div>
          <el-form-item label="手机号">
            <el-input v-model="searchParam.userPhone" placeholder='请输入' clearable @input="includeSpecial(toRef(searchParam, 'userPhone'))"></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="用户姓名">
            <el-input v-model="searchParam.userName" placeholder='请输入' clearable @input="includeSpecial(toRef(searchParam, 'userName'))"></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item>
            <el-button type="primary" name='search_search' @click="handleSubmit" icon="el-icon-search">查询</el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import { defineComponent, reactive, toRef } from 'vue'
import { includeSpecial } from '@/utils/utils.js'
export default defineComponent({
  setup (props, { emit }) {
    const searchParam = reactive({ userName: '', userPhone: '' })
    const handleSubmit = () => {
      emit('submit', searchParam)
    }
    return {
      handleSubmit,
      searchParam,
      includeSpecial,
      toRef
    }
  }
})
</script>
Logo

前往低代码交流专区

更多推荐