83 lines
1.7 KiB
Vue
83 lines
1.7 KiB
Vue
<!--
|
|
* @Author: micky
|
|
* @Date: 2024-08-10 15:24:06
|
|
* @LastEditors: micky
|
|
* @LastEditTime: 2024-10-28 18:00:13
|
|
* @FilePath: \chargingpile-uniapp\src\components\design-input-field.vue
|
|
-->
|
|
<template>
|
|
<view class="design-field" :style="fieldStyle">
|
|
<text class="field" :class="{ 'field-required': required }" :style="labelStyle">
|
|
{{ label }}
|
|
</text>
|
|
<u-switch
|
|
v-model="innerValue"
|
|
:activeValue="1"
|
|
:inactiveValue="0"
|
|
:disabled="disabled"
|
|
@change="handleSwitchChange"
|
|
></u-switch>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref, watch } from 'vue'
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
label: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: '请输入'
|
|
},
|
|
required: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
fieldStyle: {
|
|
type: Object
|
|
},
|
|
labelWidth: {
|
|
type: Number,
|
|
default: 120
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
const emit = defineEmits(['update:modelValue'])
|
|
const innerValue = ref(props.modelValue)
|
|
const labelStyle = computed(() => {
|
|
const { labelWidth } = props
|
|
return {
|
|
width: `${labelWidth * 2}rpx`
|
|
}
|
|
})
|
|
|
|
const handleSwitchChange = (value: number) => {
|
|
emit('update:modelValue', value)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.design-field {
|
|
@include flex-align;
|
|
border-bottom: 1px solid $gray-3;
|
|
padding: 24rpx 32rpx 24rpx 32rpx;
|
|
.field {
|
|
// width: 240rpx;
|
|
}
|
|
.wrapper,
|
|
.input {
|
|
flex: 1;
|
|
}
|
|
}
|
|
</style>
|