Vue封装input公共组件
Vue封装input公共组件
最近呢有⼀个需求是很多个表单添加 编辑等操作 会⽤到很多input输⼊框
所以就想把input进⾏简单封装 提⾼⼀些复⽤率减少⼀些代码量
因封装没什么难度性 故直接贴上代码 做⼀些简单的注释
<template>
<div >
<el-form    :label-position="labelPosition" label-width="90px" >
<el-form-item :label='item.label':prop='item.prop' v-for='(item,index) in inputCloumn':key='item.prop+index'>
<el-input :show-password='pe'  :placeholder="item.placeholder" im='formData[item.prop]':disabled='item.disabled'> </el-input>
input标签placeholder属性</el-form-item>
</el-form>
</div>
</template>
<script>
export default{
data(){
return{
labelPosition:'left',
};
},
props:{
inputCloumn:{
type: Array,
},
formData:{
type:Object,
}
},
methods:{
},
created(){},
};
</script>
<style  lang='scss' scoped>
</style>
//⽗组件调⽤
<moduleInput :inputCloumn="inputAdd":formData="formObj"></moduleInput>
data(){
return{
//通过添加⼀些属性⼦组件接收可以灵活对单个input进⾏控制不同的输⼊类型不同的⽂字显⽰  inputAdd:[
{
label:"⼦级",
prop:"gradingName",
placeholder:"请输⼊⼦级名称",
},
{
label:"管理员名称",
prop:"realName",
placeholder:"请输⼊管理员名称",
},
{
label:"⽤户名",
prop:"loginName",
placeholder:"请输⼊⽤户名",
},
{
label:"⼿机号",
prop:"mobile",
placeholder:"请输⼊⼿机号",
},
{
label:"密码",
prop:"password",
placeholder:"请输⼊密码",
type:true,
},
],
formObj:{},
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。