ElementUI 是一個(gè)基于 Vue.js 的高質(zhì)量 UI 組件庫(kù),由餓了么前端團(tuán)隊(duì)開(kāi)發(fā)和維護(hù)。它為開(kāi)發(fā)者提供了一系列豐富、靈活且易于使用的組件,幫助開(kāi)發(fā)者快速構(gòu)建出美觀且功能強(qiáng)大的 Web 應(yīng)用程序。ElementUI 提供了包括布局、導(dǎo)航、表單、數(shù)據(jù)展示等一系列常用的 UI 組件,同時(shí)也支持按需加載和自定義主題等功能,使得開(kāi)發(fā)者可以更加高效地進(jìn)行開(kāi)發(fā)。
以下是一個(gè)使用 ElementUI 的簡(jiǎn)單示例代碼,展示了一個(gè)包含輸入框和按鈕的表單:
<template> <el-form ref="form" :model="form" label-width="120px"> <el-form-item label="用戶(hù)名"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密碼"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('form')">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { username: '', password: '' } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('提交成功!'); } else { console.log('表單驗(yàn)證失??!'); return false; } }); } } }; </script>
在這個(gè)示例中,我們使用了 ElementUI 中的 el-form、el-form-item、el-input 和 el-button 組件來(lái)構(gòu)建一個(gè)簡(jiǎn)單的登錄表單。其中,v-model 指令用于實(shí)現(xiàn)雙向數(shù)據(jù)綁定,將輸入框中的值綁定到 form 對(duì)象中的 username 和 password 屬性上。在提交按鈕的點(diǎn)擊事件中,我們調(diào)用了 submitForm 方法來(lái)驗(yàn)證表單數(shù)據(jù)的有效性,如果驗(yàn)證通過(guò)則彈出提交成功的提示框。