mirror of
https://gitee.com/dromara/go-view.git
synced 2025-04-06 03:58:04 +08:00
feat: 翻牌数字增加内阴影边框属性及配置,默认为 0
This commit is contained in:
parent
606cb753c4
commit
c508aaa400
@ -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 {
|
||||||
|
@ -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 {
|
||||||
|
@ -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"
|
||||||
|
@ -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[]>([])
|
||||||
|
Loading…
x
Reference in New Issue
Block a user