这次给大家带来vue.js如何使用mint-ui轮播组件,vue.js使用mint-ui轮播组件的注意事项有哪些,下面就是实战案例,一起来看一下。
初始化vue项目
1 2 | npm install -g vue-cli vue init webpack demo # 中间会让你选npm yarn 等来安装依赖,我选的是yarn,因为它快些 |
安装mint-ui
mint-ui装好了,还要配置一下babel,方法跟着mint-ui的官方文档来配置就可以了
下面是我配置好的 .babelrc 文件,启动的时候会报跟es2015相关的错,装一下 babel-preset-es2015 就好了
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | { "presets" : [ [ "env" , { "modules" : false, "targets" : { "browsers" : [ "> 1%" , "last 2 versions" , "not ie <= 8" ] } }], "stage-2" , [ "es2015" , { "modules" : false }] ], "plugins" : [[ "component" , [ { "libraryName" : "mint-ui" , "style" : true } ]], "transform-vue-jsx" , "transform-runtime" ], "env" : { "test" : { "presets" : [ "env" , "stage-2" , "es2015" ], "plugins" : [ "transform-vue-jsx" , "transform-es2015-modules-commonjs" , "dynamic-import-node" ] } } } |
集成
打开创建的vue项目demo,在src里找到 components/HelloWorld.vue 文件,然后将内容换成下面内容
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <template> <p> <mt-swipe :auto= "2000" > <mt-swipe-item v- for = "item in items" :key= "item.id" > <a :href= "item.href" rel= "external nofollow" > <img :src= "item.url" class = "img" /> <span class = "desc" ></span> </a> </mt-swipe-item> </mt-swipe> </p> </template> <script> import {Swipe, SwipeItem} from 'mint-ui' import 'mint-ui/lib/style.css' export default { components: { 'mt-swipe' : Swipe, 'mt-swipe-item' : SwipeItem }, data () { return { items: [{ title: '你的名字' , href: 'http://google.com' , url: 'http://localhost:8080/static/img1.png' }, { title: '我的名字' , href: 'http://baidu.com' , url: 'http://localhost:8080/static/img2.png' }] } } } </script> <style scoped> img { width: 100%; } .mint-swipe { height: 218px; } .desc { font-weight: 600; opacity: .9; padding: 5px; height: 20px; line-height: 20px; width: 100%; color: #fff; background-color: gray; position: absolute; bottom: 0; } </style> |