[Mint-UI] mt-swipe cannot be displayed at all, even according to the examples in the official Demo.

use the latest version of Vue 2.5 + Mint-UI and use mt-swipe to do a top picture rotation. But it doesn"t show anything.
Code:
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("-sharpapp")

Home.vue

<template>
   <div>
       

Start here

<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>

end here

</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>

output result:

Nov.02,2021

is the height of mt-swipe is not defined, which causes Height to default to 0 and add


you also need to add a height to the mt-swipe container

.
Menu