vue中引入mint-ui

#首先mint-ui是什么,他是由饿了么前端团队推出,基于 Vue.js 的移动端组件库。

#其次为什么使用,他为开发提供了很多组件,很多效果直接用就能做出友好的界面。

#最后怎么用,下面是两个例子:

#例子1:

1.先建立一个vue项目

npm 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 了大笑

阅读更多
文章标签: mint ui 前端
个人分类: notes
想对作者说点什么? 我来说一句

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

不良信息举报

vue中引入mint-ui

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