44 lines
871 B
Vue
44 lines
871 B
Vue
|
<script setup>
|
||
|
|
import ICON from "../static/icons/dd.png";
|
||
|
|
|
||
|
|
const {size} = defineProps({
|
||
|
|
size: {
|
||
|
|
type: String,
|
||
|
|
default: '30rpx',
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const modelValue = defineModel();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<view class="!flex" @click="modelValue=!modelValue">
|
||
|
|
<view :class="['x-t-y', modelValue ? 'cur' : '']">
|
||
|
|
<image v-if="modelValue" class="!size-[17rpx]" :src="ICON"></image>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view>
|
||
|
|
<slot></slot>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.x-t-y {
|
||
|
|
$size: v-bind(size);
|
||
|
|
width: $size;
|
||
|
|
height: $size;
|
||
|
|
border: 1px solid #666;
|
||
|
|
border-radius: 50%;
|
||
|
|
display: inline-flex;
|
||
|
|
flex-shrink: 0;
|
||
|
|
margin-top: 5rpx;
|
||
|
|
margin-right: 10rpx;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cur {
|
||
|
|
border: 1px solid var(--primary-color);
|
||
|
|
}
|
||
|
|
</style>
|