119 lines
3.5 KiB
Vue
119 lines
3.5 KiB
Vue
<template>
|
|
<view
|
|
class="layout"
|
|
:class="{ first: props.isBorder }"
|
|
:style="{ padding: props.pd, backgroundColor: props.bgColor, alignItems: align }"
|
|
>
|
|
<!-- 最左侧插槽用于存放icon -->
|
|
<image :src="props.icon" v-if="props.icon" :style="{ width: props.iconSize, height: props.iconSize }" />
|
|
|
|
<view class="name" :style="{ color: props.textColor, fontSize: props.size }">{{ props.name }}</view>
|
|
<view class="input">
|
|
<slot>
|
|
<input
|
|
v-if="props.place != '' || props.value != ''"
|
|
:type="type"
|
|
:value="props.value"
|
|
placeholder-style="color:#A6A6A6;"
|
|
:placeholder="(rules != null ? '(必填)' : '') + place"
|
|
:style="{ fontSize: size }"
|
|
:maxlength="maxlength"
|
|
@input="onchange"
|
|
:focus="focus"
|
|
@focus="emits('focusShow')"
|
|
@blur="emits('focusNone')"
|
|
/>
|
|
<view v-else :style="{ fontSize: props.size, color: props.rightColor }">{{ props.right }}</view>
|
|
</slot>
|
|
</view>
|
|
|
|
<image src="/static/equipmentImg/arrow.svg" v-if="props.img" />
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, watchEffect, watch, onDeactivated, onBeforeUnmount, onMounted } from "vue"
|
|
import { addRules, clearOneRule } from "@/hooks/rules"
|
|
const props = defineProps({
|
|
name: { type: String, default: "" }, // 左侧文字
|
|
icon: { type: String, default: "" }, // 左侧图标
|
|
iconSize: { type: String, default: "40rpx" }, // 左侧图标大小
|
|
size: { type: String, default: "33rpx" }, // 文字大小
|
|
right: { type: String, default: "" }, // 右侧文字
|
|
value: { type: String, default: "" }, // 输入框文字
|
|
place: { type: String, default: "" }, // 提示文字
|
|
bgColor: { type: String, default: "" }, // 背景颜色
|
|
isBorder: { type: Boolean, default: false }, // 是否展示上边框
|
|
borderBg: { type: String, default: "#f2f2f2" }, // 上边框颜色
|
|
img: { type: Boolean, default: false }, // 是否展示右箭头
|
|
pd: { type: String, default: "40rpx 32rpx" },
|
|
textColor: { type: String, default: "#000" }, // 左侧文字颜色
|
|
rightColor: { type: String, default: "#fff" }, // 右侧文字颜色
|
|
size: { type: String, default: "33rpx" }, // 文字大小，
|
|
type: { type: String, default: "text" }, //输入框类型
|
|
rules: { default: null },
|
|
maxlength: { type: Number },
|
|
align: { type: String }, //对齐方式
|
|
focus: { type: Boolean, default: false },
|
|
})
|
|
const borderColor = ref(props.borderBg)
|
|
const places = ref("")
|
|
const emits = defineEmits(["update:value", "focusShow", "focusNone"])
|
|
const onchange = (e) => emits("update:value", e.detail.value)
|
|
|
|
onMounted(() => {
|
|
if (props.rules !== null) {
|
|
props.rules.Msg = props.name
|
|
addRules(props.rules)
|
|
}
|
|
})
|
|
onBeforeUnmount(() => {
|
|
if (props.rules !== null) {
|
|
clearOneRule(props.rules)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
page {
|
|
background-color: #f2f2f2;
|
|
}
|
|
.layout {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
.name {
|
|
white-space: nowrap;
|
|
font-size: 33rpx;
|
|
// line-height: 46rpx;
|
|
}
|
|
.input {
|
|
margin: 0 10rpx 0 20rpx;
|
|
flex-grow: 1;
|
|
text-align: right;
|
|
}
|
|
image {
|
|
flex-shrink: 0;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 32rpx;
|
|
height: 2rpx;
|
|
width: calc(100% - 32rpx);
|
|
background-color: v-bind(borderColor);
|
|
}
|
|
}
|
|
.first {
|
|
&::before {
|
|
height: 0rpx;
|
|
}
|
|
}
|
|
</style>
|