AI 助理
备案控制台
开发者社区 云计算 文章 正文

Element-UI快速入门（三)

2022-05-25 203
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Element-UI快速入门（三)

6.表单


简单表单：登录


显示登录页面：Login.vue微信图片_20220525233633.png登录表单效果微信图片_20220525233709.png

<template>
  <el-card class="box-card">
    <el-form :model="user" label-width="80px" ref="loginFormRef">
      <el-form-item label="用户名">
        <el-input v-model="user.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="user.password" prefix-icon="el-icon-lock" type="password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
        <el-button type="info" @click="$refs.loginFormRef.resetFields()" >重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
export default {
  data() {
    return {
      user: {
        username: '',
        password: ''
      }
    }
  },
}
</script>
<style>
  .box-card {
    width: 480px;
  }
</style>

复杂表单：注册


微信图片_20220525233717.png

微信图片_20220525233951.png

<template>
  <el-card class="box-card">
    <el-form :model="user" label-width="80px" ref="loginFormRef">
      <el-form-item label="用户名">
        <el-input v-model="user.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="user.password" prefix-icon="el-icon-lock" type="password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input v-model="user.repassword" prefix-icon="el-icon-lock" type="password" placeholder="请再次输入密码"></el-input>
      </el-form-item>
      <el-form-item label="生日">
        <el-date-picker v-model="user.birthday" type="date" placeholder="选择日期">
    </el-date-picker>
      </el-form-item>
      <el-form-item label="学历">
        <el-select v-model="user.edu" placeholder="请选择你的学历">
          <el-option label="小班" value="xb"></el-option>
          <el-option label="中班" value="zb"></el-option>
          <el-option label="大班" value="db"></el-option>
          <el-option label="学前班" value="xqb"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="user.gender">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="爱好">
        <el-checkbox-group v-model="user.hobbies">
          <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="婚否">
        <el-switch v-model="user.marry"></el-switch>
      </el-form-item>
      <el-form-item label="省市县">
        <el-cascader
          v-model="user.city"
          :options="cityList"
          ></el-cascader>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
        <el-button type="info" @click="$refs.loginFormRef.resetFields()" >重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
export default {
  data() {
    return {
      user: {
        username: 'jack',
        password: '1234',
        repassword: '1234',
        birthday: '2020-10-07',
        edu: 'db',
        gender: '女',
        hobbies: ['抽烟','烫头'],
        marry: true,
        city: ['jiangsu', 'suqian', 'shuyang'],
      },
      cityList: [
        {
          value: 'jiangsu',
          label: '江苏',
          children: [
            {
              value: 'suqian',
              label: '宿迁',
              children: [
                {
                  value: 'shuyang',
                  label: '沭阳',
                },
                {
                  value: 'siyang',
                  label: '泗阳',
                }
              ]
            },
            {
              value: 'lianyungang',
              label: '连云港',
            }
          ]
        }
      ]
    }
  },
  methods: {
    login() {
      alert('登录中...')
    }
  },
}
</script>
<style>
  .box-card {
    width: 480px;
  }
</style>

表单校验

微信图片_20220525234005.png微信图片_20220525233959.png/

设置校验规则、确定校验属性微信图片_20220525234255.png

编写校验规则

rules: {
   校验属性: [  规则1,  规则2, .... ]
}
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 5, message: `用户名长度必须3-5之间`, trigger: 'blur' }

微信图片_20220525234405.png

提交表单时，校验微信图片_20220525234411.png

<template>
  <el-card class="box-card">
    <el-form :model="user" :rules="rules" label-width="80px" ref="loginFormRef">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="user.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="user.password" prefix-icon="el-icon-lock" type="password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
        <el-button type="info" @click="$refs.loginFormRef.resetFields()" >重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
