UNPKG

lnn-droplet-ui

Version:
116 lines (107 loc) 3.07 kB
## demo ```html <template> <div class="wx-demo"> <wx-button class="button" @wxClick="dialogVisible = true">dialog1</wx-button> <wx-button class="button" @wxClick="dialog2Visible = true">dialog2</wx-button> <wx-dialog :visible="dialogVisible" :useDefaultFooter="false"> <div slot="dialog-body" class="dialog-body"> <text class="dialog-text1">咨询服务热线</text> <text class="dialog-text2">400-400-680</text> <text class="dialog-text3">服务时间: 9:00-18:00(法定节假日除外)</text> </div> <div slot="dialog-footer" class="dialog-footer"> <text class="dialog-footer-btn btn-cancel" @click="dialogVisible=false">取消</text> <text class="dialog-footer-btn btn-consult" @click="handleConfirmConsult">致电客服</text> </div> </wx-dialog> <wx-dialog :visible="dialog2Visible" @confirm="dialog2Visible = false" @cancel="dialog2Visible = false"> <div slot="dialog-body" class="dialog-body"> <text class="dialog-text1">咨询服务热线</text> <text class="dialog-text2">400-400-680</text> <text class="dialog-text3">服务时间: 9:00-18:00(法定节假日除外)</text> </div> </wx-dialog> </div> </template> <style scoped> .button { margin-top: 100px; } /*dialog*/ .dialog-body { height: 248px; flex-direction: column; align-items: center; justify-content: center; } .dialog-text1 { font-size: 34px; color: #333; line-height: 56px; } .dialog-text2 { font-size: 40px; color: #333; line-height: 56px; } .dialog-text3 { font-size: 24px; color: #333; line-height: 56px; } .dialog-footer { flex-direction: row; border-top-style: solid; border-top-width: 1px; border-top-color: #dcdcdc; height: 80px; } .dialog-footer-btn { flex: 1; align-items: center; text-align: center; height: 80px; line-height: 80px; } .btn-cancel { font-size: 32px; color: #969696; } .btn-consult { border-left-style: solid; border-left-width: 1px; border-left-color: #DCDCDC; background-color: #ff5900; font-size: 32px; color: #fff; } /*dialog*/ </style> <script> import { WxDialog, WxButton } from '../../index'; const modal = weex.requireModule('modal'); export default { components: { WxDialog, WxButton }, data () { return { dialogVisible: false, dialog2Visible: false, } }, created () { }, methods: { handleConfirmConsult () { this.dialogVisible = false; } } } </script> ```