当前位置：首页 > news >正文

网站建设宀金手指花总十四青海城乡建设厅网站

news 2025/10/29 19:44:16

网站建设宀金手指花总十四,青海城乡建设厅网站,制作网页需要什么技术,冠县企业做网站推广文章目录使用ElementUI使用在线引入的方式使用脚手架引入全部引入按需引入表单的使用表单组件官网表单验证使用ElementUI 使用在线引入的方式由于ElementUI是**基于Vue2的组件库**，所以在线引入需要先引入Vue2，在去引入ElementUI。 <!DOCTYPE htm…

文章目录

使用ElementUI
- 使用在线引入的方式
- 使用脚手架引入
- - 全部引入
  - 按需引入
表单的使用
- 表单组件官网
- 表单验证

使用ElementUI

使用在线引入的方式

由于ElementUI是**基于Vue2的组件库**，所以在线引入需要先引入Vue2，在去引入ElementUI。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>引入Element组件</title><!-- 引入Element样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head><body><div id="app" ><el-button type="primary">主要按钮</el-button></div></body>
<!-- 引入Vue2语法 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
<!-- 引入Element组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>new Vue({el: '#app',data() {return {}},methods: {}})
</script></html>

演示
在这里插入图片描述

使用脚手架引入

全部引入

按需引入

表单的使用

表单组件官网

我们进入官网的表单官网直接复制代码：
https://element.eleme.cn/#/zh-CN/component/form#dong-tai-zeng-jian-biao-dan-xiang

表单验证

我们以表达验证进行演示
在这里插入图片描述
点击选择源码进行使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>引入Element组件</title><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><style>.demo-ruleForm{width: 600px;margin: 0 auto;}</style>
</head><body><div id="app" ><!-- 通过查看官网我们知道 label-width是表单域标签的宽度 --><!---ruleFormRef 用于获取元素实例。 ---><!-- :rules 表单验证规则--><el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-width="100px" class="demo-ruleForm"><!-- prop="name": 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的--><!-- 注意 prop 必须和<el-form>的 model对象中的字段名严格一致 这里是和ruleForm对象的属性一致，否则校验不生效--><!-- 注意 prop的值需与验证规则 rules对象的键名匹配（如 rules: { name: [ ... ] }) --><!-- prop本质就是把 :model="ruleForm" 和 :rules="rules"连接在一起，起一个桥梁的作用--><el-form-item label="活动名称" prop="name"><!-- v-model双向绑定 --><el-input v-model="ruleForm.name"></el-input></el-form-item><el-form-item label="活动区域" prop="region"><el-select v-model="ruleForm.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活动时间" required><el-col :span="11"><el-form-item prop="date1"><el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1"style="width: 100%;"></el-date-picker></el-form-item></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-form-item prop="date2"><el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker></el-form-item></el-col></el-form-item><el-form-item label="即时配送" prop="delivery"><el-switch v-model="ruleForm.delivery"></el-switch></el-form-item><el-form-item label="活动性质" prop="type"><el-checkbox-group v-model="ruleForm.type"><el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox><el-checkbox label="地推活动" name="type"></el-checkbox><el-checkbox label="线下主题活动" name="type"></el-checkbox><el-checkbox label="单纯品牌曝光" name="type"></el-checkbox></el-checkbox-group></el-form-item><el-form-item label="特殊资源" prop="resource"><el-radio-group v-model="ruleForm.resource"><el-radio label="线上品牌商赞助"></el-radio><el-radio label="线下场地免费"></el-radio></el-radio-group></el-form-item><el-form-item label="活动形式" prop="desc"><el-input type="textarea" v-model="ruleForm.desc"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleFormRef')">立即创建</el-button><el-button @click="resetForm('ruleFormRef')">重置</el-button></el-form-item></el-form></div></body>
<!-- 引入Vue2语法 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>new Vue({el: '#app',data() {return {ruleForm: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},rules: {name: [{ required: true, message: '请输入活动名称', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],date1: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],date2: [{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }],type: [{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }],resource: [{ required: true, message: '请选择活动资源', trigger: 'change' }],desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }]}};},methods: {submitForm(aa) {// ref="ruleFormRef"// <el-button type="primary" @click="submitForm('ruleFormRef')">立即创建</el-button>// <el-button @click="resetForm('ruleFormRef')">重置</el-button>// 这个aa是 ruleFormRef // this.$refs.ruleFormRef.validate() 等价于 this.$refs[aa].validate()// this.$refs[aa] 获取的是表单的实例 相当于document.querySelector('.demo-ruleForm')// validate() 这个方法是ElementUI给我们提供的内置方法，//          会自动校验表单，如果校验通过，会返回true，否则返回falsethis.$refs[aa].validate((valid) => {if (valid) {alert('发起axios请求');console.log(this.ruleForm);} else {console.log(this.$refs);console.log('error submit!!');return false;}});},resetForm(formName) {// resetFields 是ElmentUI的内置方法，用于清空表单数据。this.$refs[formName].resetFields();}}})
</script></html>