好了,我们把之前 mounted 写的DOM操作相关的东西都删掉,开始动手写一个自定义指令。 <ul class="options" v-show="showOptions" v-clickOut="test"> //这里使用了下面的自定义指令,并将一个test方法传递进去了 <li v-for="(item, index) in options" :key="index" @click.stop="choose(item.value)"...
import {ElMessage} from 'element-plus'; export default { setup() { const route = useRoute(); const datadialog = ref(false) // 新增弹窗 const upload = ref(""); //上传 const ruleFormRef = ref(null); //表单 let formSize = 'default'; let ruleForm = reactive({ title:'',// 标...
setup () {constloginForm = ref<loginData>({email:'',pass:''})constrouter =useRouter()constloginFormRef =ref()// 自定义验证规则constvalidatePass= (rule, value, callback) => {// 密码只能由大小写英文字母或数字开头,且由大小写英文字母_.组成constreg =/^[A-Za-z0-9][A-Za-z0-9_.]{...
const handelAdd = async () => { if (formModel.attendanceGroups.length < 3) { // 暂时禁用表单的自动验证 if (formRef.value) { formRef.value.validateDisabled = true; } const newIndex = formModel.attendanceGroups.length; formModel.attendanceGroups.push({ // ... 新考勤组的初始数据 }); ...
npm install element-plus --save npm install @vue/compiler-sfc --save-dev 1. 2. 接下来,创建一个表单组件,例如 Form.vue <template> <el-form :model="form" :rules="rules" ref="form" label-width="100px" style="max-width: 400px; margin: 0 auto;" ...
其实比较简单,因为 validate方法 返回的是 Promise,所以利用async await 就可以实现啦。 子组件 抛出submit 方法 constsubmit=async()=>{letvalid=awaitformRef.value.validate().catch(err=>{//自定义catch方法,返回验证结果returnerr})//验证通过返回trueif(valid===true){//验证通过的代码}} ...
比如:自定义表单验证官网是这样的:var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码')); } else { if (this.ruleForm.checkPass !== '') { this.$refs.ruleForm.validateField('checkPass'); } callback(); } } 再比如表单提交和重置...
---注意 tableData为定义的数据 label为表头 prop为数据内容 效果如下 数据显示完毕就要开始添加教室的逻辑 二、添加教室 创建一个点击按钮 向项目中添加ul组件 当点击添加教室的时候让模态框显示出来 根据form表单将模态框中的内容补充完毕 进行班级名称的有效性验证 班级数据写死了 点击提交 逻辑 点击关闭按钮让 表...
用户在表单组件输入用户名和密码时,需要对用户输入的内容进行校验,譬如设置必填项(没有输入内容会出现提示信息),如果纯手工写,实现起来会麻烦一些,因此我们这里还是使用 element-plus 的表单组件。 element-plus 表单组件结构如下: 最外面是一个 el-form 标签,里面包裹两个 el-form-item 标签,最里面的输入框对应 ...