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.
120 lines
2.6 KiB
120 lines
2.6 KiB
6 months ago
|
<script setup>
|
||
|
|
|
||
|
|
import {computed, inject, onMounted, ref, watch} from "vue";
|
||
|
|
import image from "@/config/image";
|
||
|
|
|
||
|
|
const imagesPublic = image.Public;
|
||
|
|
const props = defineProps({
|
||
|
|
label: {
|
||
|
|
type: String,
|
||
|
|
default: '',
|
||
|
|
},
|
||
|
|
name: {
|
||
|
|
type: String,
|
||
|
|
default: '',
|
||
|
|
},
|
||
|
|
align: {
|
||
|
|
type: String,
|
||
|
|
default: 'between',// vertical || between
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
type: [Object, String],
|
||
|
|
default: {}
|
||
|
|
},
|
||
|
|
labelStyle: {
|
||
|
|
type: [Object, String],
|
||
|
|
default: {}
|
||
|
|
},
|
||
|
|
inputStyle: {
|
||
|
|
type: [Object, String],
|
||
|
|
default: {}
|
||
|
|
},
|
||
|
|
customOption: {
|
||
|
|
type: [Object],
|
||
|
|
default: {}
|
||
|
|
},
|
||
|
|
border: {
|
||
|
|
type: [Boolean],
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
required: {
|
||
|
|
type: [Boolean],
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
prop: {
|
||
|
|
type: [String],
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const formItemStyle = computed(() => {
|
||
|
|
return {
|
||
|
|
paddingBottom: ((props.align === 'vertical') ? '0' : '35rpx'),
|
||
|
|
borderBottom: props.border ? '2rpx solid #EEEEEE' : 'none',
|
||
|
|
...uni.$m.addStyle(props.itemStyle),
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const labelStyle = computed(() => {
|
||
|
|
return {
|
||
|
|
paddingLeft: (props.inputType === 'textarea' || props.inputType === 'upload') ? 0 : '35rpx',
|
||
|
|
paddingRight: (props.inputType === 'textarea' || props.inputType === 'upload') ? 0 : '35rpx',
|
||
|
|
...uni.$m.addStyle(props.labelStyle),
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const inputStyle = computed(() => {
|
||
|
|
const padding = ((props.inputType === 'textarea' || props.inputType === 'upload') && type === 'form') ? 0 : '35rpx'
|
||
|
|
return {
|
||
|
|
paddingLeft: padding,
|
||
|
|
paddingRight: padding,
|
||
|
|
...uni.$m.addStyle(props.inputStyle),
|
||
|
|
}
|
||
|
|
})
|
||
|
|
const parent = inject('form')
|
||
|
|
onMounted(() => {
|
||
|
|
if(parent && props.required){
|
||
|
|
parent.rule.value.push({label:props.label || props.name,value:props.prop});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<view class="form-item row justify-between" :style="formItemStyle">
|
||
|
|
<view class="label border-box" :style="labelStyle" :class="{'vertical':(align === 'vertical')}">
|
||
|
|
<view class="required" v-if="required">
|
||
|
|
<m-text text="*" size="32rpx" align="center" line-height="50rpx" color="#FF3838"></m-text>
|
||
|
|
</view>
|
||
|
|
<m-text :text="label" size="32rpx" line-height="50rpx" color="#020b18"></m-text>
|
||
|
|
</view>
|
||
|
|
<view class="input border-box" :style="inputStyle" :class="{'vertical':(align === 'vertical')}">
|
||
|
|
<slot></slot>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.form-item {
|
||
|
|
padding: 35rpx 0;
|
||
|
|
position:relative;
|
||
|
|
.label{
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.required{
|
||
|
|
position: absolute;
|
||
|
|
width:35rpx;
|
||
|
|
height:100%;
|
||
|
|
top:8rpx;
|
||
|
|
left:0;
|
||
|
|
}
|
||
|
|
&.bottom {
|
||
|
|
padding-bottom: 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.vertical {
|
||
|
|
flex: 0 0 100%;
|
||
|
|
padding-bottom: 10rpx;
|
||
|
|
}
|
||
|
|
</style>
|