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>

效果: