Просмотр исходного кода

feat: 商城轮播图装修组件增加高度配置

puhui999 9 месяцев назад
Родитель
Сommit
7213252e32

+ 3 - 0
src/components/DiyEditor/components/mobile/Carousel/config.ts

@@ -10,6 +10,8 @@ export interface CarouselProperty {
   autoplay: boolean
   // 播放间隔
   interval: number
+  // 轮播高度
+  height: number
   // 轮播内容
   items: CarouselItemProperty[]
   // 组件样式
@@ -37,6 +39,7 @@ export const component = {
     indicator: 'dot',
     autoplay: false,
     interval: 3,
+    height: 174,
     items: [
       { type: 'img', imgUrl: 'https://static.iocoder.cn/mall/banner-01.jpg', videoUrl: '' },
       { type: 'img', imgUrl: 'https://static.iocoder.cn/mall/banner-02.jpg', videoUrl: '' }

+ 1 - 1
src/components/DiyEditor/components/mobile/Carousel/index.vue

@@ -8,7 +8,7 @@
   </div>
   <div v-else class="relative">
     <el-carousel
-      height="174px"
+      :height="property.height + 'px'"
       :type="property.type === 'card' ? 'card' : ''"
       :autoplay="property.autoplay"
       :interval="property.interval * 1000"

+ 3 - 0
src/components/DiyEditor/components/mobile/Carousel/property.vue

@@ -16,6 +16,9 @@
             </el-tooltip>
           </el-radio-group>
         </el-form-item>
+        <el-form-item label="高度" prop="height">
+          <el-input-number class="!w-50% mr-10px" controls-position="right" v-model="formData.height" /> px
+        </el-form-item>
         <el-form-item label="指示器" prop="indicator">
           <el-radio-group v-model="formData.indicator">
             <el-radio value="dot">小圆点</el-radio>