export default {
  data() {
    return {
      user: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: `用户名长度必须3-5之间`, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 5, message: `密码长度必须3-5之间`, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    login() {
      this.$refs.loginFormRef.validate(valid => {
        if(valid) {
          // 校验通过
          console.info('通过')
        } else {
          // 校验未通过
           console.info('未通过')
        }
      })
    }
  },
}
</script>
<style>
  .box-card {
    width: 480px;
  }
</style>

自定义校验

<template>
  <div>
    <h3>登录校验</h3>
    <el-card class="login-card">
      <!-- 登录表单start -->
      <el-form ref="loginForm" :model="user" :rules="rules" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="user.username" prefix-icon="el-icon-user" placeholder="请输入用户名" clearable></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="user.password" prefix-icon="el-icon-lock" placeholder="请输入密码" show-password clearable></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="repassword">
          <el-input v-model="user.repassword" prefix-icon="el-icon-lock" placeholder="请再次输入密码" show-password clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login()">登录</el-button>
          <el-button type="info">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 登录表单end -->
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    //校验： 密码和确认密码一致
    var validatePass2 = (rule, value, callback) => {
      if (value !== this.user.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      user: {
        username: '',
        password: '',
        repassword: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '用户名长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 5, message: '密码长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        repassword: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    login() {
      // js 对象调用有2种方式：this.user.username  或 this.user['username']
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          // 校验通过
          alert('submit!');
        } else {
          // 校验失败
          console.log('error submit!!');
          return false;
        }
      });
    }
  },
}
</script>
<style>
  .login-card{
    width: 480px;
  }
</style>

7.常见组件


按钮 Button


微信图片_20220525234721.png

<template>
  <div>
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
  </div>
</template>
<script>
export default {
}
</script>
<style>
</style>

消息提示 Message

微信图片_20220525234731.png

this.$message.success('这是一条成功消息')
this.$message.error('这是一条错误消息')
<template>
  <div>
    <el-button type="info" @click="open1">消息</el-button>
    <el-button type="success" @click="open2">成功</el-button>
    <el-button type="warning" @click="open3">警告</el-button>
    <el-button type="danger" @click="open4">错误</el-button>
  </div>
</template>
<script>
export default {
  methods: {
    open1() {
      this.$message.info('这是一条提示信息')
    },
    open2() {
      this.$message.success('这是一条成功消息')
    },
    open3() {
      this.$message.warning('这是一条警告消息')
    },
    open4() {
      this.$message.error('这是一条错误消息')
    },
  },
}
</script>
<style>
</style>

弹出框 MessageBox 确认消息

微信图片_20220525234737.png

 this.$confirm('这是提示信息','这是标题',{confirmButtonText: '确定按钮',cancelButtonText: '取消按钮',type: 'warning'})
      .then(()=>{
        // 确定按钮回调
        this.$message.success('删除了')
        // ajax操作
      })
      .catch(()=>{
        // 取消按钮回调
        this.$message.error('取消了')
      })

弹出框


编写弹出层微信图片_20220525234737.png

 this.$confirm('这是提示信息','这是标题',{confirmButtonText: '确定按钮',cancelButtonText: '取消按钮',type: 'warning'})
      .then(()=>{
        // 确定按钮回调
        this.$message.success('删除了')
        // ajax操作
      })
      .catch(()=>{
        // 取消按钮回调
        this.$message.error('取消了')
      })

弹出框


编写弹出层微信图片_20220525235007.png

<template>
  <div>
    <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
    <!-- 弹出层 -->
    <el-dialog title="这是标题" :visible.sync="dialogVisible" >
      我是一段正文信息
      <!-- 操作按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,  //是否显示弹出层
    }
  },
}
</script>
<style>
</style>

抽屉


微信图片_20220525235014.png

