vue.js整合mint-ui里的轮播图实例代码


Posted in Javascript onDecember 27, 2017

初始化vue项目

npm install -g vue-cli
vue init webpack demo # 中间会让你选npm yarn 等来安装依赖,我选的是yarn,因为它快些

安装mint-ui

yarn add mint-ui

mint-ui装好了,还要配置一下babel,方法跟着mint-ui的官方文档来配置就可以了

下面是我配置好的 .babelrc 文件,启动的时候会报跟es2015相关的错,装一下 babel-preset-es2015 就好了

{
 "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 文件,然后将内容换成下面内容

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

找两张图片,名字分别是 img1.png , img2.png , 放在demo项目的static里,然后启动项目

npm run dev

打开浏览器:http://localhost:8080/

vue.js整合mint-ui里的轮播图实例代码 

注意

1.如果发现文字都是居中的

可以找到文件 App.vue 把里面的居中css代码去掉就好了

1.如果页面有内边距

设置一下 body 的样式 margin: 0 auto;

1.页面里用的时候,必须要给类样式一个高度,要不然图片不出来 .mint-swipe { height: 218px; }

总结

以上所述是小编给大家介绍的vue.js整合mint-ui里的轮播图实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
JavaScript对象和字串之间的转换实例探讨
Apr 21 Javascript
jquery和javascript的区别(常用方法比较)
Jul 04 Javascript
SeaJS 与 RequireJS 的差异对比
Dec 08 Javascript
jquery+ajax验证不通过也提交表单问题处理
Dec 12 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 Javascript
详解angular2实现ng2-router 路由和嵌套路由
Mar 24 Javascript
微信小程序 检查接口状态实例详解
Jun 23 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 Javascript
vue项目移动端实现ip输入框问题
Mar 19 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 Javascript
JavaScript利用html5新方法操作元素类名详解
Nov 27 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 #Javascript
Vue 过滤器filters及基本用法
Dec 26 #Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 #Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 #Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 #Javascript
Webpack实战加载SVG的方法
Dec 26 #Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 #Javascript
You might like
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
10个简化PHP开发的工具
2014/12/25 PHP
PHP使用xpath解析XML的方法详解
2017/05/20 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
2011/04/12 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
2014/12/16 Javascript
浅谈JavaScript Date日期和时间对象
2014/12/29 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
Python线程中对join方法的运用的教程
2015/04/09 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
Python递归调用实现数字累加的代码
2020/02/25 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
降低python版本的操作方法
2020/09/11 Python
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
一些PHP的面试题
2015/05/06 面试题
《池塘边的叫声》教学反思
2014/04/12 职场文书
环保志愿者活动总结
2014/06/27 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
军人离婚协议书样本
2014/10/21 职场文书
SpringBoot详解自定义Stater的应用
2022/07/15 Java/Android