feat: 翻牌数字增加内阴影边框属性及配置,默认为 0

This commit is contained in:
tnt group 2023-05-14 12:12:59 +08:00
parent 606cb753c4
commit c508aaa400
4 changed files with 28 additions and 5 deletions

View File

@ -43,6 +43,10 @@ const props = defineProps({
backColor: { backColor: {
type: String, type: String,
default: '#000000' default: '#000000'
},
borderWidth: {
type: Number,
default: 2
} }
}) })
@ -93,6 +97,7 @@ $radius: v-bind('`${props.radius}px`');
$width: v-bind('`${props.width}px`'); $width: v-bind('`${props.width}px`');
$height: v-bind('`${props.height}px`'); $height: v-bind('`${props.height}px`');
$perspective: v-bind('`${props.height * 2}px`'); $perspective: v-bind('`${props.height * 2}px`');
$borderWidth: v-bind('`${props.borderWidth * 2}px`');
$speed: v-bind('`${props.duration / 1000}s`'); $speed: v-bind('`${props.duration / 1000}s`');
$shadowColor: #000000; $shadowColor: #000000;
$lineColor: #4a9ef8; $lineColor: #4a9ef8;
@ -138,7 +143,6 @@ $lineColor: #4a9ef8;
width: $width; width: $width;
height: $height; height: $height;
line-height: $height; line-height: $height;
border: solid 1px $backColor;
border-radius: $radius; border-radius: $radius;
background: $frontColor; background: $frontColor;
font-size: $width; font-size: $width;
@ -146,6 +150,17 @@ $lineColor: #4a9ef8;
box-shadow: 0 0 6px rgba($color: $shadowColor, $alpha: 0.5); // box-shadow: 0 0 6px rgba($color: $shadowColor, $alpha: 0.5); //
text-align: center; text-align: center;
// font-family: 'Helvetica Neue'; // font-family: 'Helvetica Neue';
&::after {
content: '';
position: absolute;
z-index: 10;
left: 0;
top: 0;
right: 0;
bottom: 0;
box-shadow: inset 0 0 $borderWidth 0 $frontColor; //
border-radius: $radius;
}
.digital:before, .digital:before,
.digital:after { .digital:after {

View File

@ -16,6 +16,7 @@ export interface OptionType {
flipperGap: number flipperGap: number
flipperType: FlipType flipperType: FlipType
flipperSpeed: number flipperSpeed: number
flipperBorderWidth: number
} }
export const option: OptionType = { export const option: OptionType = {
@ -28,7 +29,8 @@ export const option: OptionType = {
flipperRadius: 5, flipperRadius: 5,
flipperGap: 10, flipperGap: 10,
flipperType: 'down', flipperType: 'down',
flipperSpeed: 450 flipperSpeed: 450,
flipperBorderWidth: 0,
} }
export default class Config extends PublicConfigClass implements CreateComponentType { export default class Config extends PublicConfigClass implements CreateComponentType {

View File

@ -16,12 +16,16 @@
<setting-item name="高度"> <setting-item name="高度">
<n-input-number v-model:value="optionData.flipperHeight" size="small" :min="1"></n-input-number> <n-input-number v-model:value="optionData.flipperHeight" size="small" :min="1"></n-input-number>
</setting-item> </setting-item>
<setting-item name="间隔"> <setting-item name="边框">
<n-input-number v-model:value="optionData.flipperGap" size="small" :min="0"></n-input-number> <n-input-number v-model:value="optionData.flipperBorderWidth" size="small" :min="0" :max="10"></n-input-number>
</setting-item> </setting-item>
<setting-item name="圆角"> <setting-item name="圆角">
<n-input-number v-model:value="optionData.flipperRadius" size="small" :min="0"></n-input-number> <n-input-number v-model:value="optionData.flipperRadius" size="small" :min="0"></n-input-number>
</setting-item> </setting-item>
<setting-item name="翻牌间隔">
<n-input-number v-model:value="optionData.flipperGap" size="small" :min="0"></n-input-number>
</setting-item>
<setting-item />
<setting-item name="背景色"> <setting-item name="背景色">
<n-color-picker <n-color-picker
size="small" size="small"

View File

@ -9,6 +9,7 @@
:radius="flipperRadius" :radius="flipperRadius"
:flip-type="flipperType" :flip-type="flipperType"
:duration="flipperSpeed" :duration="flipperSpeed"
:border-width="flipperBorderWidth"
v-for="(item, index) in flipperData" v-for="(item, index) in flipperData"
:key="index" :key="index"
class="go-d-block" class="go-d-block"
@ -42,7 +43,8 @@ const {
flipperRadius, flipperRadius,
flipperGap, flipperGap,
flipperType, flipperType,
flipperSpeed flipperSpeed,
flipperBorderWidth
} = toRefs(props.chartConfig.option as OptionType) } = toRefs(props.chartConfig.option as OptionType)
const flipperData = ref<string[] | number[]>([]) const flipperData = ref<string[] | number[]>([])