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 +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
vue单元格多列合并的实现
Nov 26 Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
vue使用require.context实现动态注册路由
Dec 25 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
vue-cropper组件实现图片切割上传
May 27 Vue.js
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
vue如何清除浏览器历史栈
May 25 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 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
PHP静态类
2006/11/25 PHP
关于php unset对json_encode的影响详解
2018/11/14 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
通过javascript设置css属性的代码
2009/12/28 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
2013/06/19 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
详解vue中axios的封装
2018/07/18 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
解决谷歌搜索技术文章时打不开网页问题的python脚本
2013/02/10 Python
跟老齐学Python之关于类的初步认识
2014/10/11 Python
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
详解Python with/as使用说明
2018/12/13 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
Python构建图像分类识别器的方法
2019/01/12 Python
什么是python的列表推导式
2020/05/26 Python
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
护理专科毕业生自荐书范文
2014/02/19 职场文书
户外活动总结范文
2014/04/30 职场文书
党的群众路线学习材料
2014/05/16 职场文书
销售人员求职信
2014/07/22 职场文书
合作协议书格式
2014/08/19 职场文书
全民创业工作总结
2015/08/13 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
学习党史心得体会2016
2016/01/23 职场文书