0.0.13 • Published 3 years ago
@l-lib/elps v0.0.13
elp-schema-form
this is a component lib base on element-plus
how to use
you need confirm you have install element-plus
npm i @l-lib/elps
then you can copy this code or see docs example
<template>
<Form v-model="modelValue" v-bind="formConfig"></Form>
</template>
<script>
import { ref } from 'vue'
import { Form } from '@l-lib/elps'
export default {
components: {
Form
},
setup() {
const modelValue = ref({})
const formConfig = {
formOptions: {
hideRequiredAsterisk: true,
labelPosition: 'top'
},
colLayout: {
span: 24
},
formItems: [
{
field: 'email',
label: 'E-mail',
placeholder: '請輸入E-mail',
rules: [
{ required: true, trigger: 'blur', message: 'E-mail是必填內容' },
{
type: 'email',
message: '請輸入正確的郵箱地址',
trigger: 'blur'
}
]
},
{
field: 'account',
label: '帳號',
placeholder: '請輸入帳號',
rules: [
{ required: true, trigger: 'blur', message: '帳號是必填內容' },
{
pattern: /^[0-9]{10}$/,
message: '帳號必須是10位數字',
trigger: 'blur'
}
]
},
{
field: 'password',
label: '密碼',
type: 'password',
placeholder: '請輸入密碼',
rules: [
{ required: true, trigger: 'blur', message: '密碼是必填內容' },
{
pattern: /^[0-9]{10}$/,
message: '密碼必須是10位數字',
trigger: 'blur'
}
]
}
]
}
return {
modelValue,
formConfig
}
}
}
</script>
test in local
if you want test in local with npm link
you need add this in vue.config.js
const path = require('path')
module.exports = {
chainWebpack: (config) => {
config.resolve.symlinks(false)
config.resolve.alias.set('vue', path.resolve('./node_modules/vue'))
config.module
.rule('eslint')
.exclude.add(/@l-lib/)
.end()
}
}