前言
最近因为新型冠状病毒,我们都只能呆在家不能出门,所以挺无聊的,就写下了这篇用element-ui实现一个属于自己的组件,希望能对大家有帮助!
创建项目
检查node环境配置
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)
node -v
Vue版本
可以使用下列任一命令安装这个新的包
npm install -g @vue/cli
# OR
yarn global add @vue/cli
查看vue版本
vue --version
创建项目
vue create hello-world
注意:由于我们是开发一个第三方依赖库,我们选择 Manually select features
选择特性安装到到项目中
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
(*) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
安装哪一种 CSS 预处理语言
(*) Sass/SCSS (with dart-sass)
( ) Sass/SCSS (with node-sass)
( ) Less
( ) Stylus
选择代码风格
(*) ESLint with error prevention only
( ) ESLint + Airbnb config
( ) ESLint + Standard config
( ) ESLint + Prettier
哪种方式检测代码格式
(*) Lint on save
( ) Lint and fix on commit
是否保存预配置
Save this as a preset for future projects? (y/N)N
最后系统帮我们生成一个完整的项目。
element集成
在项目里使用
vue add element
首先
需要在element.js里面导入Form、FormItem和Input
element.js最后的代码:
import Vue from 'vue'
import { Button,Form,FormItem,Input } from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
组件使用
创建一个登录表单并可以验证用户输入
- App.vue
<div>
<h3>Element表单</h3>
<hr>
<el-form :model="model" :rules="rules" ref="loginForm">
<el-form-item label="用户名" prop="username">
<el-input v-model="model.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="password">
<el-input type="password" v-model="model.password" autocomplate="off">
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('loginForm')">提交</el-button>
</el-form-item>
</el-form>
</div>
data(){
return{
value:'',
model: {username: "ming",password: ""},
rules: {
username: [
{required: true, message: "请输入用户名"},
{min:6,max:10, message: "请输入6~10的用户名"},
],
password: [
{required: true, message: "请输入密码"}
],
}
};
},
methods: {
submitForm(form) {
this.$refs[form].validate(valid=>{
if(valid){
alert('请求登录!')
}else{
alert('效验失败!')
}
})
}
}
运行效果:
组件设计
实现Input、Form、FormItem
实现Input
- App.vue
通过v-model进行双向数据绑定,这里的v-model绑定了value值监听了input事件
<K-input v-model="value"></K-input>
import KInput from './components/input'
export default {
name: 'app',
components: {
KInput
},
}
- components/input.vue
<template>
<div>
<input :type="type" :value="value" @input="onInput">
</div>
</template>
<script>
export default{
props:{
value:{
type:String,
default: ''
},
type:{
type:String,
default: 'text'
}
},
methods:{
onInput(e) {
let value = e.target.value;
//input事件触发设置模型的值并通知父组件
this.$emit('input',value)
}
},
}
</script>
运行效果
实现FormItem
- App.vue
<!-- 用户名 -->
<K-form-Item label="用户名" prop="username">
<K-input v-model="model.username"></K-input>
</K-form-Item>
<!-- 密码 -->
<K-form-Item label="密码" prop="password">
<K-input v-model="model.password" type=""></K-input>
</K-form-Item>
import KInput from './components/input'
import KFormItem from './components/FormItem'
export default {
name: 'app',
components: {
KInput,
KFormItem
},
- components/FormItem.vue
<template>
<div>
<label for="">{{label}}</label>
<div>
<slot></slot>
<p v-if="errStatus">{{errMessage}}</p>
</div>
</div>
</template>
<script>
import Schema from 'async-validator'
export default{
inject: ['KForm'],
props:['label','prop'],
data(){
return{
errMessage: '',
errStatus: false
}
},
mounted(){
this.$on('validate',this.validator)
},
methods:{
validator(){
//有两个Input,一个用户名,一个密码
const rules = this.KForm.rules[this.prop];
const value = this.KForm.model[this.prop];
const descriptor = {[this.prop]:rules};
const schema = new Schema({descriptor});
schema.validate({[this.prop]:value},errors =>{
if(errors){
this.errMessage = errors[0].message;
this.errStatus = true;
}else{
this.errMessage = '';
this.errStatus = '';
}
})
}
}
}
</script>
运行结果
实现Form
- App.vue
<K-form :model="model" :rules="rules">
<!-- 用户名 -->
<K-form-Item label="用户名" prop="username">
<K-input v-model="model.username"></K-input>
</K-form-Item>
<!-- 密码 -->
<K-form-Item label="密码" prop="password">
<K-input v-model="model.password" type=""></K-input>
</K-form-Item>
</K-form>
import KInput from './components/input'
import KFormItem from './components/FormItem'
import KForm from './components/Form'
export default {
name: 'app',
components: {
KInput,
KFormItem,
KForm
},
- components/Form.vue
<template>
<div>
<form>
<slot>
</slot>
</form>
</div>
</template>
<script>
export default{
provide(){
return {
KForm: this
}
},
props:{
model:{
type: Object,
required: true
},
rules:{
type: Object
}
}
}
</script>
运行效果
代码地址
https://github.com/shifengming/element-form
最后
如果本文对你有帮助得话,给本文点个赞❤️❤️❤️
欢迎大家加入,一起学习前端,共同进步!