Vue.js框架--Ui框架的Mint UI action-sheet.vue（二十二）

主要操作技能：

    1>下载mint ui 的源码，拷贝action-sheet.vue

 从Demo 找到这个Action Sheet 运行效果

下载解压这个mint-ui-master

找到action-sheet.vue文件

 

    2>使用这个Action-Sheet组件 

 

编写代码：

 拷贝action-sheet.vue到工程中，修改名称为ActionSheet.vue

Admin.vue

<template>
	<div id="admin">
		<!--<h1>{{msg}}</h1>-->

		<v-actionsheet></v-actionsheet><br /><br />

	</div>
</template>

<script>
	import ActionSheet from './ActionSheet.vue'
	export default {
		name: 'admin',
		data() {
			return {
				msg: 'Admin组件'
			}
		},
		methods: {
		
		},
		components: {
			'v-actionsheet': ActionSheet
		},
		mounted() {
		
		}
	}
</script>

 

效果：

 

在Admin.vue中添加一个“选择用户头像”

<template>
	<div id="admin">
		<!--<h1>{{msg}}</h1>-->

		<v-actionsheet></v-actionsheet><br /><br />

		<mt-button @click.native="flag = true" size="large">选择用户头像</mt-button>

		<mt-actionsheet :actions="actions" v-model="flag"></mt-actionsheet>
	</div>
</template>

<script>
	import ActionSheet from './ActionSheet.vue'
	export default {
		name: 'admin',
		data() {
			return {
				msg: 'Admin组件',
				flag: false, //标示
				actions: [] //数组
			}
		},
		methods: {
			takePhoto() {
				alert('执行拍照!')
			},
			openAlbum() {
				alert('打开相册选择!')
			}
		},
		components: {
			'v-actionsheet': ActionSheet
		},
		mounted() {
			this.actions = [{
				name: '拍照',
				method: this.takePhoto
			}, {
				name: '从相册中选择',
				method: this.openAlbum
			}];

		}
	}
</script>

效果: