vue中引入mint-ui

 

  • 首先mint-ui是什么,他是由饿了么前端团队推出,基于 Vue.js 的移动端组件库。
  • 其次为什么使用,他为开发提供了很多组件,很多效果直接用就能做出友好的界面。
  • 最后怎么用,下面是两个例子:

例子1:

1.先建立一个vue项目

vue init webpack vue-mint

2.进入新建的项目,引入mint-ui

npm i mint-ui -s

3.(全局)在main.js文件中加入

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

4.用下面代码替换APP.vue中的代码

<template>
  <div id="app">
    <mt-button @click.native="handleClick">按钮</mt-button>
  </div>
</template>
<script>
export default {
  methods: {
    handleClick: function () {
      this.$toast('Hello world!')
    }
  }
}
</script>

例子2:

前三步一样,第四步替换的代码不一样,替换如下代码即可

<template>
  <div id="dan">
    <h1>Yin-Hongwei</h1>
    <mt-button type="danger" @click="sheetVisible = true">
      选择操作
    </mt-button>
    <mt-actionsheet :actions="actions" v-model="sheetVisible"></mt-actionsheet>
  </div>
</template>

<script>
import { Toast, MessageBox } from 'mint-ui'
export default {
  name: 'dan',
  data: function () {
    return {
      sheetVisible: false,
      // 菜单项数组
      actions: [{
        name: '展示 Toast',
        method: this.showToast
      }, {
        name: '展示 Message Box',
        method: this.showMsgbox
      }]
    }
  },
  methods: {
    showToast: function () {
      Toast({
        message: '提示',
        duration: 5000
      })
    },
    showMsgbox: function () {
      MessageBox({
        title: '提示',
        message: '确定执行此操作?',
        showCancelButton: true
      })
    }
  }
}
</script>

这样就能开始简单使用 mint-ui 了。

  • 学会这个也可以很快的去入手其他的组件。有些比较特殊,比如muse-ui,要用到它自带的图标,在index.html引入两个文件
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

 

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