js - 让 git 上 Mint-UI 的例子跑起来 - 方法大全

版权声明：本文为博主原创文章，允许转载，但转载必须注明出处并附带首发链接 https://blog.csdn.net/qq_35393869/article/details/87275338

快速入门Mint-ui+项目开发，让Git 上 mint-ui 的例子跑起来！

授人以鱼不如授人以渔！
通过两种方法讲解一个案例，并以此作为组件的通用方法参考！

---

一、 注意：

• 我们以Mint-ui框架的JS Components 组件库内的Action sheet组件为例，查看官方文档
• 通过全引用、部分引用 （两种方式/方法），来讲解如何调用mint-ui组件进行常规vuejs项目的开发。

---

二、动画演示 · 先睹为快：

---

三、 案例讲解如下：

A. 方法一：部分引用 · 讲解

重要代码如下

<mt-button icon="more" slot="right" @click.native="sheetVisible = true"></mt-button>

<actionsheet :actions="actions" v-model="sheetVisible"></actionsheet>

// 其余重要代码部分，请参考方法二讲解内容:  /*注释1、2、3处*/ 。

对比 · 注意：

1. 部分引用的方法，需要引入所需组件（如 ./test/actionSheet.vue组件），并定义（如<actionSheet>）；
2. 全引用不需要再重复引入所需组件，也不需要定义（如<mt-actionsheet>）；

• 官方组件可从对应Git网站上获取或下载；

B. 方法二： 全引用 · 讲解

重要代码如下

<template>
  <mt-button icon="more" slot="right" @click.native="sheetVisible = true"></mt-button>
  <!--如下注意：因为有大小写冲突，所以将标签及其对应.vue文件名称的部分字母改为大写-->
  <!--<actionSheet :actions="actions" v-model="sheetVisible"></actionSheet>-->  <!--注释1处-->
  <mt-actionsheet
    :actions="actions"
    v-model="sheetVisible">
  </mt-actionsheet>
</template>
<script>
  /* import ActionSheet from './test/actionSheet';  */    /*注释2处*/
  export default {
    name: 'index',
   /* components: {
      'actionSheet': ActionSheet
    },*/     /*注释3处*/
    data () {
      return {
        sheetVisible: false,
        actions: []
      }
    },
    methods: {    // 2.方法及名称请自行修改，不再赘述
      takePhoto() {
        console.log('taking photo');
      },
      openAlbum() {
        console.log('opening album');
      },
    },

    mounted() {
      this.actions = [{
        name: '拍照',              // 1.已改为“登录”
        method: this.takePhoto    // 2.方法及名称请自行修改，不再赘述
      }, {
        name: '打开相册',          // 1.已改为“注册”
        method: this.openAlbum
      }];
    }
  }
</script>

四、附文件 · 目录层级图

• 官方2.X - 中文文档

• 本案例组件的Git官网地址

最后，希望此案例能给你带来一定的启发。祝2019程序开发一切顺利！

---

以上就是关于“ js - 让 git 上 Mint-UI 的例子跑起来 - 方法大全 ” 的全部内容。