68 lines
1.4 KiB
Vue
68 lines
1.4 KiB
Vue
<template>
|
|
<view class="bg-white">
|
|
<view class="name">
|
|
<view class="flex items-center">
|
|
<view class="name-text mr-1">{{ title }}</view>
|
|
<up-icon
|
|
v-if="tip"
|
|
name="question-circle-fill"
|
|
color="#555555"
|
|
size="38"
|
|
@click="tipDialog"
|
|
></up-icon>
|
|
</view>
|
|
<switch :checked="checked" class="mr-4 transform-scale-90" @change="change" color="#002ce5" />
|
|
</view>
|
|
<view class="px-3 text-sm whitespace-pre-line pb-2" v-if="placeholder">{{ placeholder }}</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, ref } from 'vue'
|
|
|
|
const checked = ref(false)
|
|
|
|
const props = defineProps({
|
|
title: String,
|
|
placeholder: String,
|
|
value: Boolean,
|
|
tip: String
|
|
})
|
|
|
|
onMounted(() => {
|
|
checked.value = props.value
|
|
})
|
|
|
|
const emits = defineEmits(['change'])
|
|
|
|
const change = e => {
|
|
emits('change', e)
|
|
}
|
|
|
|
const tipDialog = () => {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: props.tip,
|
|
showCancel: false
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.name {
|
|
height: 100rpx;
|
|
width: 750rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: #ffffff;
|
|
|
|
.name-text {
|
|
margin-left: 32rpx;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
line-height: 100rpx;
|
|
}
|
|
}
|
|
</style>
|