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 相关文章推荐
js批量设置样式的三种方法不推荐使用with
Feb 25 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
Javascript之Date对象详解
Jun 07 Javascript
jQuery Pagination分页插件使用方法详解
Feb 28 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
vue轮播图插件vue-concise-slider的使用
Mar 13 Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
Aug 20 Javascript
使用JS location实现搜索框历史记录功能
Dec 23 Javascript
基于javascript的无缝滚动动画实现2
Aug 07 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
php计算一个文件大小的方法
2015/03/30 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
动态为事件添加js代码示例
2009/02/15 Javascript
面向对象的javascript(笔记)
2009/10/06 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
基于replaceChild制作简单的吞噬特效
2015/09/21 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
[04:48]DOTA2上海特锦赛小组赛第三日 TOP10精彩集锦
2016/02/28 DOTA
在MAC上搭建python数据分析开发环境
2016/01/26 Python
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
python logging日志模块的详解
2017/10/29 Python
python代码 输入数字使其反向输出的方法
2018/12/22 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
如何进行Linux分区优化
2016/09/13 面试题
汽车技术服务与营销专业在籍生自荐信
2013/09/28 职场文书
幼儿园开学家长寄语
2014/01/19 职场文书
双创工作实施方案
2014/03/26 职场文书
卫生标语大全
2014/06/21 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
2014年纠风工作总结
2014/12/08 职场文书
英文慰问信
2015/02/14 职场文书
springboot中的pom文件 project报错问题
2022/01/18 Java/Android
Nginx配置之禁止指定IP访问
2022/05/02 Servers