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 相关文章推荐
Firefox window.close()的使用注意事项
Apr 11 Javascript
json格式化/压缩工具 Chrome插件扩展版
May 25 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
Jan 23 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
Dec 15 Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 Javascript
JS显示表格内指定行html代码的方法
Mar 31 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
json格式数据的添加,删除及排序方法
Jan 21 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
bootstrap table表格插件之服务器端分页实例代码
Sep 12 Javascript
微信小程序wxs实现吸顶效果
Jan 08 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
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
限制文本框输入N个字符的js代码
2010/05/13 Javascript
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
jQuery同步提交示例代码
2015/12/12 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
Python中使用中文的方法
2011/02/19 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
Python 普通最小二乘法(OLS)进行多项式拟合的方法
2018/12/29 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
小程序canvas中文字设置居中锚点
2019/04/16 HTML / CSS
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
生产厂厂长岗位职责
2013/12/25 职场文书
总经理秘书工作职责
2013/12/26 职场文书
幼儿园中秋节活动方案2013
2014/01/29 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
绿色出行口号
2014/06/18 职场文书
北京英语导游词
2015/02/12 职场文书
项目负责人岗位职责
2015/02/15 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
南极大冒险观后感
2015/06/05 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js
Redis读写分离搭建的完整步骤
2021/09/14 Redis