Dialog

弹出式提示框，有多种交互形式。Demo

引入

import { Dialog } from 'vue-pmui';
Vue.use(Dialog);

例子

alert

this.$alert('message');

confirm

this.$confirm('success')
  .then(() => {
    // confirm
  })
  .catch(() => {
    // cancel
  });

prompt

this.$prompt('success')
  .then((inputValue) => {
    // confirm
    console.log(inputValue);
  })
  .catch(() => {
    // cancel
  });

自定义

this.$dialog({
  title: '我是标题',
  content: '我是内容',
  showInput: true,
  inputPlaceholder: '输入些什么吧',
  confirm: (val) => {
    console.log(val ? `点击了确认,输入了${val}` : 'confirm');
  },
  cancel: () => console.log('点击了取消')
});

作为组件使用

<!-- button -->
<pm-button @click="show"> 唤起dialog </pm-button>
<!-- dialog -->
<pm-dialog ref="dialog"
          :showClose="false">
  <template slot="header">
    <h1>Header Slot</h1>
  </template>
  <template>
    <h2>Default Slot</h2>
  </template>
  <template slot="footer">
    <div style="width: 100%;text-align: center">
      <h3>Footer Slot</h3>
      <a @click="hide">Click me to hide</a>
    </div>
  </template>
</pm-dialog>

export default {
  methods: {
    show() {
      this.$refs.dialog.show();
    },
    hide() {
      this.$refs.dialog.hide();
    }
  }
};

Props

Slots