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

淩亂°似流年 2024-02-19 12:34 51阅读 0赞

**主要操作技能：**

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

![70][]

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

![70 1][]

下载解压这个mint-ui-master

![70 2][]

找到action-sheet.vue文件

![70 3][]

2>使用这个Action-Sheet组件

**编写代码：**

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

Admin.vue

<template>
    	<div id="admin">
    		
    
    		<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>

**效果：**

![70 4][]

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

<template>
    	<div id="admin">
    		
    
    		<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>

效果:

![70 5][]

[70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/8226fe3a552643b4965c11ba012b6d1b.png
[70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/27e506a0b0a54b0999f1b1a7958b813a.png
[70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/de60fbd62cf449e0922d618f5ece601d.png
[70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/491b320a232a41f89c8da82f60a6d71a.png
[70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/44ff3ec5a72b4f0794e2f6d640811b07.png
[70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/44d0918e060e4a7d9922e01022d5c850.png