Vue Mint UI mt-swipe的使用方式


Posted in Vue.js onJune 05, 2022

Mint UI mt-swipe的使用

Mint UI的安装使用

1、安装 npm install mint-ui -S

-S表示 --save

2、在main.js中引入mint Ui的css 和 插件 (全局引用)

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

3、在main.js中引入mint Ui的css 和 插件 (按需引用,有的可能要按需引css)

import { Swipe, SwipeItem } from ‘mint-ui';
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

轮播图mt-swipe组件使用

<mt-swipe :auto="4000" @change="IMGChange" > 
//auto轮播时间  //轮播图切换时会触发 change 事件,参数为切入轮播图的索引  
//speed 动画持时(毫秒)  
  <mt-swipe-item v-for="item in bannerArr" :key="item.id">
     <img :src="item.img_url" alt="">
  </mt-swipe-item>
</mt-swipe>
IMGChange(index){  //参数为当前轮播图的索引 
	console.log(index)
}

Vue Mint UI mt-swipe的使用方式

使用mint-ui遇到的坑

1.按需引入:文档上写

将 .babelrc 修改为:

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

实际操作项目报错,应该改为:

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", 
      "transform-runtime",
      ["component", [
        {
          "libraryName": "mint-ui",
          "style": true
        }
    ]]
  ]
}

引入组件报错

Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/* 或写为
 * Vue.use(Button)
 * Vue.use(Cell)
 */

发现使用Vue.use(Button) 报错

解决方案:还是使用Vue.component(Button)

2.Header组件的返回问题

1.将router-link to置空;2.用@click正常处理 

Vue Mint UI mt-swipe的使用方式

3.cell的click不起作用

解决方法:

v-on:click.native="showSelect()"

原因:

Vue Mint UI mt-swipe的使用方式

4.mintUI中indicator报错

1、在main.js中引入mint-ui框架。我用的是按需引用。

import { Indicator } from 'mint-ui'

好了,已经引入了。但是当我发起请求时,显示indicator is not defined!呵呵……fuck脸。

百度也没有什么具体的因果。但是还好本人也用了mint-ui的日期模板。所以就瞎模仿……哈哈哈,上代码。

2、你得把这个东西绑定给vue,然后才能用!!!!

Vue.prototype.$Indicator = Indicator

3、然后加上官网的写法,变通一下。

this.$Indicator.open({
	text: 'Loading...',
	spinnerType: 'fading-circle'
});

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。


Tags in this post...

Vue.js 相关文章推荐
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
在Vue中使用mockjs代码实例
Nov 25 Vue.js
vue 通过base64实现图片下载功能
Dec 19 Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
Vue监视数据的原理详解
Feb 24 Vue.js
Vue的生命周期一起来看看
Feb 24 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
vue @ ~ 相对路径 路径别名设置方式
Jun 05 #Vue.js
vue css 相对路径导入问题级踩坑记录
Jun 05 #Vue.js
vue中data里面的数据相互使用方式
Jun 05 #Vue.js
Vue 打包后相对路径的引用问题
Jun 05 #Vue.js
vue实现在data里引入相对路径
Jun 05 #Vue.js
ant design vue的form表单取值方法
Jun 01 #Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 #Vue.js
You might like
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
PHP 七大优势分析
2009/06/23 PHP
php 生成静态页面的办法与实现代码详细版
2010/02/15 PHP
Yii+MYSQL锁表防止并发情况下重复数据的方法
2016/07/14 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
2016/06/01 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
js事件触发操作实例分析
2019/06/21 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
Python编程实现双链表,栈,队列及二叉树的方法示例
2017/11/01 Python
pycharm中成功运行图片的配置教程
2018/10/28 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
详解Anaconda 的安装教程
2020/09/23 Python
python实现双人五子棋(终端版)
2020/12/30 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
《在山的那边》教学反思
2014/02/23 职场文书
教师产假请假条范文
2014/04/10 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
干部个人考察材料
2014/12/24 职场文书
新闻发布会新闻稿
2015/07/17 职场文书
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python