mintui轮播图

mac2024-05-17  34

安装

npm i mint-ui --save

main.js引入(全局按需二选一)

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

按需

如果你只需要使用某个组件,可以仅引入这个组件,Mint UI 能够保证在代码打包时,与这个组件无关的文件不会出现在最终代码里。比如需要引入 Button 组件,则在 main.js 中:

import Button from 'mint-ui/lib/button'; import 'mint-ui/lib/button/style.css'; Vue.component(Button.name, Button);

在vue组件中

<template> <div class="swiper"> <mt-swipe class="images" :auto="2000"> <mt-swipe-item><img src=‘url’ alt='1' /></mt-swipe-item> <mt-swipe-item><img src=‘url’ alt='2' /></mt-swipe-item> <mt-swipe-item><img src=‘url’ alt='3' /></mt-swipe-item> </mt-swipe> </div> </template> <script> import {Swipe, SwipeItem} from 'mint-ui' export default { name: "Swiper", data() { return { arr: [], } }, mounted(){ }, methods: { } components: { "mt-swipe": Swipe, "me-swipe-item": SwipeItem } } </script> <style scoped lang="stylus" type="text/stylus"> .swiper .images height 2rem img width 100% </style>
最新回复(0)