VxDialog 弹框

弹框

引用

import VxDialog from '@/components/vx-dialog';

// 页面内局部引入
export default {
  components: {
    [VxDialog.name]: VxDialog,
  },
};
// 全局引入
Vue.component(VxDialog.name, VxDialog);

使用指南

<ui-button class="primary-btn" @click="openContact">常用联系人</ui-button>
<vx-dialog :message="dialogMsg" v-model="isShowMsgDia">
  <ui-button slot="footer" class="primary-btn" @click="isShowMsgDia = false">知道了</ui-button>
</vx-dialog>

data(){
  return {
    dialogMsg: '弹框文案', // 弹框文案内容
    isShowMsgDia: false, // 弹框显示隐藏
  }
},

VxDialog Props

属性	说明	类型	默认值	备注
`v-mode`	显示/隐藏弹框	`Boolean`	`false`	-
`loading`	遮罩层	`Boolean`	`false`	-
`title`	弹框标题	`String`	-	-
`message`	弹框文案	`String`	`""`	-
`confirm-text`	确认按钮文案	`String`	`确认`	-
`cancel-text`	取消按钮文案	`String`	`取消`	-
`icon`	图标	`String`	`warning`	-
`close-on-click-modal`	点击遮罩关闭弹框	`Boolean`	`false`	-
`auto-hide`	是否自动隐藏	`Boolean`	`false`	当是`true`时按钮区域将隐藏
`time`	倒计时	`Number`	`5`	仅在`auto-hide`为 true 时启作用
`show-close`	是否展示关闭按钮	`Boolean`	`true`	false 时右上角按钮隐藏
`close-on-press-escape`	是否可以通过按下 ESC 关闭 Dialog	`Boolean`	`true`	false 时不可关闭

VxDialog Slots

default

内容默认插槽

footer

按钮操作区的内容

VxDialog Events

@confirm()

点击确认按钮事件

@cancel()

点击取消按钮事件

Current Tags

0.0.6 ... latest (3 years ago)

1 Versions

0.0.6 ... 3 years ago