Element-plus+Vue3

不要复制粘贴 因为有些需要要引入 我用的工具的 vscode 免费的

实现点击查看大图

1、在你的页面中加入组件

//查看大图的组件
<el-image-viewer v-show="zhiYin" @close="closeViewer"  :url-list="srcList"></el-image-viewer>

//点击按钮
<el-button type="success" size="mini" @click="onPreview">查看大图</el-button>

2、事件

import localImage from '../../assets/01.png' //引入本地的图片

setup(){
	const imgs = ref(false)
	
	const onPreview = () =>{
      imgs.value = true
    }

    const closeViewer = ()=>{
      imgs.value = false
    }
    
    //srcList 里面传入多张图片已逗号分开
    const srcList = [
    	localImage,//这个是传入本地图片的写法
    	'WWW.xxxx.xx.jpg',使用线上的图片 
    	'WWW.xxxx.xx.jpg',
    ]
   return{
   	onPreview,
   	closeViewer,
   	srcList,
   }
}

@clonse 点击关闭触发的事件
:url-list 你的图片地址

这样就可以给你想要的地方加入查看大图的功能了。

钩子函数

1、这个函数在进入页面就会 执行不需要刷新
onActivated(()=>{
	console.log(1);
})

2、这个离开页面就会执行
onDeactivated(()=>{
	console.log(2);
})

3、这个在页面第一次进入的时候就会执行但是跳转回来就不会执行了需要刷新一下
onMounted(()=>{
	console.log(3)
})

async异步调用

详情 https://www.cnblogs.com/SamWeb/p/8417940.html

await 也是异步使用

详情 https://segmentfault.com/a/1190000007535316

Form表单验证

上面这两个我具体不知道怎么使用

但是这两个我是用来验证 element-plus 的表单验证的

<!--:model="newVaccines" 这个绑定你的对象  
	:rules="yiMiaoRules" 绑定你的验证规则 
	 ref="yiMiaoFormss"  这个用来重置你的数据以及校验 表单是否符合规则 
	下面 el-form-item 中的 prop="名称" 就是这个字段的验证规则 这里的名称需要你自定义的一致
	注意 ref 和 ：model 中绑定的要不一致 不然没有效果 虽然官网中是一致的
--> 
<el-form label-width="100px" :model="newVaccines" :rules="yiMiaoRules" ref="yiMiaoFormss">
    <el-row>
       <el-col :span="12">
          <el-form-item label="本院id：" prop="id">
            <el-input disabled v-model="newVaccines.id"></el-input>
          </el-form-item>
       </el-col>
       <el-col :span="12">
          <el-form-item label="疫苗名称：" prop="name">
            <el-input v-model="Vaccines.name"></el-input>
          </el-form-item>
       </el-col>
       <el-col :span="12">
          <el-form-item label="可否预约：" prop="enableFlag">
            <el-radio-group v-model="Vaccines.enableFlag">
               <el-radio :label="1">是</el-radio>
               <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
       </el-col>
       <el-col :span="12">
          <el-form-item label="预约提示：" prop="bookTip">
            <el-input v-model="Vaccines.bookTip" type="textarea" :rows="4"></el-input>
          </el-form-item>
       </el-col>
    </el-row>
</el-form>
<el-button size="mini" @click="submit()" >提交</el-button>
<el-button size="mini" @click="reset()" >重置</el-button>

下面就是你的验证规则了

export default {
    setup(){
		//这里就是你 form 表单中的 ref 
		const yiMiaoFormss = ref(null)
        //表单中绑定的数据
        const newVaccines = ref({
            id: '',
            name: '',
            enableFlag: '',
            bookTip:''
        }) 
        /* 验证规则 
         * 自定义 关键字 validator:你自定义的名称，这个表单验证的是一个数组所以说可以有多个验证
         * required 这项是否必填  trigeer 触发检查的方式 blur 失去焦点时检查 change 值发生改变时触发
         * 使用正则  {pattern:/^[a-z]+$/,message:'只能输入字母!'},
         */
        const yiMiaoRules = ref({
            id: [{ required: true, trigger: 'blur', validator:id}],
            name: [{ required: true, message: '疫苗名称不能为空', trigger: 'blur' }],
            enableFlag: [{ required: true, message: '至少选中一项', trigger: 'blur' }],
            bookTip: [{ required: true, message: '不能为空', trigger: 'blur' },
            { min: 3, max: 120, message: '长度在 3 到 120 个字', trigger: 'blur' }],
            //数字的验证 但是你要先这样绑定 v-model.number 
            defaultQuantity: [{ type: 'number', message: '只能输入数字', trigger: 'blur' },
            { message: '阈值不能为空', trigger: 'blur' },
            { required:true , pattern: /^([0-9]|[1-9]d|[1]dd|200)$/, message: '阈值设置在 0 ~ 200 个数字', trigger: 'blur' }]
        })
        //使用自定义id 验证规则
        const id = (rule,value,callback) = >{
            let reg =  /^d+$|^d+[.]?d+$/;
            //正则表达的判断要这样写
            if(!reg.test(value)){
                callback(new Error('只能输入数字'))
            }else if(value.length > 10){
                callback(new Error('最多可输入10个字符'))
            }else if(!valie){
          		callback(new Error('该项不能为空'));
            }else{ 
                //如果上面的都不满足那么就 说明表单验证成功了 直接退出 重点这个必须要有的
               	callback()
            }
        }
    	//点击了 提交按钮 如果没有 async 那么 await会报错
    	const submit = async() =>{
            //首先要拿到你表单中绑定的控件
            const form = unref(yiMiaoFormss);
            //判断如果这个控件没有就直接退出
            if(!form)return
            try{
                //开启验证
                await form.validate()
                console.log("成功了")
            }catch(erroe){console.log("表单验证不成功")}
        }
		//重置 有两种方法
		const reset = () =>{
            //1、newVaccines.value = {}
            //2、使用element-plus的 这个名字是你绑定表单控件的名字
            unref(yiMiaoFormss).resetFields()
        }
        
		return{
			yiMiaoFormss,
            yiMiaoRules, 
            submit,
		}
	}
}

校验规则
{ required: true, message: '会诊科室不能为空', trigger: 'change' }  这个是下拉框 和 单选框的校验规则
{ required: true, message: '病情简介不能为空', trigger: 'blur' } 这个只是校验不能为空的
 { min: 3, max: 120, message: '长度在 3 到 100 个字符', trigger: 'blur' } 校验最大值和最小值 只能是string类型的

表单验证中去掉前后的空格

//在表单失去焦点的时候 去掉前后的空格
@blur="你v-model绑定的值=$event.target.value.trim()"
//还有一个是 这个是在输入的时候就会阻止用户在前后禁止输入空格，体验不好，你试一下就知道了
v-model.trim

最后

以上就是甜蜜香烟为你收集整理的Element-plus+Vue3Element-plus+Vue3的全部内容，希望文章能够帮你解决Element-plus+Vue3Element-plus+Vue3所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。