版权声明:本文为博主原创文章,转载务必注明出处,http://blog.csdn.net/michael_ouyang。 https://blog.csdn.net/michael_ouyang/article/details/77556391
action sheet
操作表,从屏幕下方移入。
Import
按需引入:
import { Actionsheet } from 'mint-ui';
Vue.component(Actionsheet.name, Actionsheet);
全局导入:全局导入后不用再导入
importMint from'mint-ui'
import'mint-ui/lib/style.css'
Vue.use(Mint);
API
![](https://img-blog.csdn.net/20170825095618528?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbWljaGFlbF9vdXlhbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
示例:
src/main.js
import Vue from 'vue'
import App from './App'
import router from './router'
// 引入mint-ui
import Mint from 'mint-ui';
import 'mint-ui/lib/style.css'
Vue.use(Mint);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
xxx.vue:
<template>
<div class="hello">
<h1 class="page-title">Action Sheet</h1>
<div class="page-actionsheet-wrapper">
<button class="mint-button mint-button--default mint-button--large" @click="actionSheet">
<label class="mint-button-text">点击上拉 action sheet</label>
</button>
</div>
<mt-actionsheet
:actions= "data"
v-model="sheetVisible">
</mt-actionsheet>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
// action sheet 选项内容
data: [{
name: '拍照',
method : this.getCamera // 调用methods中的函数
}, {
name: '从相册中选择',
method : this.getLibrary // 调用methods中的函数
}],
// action sheet 默认不显示,为false。操作sheetVisible可以控制显示与隐藏
sheetVisible: false
}
},
methods: {
actionSheet: function(){
// 打开action sheet
this.sheetVisible = true;
},
getCamera: function(){
console.log("打开照相机")
},
getLibrary: function(){
console.log("打开相册")
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
show:
点击“点击上拉 action sheet”按钮,显示出来
点击“拍照”,执行了
getCamera函数