111 lines
2.3 KiB
Vue
111 lines
2.3 KiB
Vue
<script setup>
|
|
import { computed, useSlots } from 'vue'
|
|
|
|
const slots = useSlots()
|
|
|
|
// 判断默认的插槽是否存在
|
|
const hasDefaultSlot = computed(() => slots.default !== undefined)
|
|
|
|
const name = defineModel({
|
|
type: String,
|
|
default: ''
|
|
})
|
|
|
|
const props = defineProps({
|
|
/**
|
|
* 输入框状态类型
|
|
* text: 文本
|
|
* password: 密码
|
|
* number: 数字
|
|
* tel: 手机号
|
|
* email: 邮箱
|
|
*/
|
|
type: {
|
|
type: String,
|
|
default: 'text'
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: '标题'
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: '请输入'
|
|
},
|
|
/** 是否使用输入框 */
|
|
isInput: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
const placeholderStyle = `font-family: PingFang SC, PingFang SC; font-weight: 500; color: #D9D9D9; font-size: 28rpx; font-style: normal; text-transform: none;`
|
|
</script>
|
|
|
|
<template>
|
|
<view class="card-input">
|
|
<view class="input-box">
|
|
<text class="title">{{ props.title }}</text>
|
|
<input
|
|
v-if="props.isInput"
|
|
v-model="name"
|
|
:disabled="props.disabled"
|
|
:type="props.type"
|
|
:placeholder-style="placeholderStyle"
|
|
:placeholder="props.placeholder"
|
|
/>
|
|
<view v-else class="right-box">
|
|
<slot name="right"></slot>
|
|
</view>
|
|
</view>
|
|
<view v-if="hasDefaultSlot" class="bottom-slot">
|
|
<slot></slot>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.card-input + .card-input {
|
|
margin-top: 16rpx;
|
|
}
|
|
.card-input {
|
|
background: #ffffff;
|
|
border-radius: 16rpx;
|
|
padding: 20rpx 32rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.input-box {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.right-box {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.bottom-slot {
|
|
margin-top: 26rpx;
|
|
}
|
|
.title {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
input {
|
|
width: 340rpx;
|
|
text-align: right;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
</style>
|