- 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>