fix: antd-vue 3 slider组件设置行内style无效

This commit is contained in:
pipipi-pikachu 2021-11-26 21:26:08 +08:00
parent 54dfccd643
commit f2a2a7c9ac
3 changed files with 17 additions and 8 deletions

View File

@ -58,11 +58,11 @@
<div class="row" v-if="gradient.type === 'linear'"> <div class="row" v-if="gradient.type === 'linear'">
<div style="flex: 2;">渐变角度</div> <div style="flex: 2;">渐变角度</div>
<Slider <Slider
class="slider"
:min="0" :min="0"
:max="360" :max="360"
:step="15" :step="15"
:value="gradient.rotate" :value="gradient.rotate"
style="flex: 3;"
@change="value => updateGradient({ rotate: value })" @change="value => updateGradient({ rotate: value })"
/> />
</div> </div>
@ -333,4 +333,7 @@ export default defineComponent({
height: 3px; height: 3px;
margin-top: 1px; margin-top: 1px;
} }
.slider {
flex: 3;
}
</style> </style>

View File

@ -83,11 +83,11 @@
<div class="row" v-if="background.gradientType === 'linear'"> <div class="row" v-if="background.gradientType === 'linear'">
<div style="flex: 2;">渐变角度</div> <div style="flex: 2;">渐变角度</div>
<Slider <Slider
class="slider"
:min="0" :min="0"
:max="360" :max="360"
:step="15" :step="15"
:value="background.gradientRotate" :value="background.gradientRotate"
style="flex: 3;"
@change="value => updateBackground({ gradientRotate: value })" @change="value => updateBackground({ gradientRotate: value })"
/> />
</div> </div>
@ -459,4 +459,7 @@ export default defineComponent({
margin-top: 5px; margin-top: 5px;
} }
} }
.slider {
flex: 3;
}
</style> </style>

View File

@ -10,34 +10,34 @@
<div class="row"> <div class="row">
<div style="flex: 2;">水平阴影</div> <div style="flex: 2;">水平阴影</div>
<Slider <Slider
class="slider"
:min="0" :min="0"
:max="10" :max="10"
:step="1" :step="1"
:value="shadow.h" :value="shadow.h"
@change="value => updateShadow({ h: value })" @change="value => updateShadow({ h: value })"
style="flex: 3;"
/> />
</div> </div>
<div class="row"> <div class="row">
<div style="flex: 2;">垂直阴影</div> <div style="flex: 2;">垂直阴影</div>
<Slider <Slider
class="slider"
:min="0" :min="0"
:max="10" :max="10"
:step="1" :step="1"
:value="shadow.v" :value="shadow.v"
@change="value => updateShadow({ v: value })" @change="value => updateShadow({ v: value })"
style="flex: 3;"
/> />
</div> </div>
<div class="row"> <div class="row">
<div style="flex: 2;">模糊距离</div> <div style="flex: 2;">模糊距离</div>
<Slider <Slider
class="slider"
:min="1" :min="1"
:max="20" :max="20"
:step="1" :step="1"
:value="shadow.blur" :value="shadow.blur"
@change="value => updateShadow({ blur: value })" @change="value => updateShadow({ blur: value })"
style="flex: 3;"
/> />
</div> </div>
<div class="row"> <div class="row">
@ -124,4 +124,7 @@ export default defineComponent({
.switch-wrapper { .switch-wrapper {
text-align: right; text-align: right;
} }
.slider {
flex: 3;
}
</style> </style>