快速入门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处*/ 。
对比 · 注意:
- 部分引用的方法,需要引入所需组件(如 ./test/actionSheet.vue组件),并定义(如
<actionSheet>
);- 全引用不需要再重复引入所需组件,也不需要定义(如
<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>
四、附文件 · 目录层级图
-
本案例组件的Git官网地址
最后,希望此案例能给你带来一定的启发。祝2019程序开发一切顺利!
以上就是关于“ js - 让 git 上 Mint-UI 的例子跑起来 - 方法大全 ” 的全部内容。