You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
2.5 KiB
107 lines
2.5 KiB
3 months ago
|
<template>
|
||
|
|
<div
|
||
|
|
:class="[{'column':column},{'error':hasError},{'w510':addClass=='w510'},{'w388':addClass=='w388'},'form-item']">
|
||
|
|
<div class="form-item-top">
|
||
|
|
<label v-if="label" for="">{{ label }}
|
||
|
|
<img src="../assets/require.svg" v-if="required" alt="">
|
||
|
|
</label>
|
||
|
|
<template >
|
||
|
|
<slot name="formLeft"></slot>
|
||
|
|
</template>
|
||
|
|
<template >
|
||
|
|
<slot name="formRight"></slot>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
<div class="form-item-bottom">
|
||
|
|
<template >
|
||
|
|
<slot name="formDom"></slot>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'GuipFormItem',
|
||
|
|
props:['label','required','addClass','column'],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
hasError: false,
|
||
|
|
// 目前这两个宽度用的最多，其余宽度自定义类名修改吧
|
||
|
|
classList:{
|
||
|
|
'w510':'w510',
|
||
|
|
'w388':'w388'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
// dynamicClasses() {
|
||
|
|
// return {
|
||
|
|
// active: this.isActive, // 如果isActive为true，则添加'active'类
|
||
|
|
// error: this.hasError, // 如果hasError为true，则添加'error'类
|
||
|
|
// highlighted: this.isHighlighted, // 如果isHighlighted为true，则添加'highlighted'类
|
||
|
|
// };
|
||
|
|
// }
|
||
|
|
},
|
||
|
|
mounted(){
|
||
|
|
console.log(this.required,'required----');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.form-item{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
label{
|
||
|
|
min-width: 54px;
|
||
|
|
margin-right: 8px;
|
||
|
|
}
|
||
|
|
.form-item-top{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
.form-item-bottom{
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
.rightdesc{
|
||
|
|
flex: 1;
|
||
|
|
text-align: right;
|
||
|
|
font-size: 12px;
|
||
|
|
line-height: 13px;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
font-variation-settings: "opsz" auto;
|
||
|
|
color: #8A9099;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.w510{
|
||
|
|
width: 510px;
|
||
|
|
}
|
||
|
|
.w388{
|
||
|
|
width: 388px;
|
||
|
|
}
|
||
|
|
.column{
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column !important;
|
||
|
|
align-items: self-start;
|
||
|
|
.form-item-top{
|
||
|
|
width: 100%;
|
||
|
|
margin-bottom: 12px;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
.form-item-bottom{
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.form-top-icon{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
img{
|
||
|
|
width: 16px;
|
||
|
|
height: 16px;
|
||
|
|
margin-right: 8px;
|
||
|
|
}
|
||
|
|
span{
|
||
|
|
color: #1E2226;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|