Vue学习22----Mint UI(手机端框架)的使用，实现Toast，ActionSheet等

基于Vue的Ui框架
饿了么公司基于vue开的的vue的Ui组件库
MintUi 基于vue 移动端的ui框架
官网：
http://mint-ui.github.io/#!/zh-cn
github上面下载源码
https://github.com/ElemeFE/mint-ui
找到example----pages----各种组件的例子

使用步骤：
1.找官网
http://mint-ui.github.io/#!/zh-cn
2.安装

npm install mint-ui -S         -S表示  --save

3.在main.js中，引入mint Ui的css 和插件

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

4.看文档直接使用。

下面我写了一个例子：
效果图：
Vue学习22----Mint UI(手机端框架)的使用，实现Toast，ActionSheet等
项目结构：

main.js 写各种配置
App.vue 入口文件
Home.vue 中写Toast
ActionSheet.vue 是底部滑入的组件
HomeContent.vue 中引用 ActionSheet.vue

代码：
main.js

import Vue from 'vue'
import App from './App.vue'
//引入 mint-ui
import Mint from 'mint-ui';
Vue.use(Mint);
import 'mint-ui/lib/style.css'
// 引入路由框架
import VueRouter from 'vue-router';
Vue.use(VueRouter);

import Home from './components/Home.vue';
import HomeContent from './components/HomeContent.vue';

const routes = [
  { path: '/home', component: Home },
  { path: '/homecontent', component: HomeContent },

  { path: '*', redirect: '/home' }   /*默认跳转路由*/
]

const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})


new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

App.vue

<template>
  <div id="app">
    <!--显示路由-->
    <router-view></router-view>
  </div>
</template>

<script>


  export default {
    name: 'app',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },



  }
</script>

<style lang="scss">


</style>

Home.vue

<template>
  <div>
    <div>{{msg}}</div>
    <br/>
    <mt-button class="button" @click="myToast()" type="default">弹出吐丝</mt-button>
    <br/>
    <br/>
    <mt-button class="button" @click="myNext()" type="primary">下一页</mt-button>

  </div>
</template>

<script>
  //引入
  import {Toast} from 'mint-ui';

  export default {
    data(){
      return{
      msg: 'home',
      }
    },

    methods: {
      myToast() {
        let instance = Toast('提示信息');
        setTimeout(() => {
          instance.close();
        }, 2000);
      },
      myNext() {
        this.$router.push({path: '/homecontent'})
      }
    }
  }
</script>

<style lang="scss" scoped>
  .button {
    width: 100%;
    height: 50px;

  }

</style>

ActionSheet.vue

<template>
  <div class="page-actionsheet">
    <h1 class="page-title">Action Sheet</h1>
    <div class="page-actionsheet-wrapper">
      <mt-button @click.native="sheetVisible = true" size="large">点击上拉 action sheet</mt-button>
    </div>
    <mt-actionsheet :actions="actions" v-model="sheetVisible"></mt-actionsheet>

  </div>
</template>

<style>

</style>

<script type="text/babel">
  export default {
    data() {
      return {
        sheetVisible: false,
        actions: [],

      };
    },

    methods: {
      openAlbum() {
        console.log('相册');
      },
      takePhoto() {
        console.log('拍照');
      },
    },

    mounted() {
      this.actions = [{
        name: '拍照',
        method: this.takePhoto
      }, {
        name: '从相册中选择',
        method: this.openAlbum
      }];

    }
  };
</script>

HomeContent.vue

<template>
  <div>
    <div>HomeContent</div>
    <IActionSheet></IActionSheet>
  </div>
    
</template>

<script>
  import IActionSheet from './ActionSheet.vue';
    export default {
      name: "HomeContent",
      //挂在组件
      components:{
        /*前面的组件名称不能和html标签一样,会出现冲突*/
        'IActionSheet':IActionSheet,

      }
    }
</script>

<style scoped>

</style>

源码下载：
vuedemo22
https://download.****.net/download/zhaihaohao1/11112020

Vue学习22----Mint UI(手机端框架)的使用，实现Toast，ActionSheet等

相关推荐