[Mint-UI] mt-swipe根本显示不出来,按照官方Demo中的例子都无法显示。

使用Vue 2.5 + Mint-UI最新版,使用mt-swipe做一个顶部图片轮播。可是啥也显示不出来。
代码:
main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import router from './router'

Vue.use(VueRouter)

import Mint from 'mint-ui';
import 'mint-ui/lib/style.css';
Vue.use(Mint);

Vue.config.productionTip = false

new Vue({
    router: router,
    render: h => h(App)
}).$mount('#app')

Home.vue

<template>
   <div>
       <p>Start here</p>
       <mt-swipe :auto="4000">
           <mt-swipe-item>
               <div class="swipe_div">这是一段话</div>
           </mt-swipe-item>
           <mt-swipe-item>
               <div class="swipe_div">这是第二段话</div>
           </mt-swipe-item>
           <mt-swipe-item>
               <div class="swipe_div">这是第三段话</div>
           </mt-swipe-item>
       </mt-swipe>
       <p>end here</p>
   </div>
</template>

<script>
    export default {
        name: "Home",
    };
</script>

<style scoped>
    .swipe_div {
        color: red;
        background-color: cadetblue;
        width: 400px;
        height: 200px;
    }
    img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
</style>

输出结果:
图片描述

阅读 6k
2 个回答

mt-swipe的高度没有定义,导致Height默认为0 加上就好了

还需要给mt-swipe容器加上高度
图片描述

图片描述

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题