<template>
  <div>
    <el-button type="primary" @click="drawerFormVisible = true">修改学生</el-button>
    <!-- 抽屉start -->
    <el-drawer
      title="我是标题"
      :visible.sync="drawerFormVisible"
      direction="rtl"
      :before-close="handleClose">
      <el-form :model="student" label-width="80px">
        <el-form-item label="姓名" >
          <el-input v-model="student.sname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="班级" >
          <el-select v-model="student.cid" placeholder="请选择班级">
            <el-option label="Java12班" value="c001"></el-option>
            <el-option label="Java34班" value="c002"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="drawerFormVisible=false">确定</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <!-- 抽屉end -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      drawerFormVisible: false,
      student: {
      }
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          //确定按钮
          done();   //结束回调
        })
        .catch(_ => {
          //取消
        });
    }
  },
}
</script>
<style>
</style>

标签页

微信图片_20220525235021.png

<template>
  <div>
    <el-tabs v-model="activeName" >
      <el-tab-pane label="用户管理" name="first">
        用户管理
        <el-button type="primary" @click="activeName = 'second'">下一步</el-button>
      </el-tab-pane>
      <el-tab-pane label="配置管理" name="second">
        配置管理
        <el-button type="primary" @click="activeName = 'third'">下一步</el-button>
      </el-tab-pane>
      <el-tab-pane label="角色管理" name="third">
        角色管理
        <el-button type="primary" @click="activeName = 'fourth'">下一步</el-button>
      </el-tab-pane>
      <el-tab-pane label="定时任务补偿" name="fourth">
        定时任务补偿
        <el-button type="primary" @click="$message.success('成功了')">完成</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: 'first'
    };
  }
}
</script>
<style>
</style>


关键词：
UI快速入门
陶然同学
目录
相关文章
孤影过客
|
5月前
|
JavaScript 前端开发 开发者
Element-UI快速入门
Element-UI 是一个功能强大的 Vue 组件库，非常适合快速开发高质量的企业级前端应用。通过本文的快速入门指南，你应该能够开始使用 Element-UI，并将其组件应用到你的项目中。不断探索和实践将帮助你更好地理解和利用这个工具库为你的应用增添独特的价值。 希望这篇博客能够帮助你快速上手 Element-UI，为你的 Vue 项目加速开发。
孤影过客
142 1
游客g7kiuqrvkhn3g
|
6月前
|
资源调度 JavaScript
Element-ui快速入门
Element-ui是基于Vue.js的桌面端UI组件库，用于快速构建美观界面。以下是其快速入门步骤：1) 使用npm或yarn安装；2) 在main.js中引入样式和组件；3) 直接在Vue组件中使用Element-ui组件；4) 可根据需要定制主题样式。参照官方文档可了解更多组件和用法。
游客g7kiuqrvkhn3g
87 1
周盛欢
|
6月前
|
JavaScript Windows
Element-ui快速入门
Element-ui快速入门
周盛欢
74 0
陶然同学
|
前端开发
Element-UI快速入门 （三）
7.常见组件 按钮 Button
陶然同学
54 0
陶然同学
Element-UI快速入门 （二）
5.表格：查询列表 测试页面
陶然同学
133 0
陶然同学
|
JavaScript 前端开发 开发者
Element-UI快速入门（一）
什么是Element UI Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element UI是基于Vue 2.0的 Element UI 提供一组组件 Element UI 提供组件的参考实例, 直接复制
陶然同学
181 0
陶然同学
|
JavaScript 前端开发 开发者
Element-UI快速入门
Element-UI快速入门Element-UI快速入门
陶然同学
966 0
Element-UI快速入门
Designer小郑
|
JavaScript 前端开发 开发工具
Vue组件库 View UI快速入门 环境配置
Vue组件库 View UI快速入门 环境配置
Designer小郑
391 0
陶然同学
|
前端开发
Element-UI快速入门（三）
Element-UI快速入门
陶然同学
162 0
Element-UI快速入门（三）
陶然同学
Element-UI快速入门（二）
Element-UI快速入门
陶然同学
111 0
Element-UI快速入门（二）