weex-flymeui

# fm-dialog > Flyme 弹框组件 !> 注意：组件仅为未完成的 beta 版本，使用方法有可能会变更。 ## 规则 - 支持 alert / confirm 弹框 - 支持 <br/> <img src="http://image.res.meizu.com/image/flyme-icon/dd5cd5bebc414beb8cf385b528131fb2z" width=400 style="box-shadow: 0 5px 10px 0 #d9dce3; border-radius: 4px;" /> ## 使用方法 ```html <template> <div class="mzui-demo"> <fm-button class="btn" @buttonClicked="click1">确认弹框</fm-button> <fm-button class="btn" @buttonClicked="click2">警告弹框</fm-button>  <fm-dialog :show="confirmShow" title="退出浏览器并清空历史记录" content="退出浏览器并清空历史记录弹框内容区域此处展示描述" @fmDialogBtnClicked="btnClick" @fmDialogDisappeared="dialogOverlayClick" :can-auto-close="true" />  <fm-dialog :show="alertShow" title="退出浏览器并清空历史记录" content="退出浏览器并清空历史记录弹框内容区域此处展示描述" @fmDialogBtnClicked="btnClick" @fmDialogDisappeared="dialogOverlayClick" :can-auto-close="true" />  <fm-dialog :show="inputShow" title="弹出输入" content-type="input" placeholder="提示文本" @fmDialogBtnClicked="inputClick" @fmDialogDisappeared="dialogOverlayClick" :can-auto-close="true" :inputDefaultText="inputText">  <fm-dialog :show="selectShow" title="选择语言" content-type="select" @fmDialogDisappeared="dialogOverlayClick" @fmDialogSingleSelected="selectClick" :can-auto-close="true" :selectData="list" /> </div> </template> <script> import { FmDialog, confirm, alert } from 'weex-flymeui'; const modal = weex.requireModule('modal'); export default { components: { FmDialog }, data: () => ({ confirmShow: false, alertShow: false, inputShow: false, selectShow: false, list: [{ title: '简体中文' }, { title: '英文' }, { title: '西班牙语' }] }), methods: { click1 () { this.confirmShow = true; }, click2 () { this.alertShow = true; }, click3 () { this.inputShow = true; }, click4 () { this.selectShow = true; }, btnClick (btn) { if (btn.type === 'cancel') { modal.toast({ message: '取消' }); } else if (btn.type === 'confirm') { modal.toast({ message: '确定' }); } else { modal.toast({ message: btn.text }); } this.show = false; }, selectClick (e) { modal.toast({ message: '选择了: ' + e.selectList.map(item => item.title).toString() }); this.selectShow = false; }, inputClick (e) { if (e.type === 'cancel') { modal.toast({ message: '取消' }); } else if (e.type === 'confirm') { modal.toast({ message: '输入的是: ' + e.inputValue }); } else { modal.toast({ message: e.text }); } this.inputShow = false; }, dialogOverlayClick () { this.confirmShow = false; this.alertShow = false; this.inputShow = false; this.selectShow = false; } } }; </script> ``` 更多详细代码例子可以参考 [demo](https://github.com/FlymeApps/weex-flymeui/blob/master/example/component/dialog/index.vue) ## 可配置参数 | Prop | Type | Required | Default | Description | |-------------|------------|--------|-----|-----| | show | `Boolean` |`Y`| `false` | 弹出框是否显示 | | type | `String` |`N`| `confirm` | 弹框类型：`confirm 确认弹框`、`alert 确认弹框` | | content-type | `String` |`N`| `default` | 内容类型：`default 文字弹框` `input 输入弹框`、`select 选择弹框` | | title | `String` |`Y`| `''` | 标题 | | content | `String` |`Y`| `''` | 内容 | | cancel-text | `String` |`N`| `取消` | 取消按钮文案 | | confirm-text | `String` |`N`| `确认` | 确认按钮文案 | | cancel-color | `String` |`N`| `#198DED` | 取消按钮颜色 | | confirm-color | `String` |`N`| `#198DED` | 确认按钮颜色 | | hasAnimation | `Boolean` |`N`| `true` | 是否需要过渡动画 | | timingFunction | `Array` |`N`| `['ease-out', 'ease-out']` | 动画过渡函数 | | duration | `String` |`N`| `#198DED` | 确认按钮颜色 | | overlay-opacity | `Number` |`N`| `0.5` | 蒙层的透明度，在 `Creator` 中不可用 | | top | `Number` |`N`| `400` | 框体距离屏幕上方的距离，在 `Creator`中不生效 | | btnDirection | `String` |`N`| `row` | 按钮排列方式：`row 横向排列`、`column 纵向排列` | | btns | `Array` |`N`| `[]` | 自定义按钮，可支持多个按钮 | | btns[{`text`}] | `String` |`Y`| `''` | 按钮文案 | | btns[{`color`}] | `String` |`N`| `#198DED` | 按钮颜色 | | btns[{`type`}] | `String` |`N`| `-` | 按钮类型 | | btns[{`msg`}] | `AnyType` |`N`| `-` | 附带信息，会在按钮点击回调中返回 | ## 输入弹框配置当 `content-type` 为 `input` 时有效。 | Prop | Type | Required | Default | Description | |-------------|------------|--------|-----|-----| | placeholder | `String` |`N`| `''` | 输入框提示文案 | | input-default-text | `String` |`N`| `''` | 输入框默认内容 | ## 选择弹框配置当 `content-type` 为 `select` 时有效。 | Prop | Type | Required | Default | Description | |-------------|------------|--------|-----|-----| | select-data | `String` |`N`| `''` | 输入项数据 | | select-model | `String` |`N`| `'single'` | 选择模式：`single 单选` 和 `multiple 多选` | | select-limit | `String` |`N`| `0` | 多选模式下的选中限制数量，0 为不限制 | ## Slot `fm-dialog` 提供了多个插槽来供使用者自定义样式。 1. `<slot name"title"></slot>` : 标题插槽 2. `<slot name"content"></slot>` : 内容插槽 3. `<slot name"btn-group"></slot>` : 按钮插槽 *合理使用插槽可以组合多种弹框：* <img src="http://image.res.meizu.com/image/flyme-icon/a1110146798f4828a395348f2b43d29bz" width=400 style="box-shadow: 0 5px 10px 0 #d9dce3; border-radius: 4px;" /> <br/> <img src="http://image.res.meizu.com/image/flyme-icon/c587190e399e4b53a2288e96212f5caaz" width=400 style="box-shadow: 0 5px 10px 0 #d9dce3; border-radius: 4px;" /> <br/> *例子:* ```vue <fm-dialog :show="checkListShow" title="选择语言" @fmDialogBtnClicked="checkListClick" @fmDialogDisappeared="checkListOverlayClick" :can-auto-close="true" :overlayOpacity="0.1"> <fm-check-list-group slot="content" @fmCheckListGroupChecked="groupChecked"> <fm-checkbox>简体中文</fm-checkbox> <fm-checkbox>繁体中文</fm-checkbox> <fm-checkbox>英文</fm-checkbox> </fm-check-list-group> </fm-dialog> <fm-dialog :show="inputShow" title="弹出输入" @fmDialogBtnClicked="inputClick" @fmDialogDisappeared="inputOverlayClick" :can-auto-close="true"> <fm-input :value="inputText" slot="content" type="text" placeholder="输入点什么.." :autofocus="true" @input="inputing" /> </fm-dialog> ``` ## 事件回调 - `fmDialogBtnClicked` 按钮被点击时触发 - `event.type` 按钮类型 - `event.selectList` 选中的值 - `event.inputValue` 输入的值 - `fmDialogDisappeared` 按钮消失时触发，通常是蒙层被点击后触发弹框消失。请监听此事件并将 `show` 属性重置 - `fmDialogSingleSelected` 单选弹框下选中值之后触发 - `event.selectList` 选中的值 ## refs 在 `select` 和 `input` 类型下的弹框可以通过 `$refs` 来获取框内的子组件，以便进行方法调用。对应关系如下: - `select 模式`: `selecEl` --- 对应 [fm-checkbox-list](/packages/fm-checkbox-list/) 组件 - `input 模式`: `inputEl` --- 对应 [fm-input](/packages/fm-input/) 组件