mint-actionsheet is an action sheet component for vue.js
First, install mint-actionsheet from npm:
$ npm install mint-actionsheetImport it:
require ('mint-actionsheet/lib/index.css');
// ES6 mudule
import Actionsheet from 'mint-actionsheet';
// CommonJS
const Actionsheet = require('mint-actionsheet').default;Register component:
Vue.component('actionsheet', Actionsheet);actions is an array of objects. Each object has two keys: name and method. name is the text showing on the sheet, and method(optional) is the callback when clicked.
Bind v-model with one of your vue instance variables. Toggle it to switch on/off the action sheet.
<mt-actionsheet
:actions="actions"
v-model="sheetVisible">
</mt-actionsheet>| option | description | type | acceptable values | default |
|---|---|---|---|---|
| actions | array of actions | Array | ||
| cancelText | text of the cancel button. If this is an empty string, no cancel button will show | String | '取消' | |
| closeOnClickModal | if the action sheet turns off when the modal is clicked | Boolean | true |
MIT