Modal

对话框组件，demo

用法

<modal title="标题" msg="这是内容。。。" :show.sync="modal"></modal>

<!--自定义内容-->
<modal title="标题" :show.sync="modal">
  这里是内容区域，点击关闭按钮，或者遮盖层关闭
</modal>

<!--自定义按钮-->
<modal title="标题" :show.sync="modal">
  <span>这里是内容区域，点击关闭按钮，或者遮盖层关闭</span>
  <button slot="footer" text="确定" @click="sure"></button>
</modal>

API

Slots

alert

基于 modal 组件开发的，警告弹出框

<alert :title="alert.title" :type="alert.type" :show.sync="alert.show" :msg="alert.msg" ></alert>

{
  data () {
    return {
      alert: {
        show: false
      }
    }
  },
  methods: {
    showAlert (type) {
      this.alert = {
        title: '标题',
        msg: !type ? '这是内容' : type === 'info' ? '这是普通信息' : type === 'success' ? '成功啦！' : type === 'warning' ? '这是提醒！' : '出错啦！',
        show: true,
        type: type
      }
    }
  }
}

sure 事件

点击确定按钮后触发事件

confirm

确认对话框组件

<confirm :title="confirm.title" show-icon @sure="handlerSure" :show.sync="confirm.show" :msg="confirm.msg" ></confirm>

sure 事件

点击确定按钮后触发事件

cancel 事件

点击取消按钮后触发事件

prompt

输入提示框组件

<prompt :title="prompt.title" @sure="handlerSure" :show.sync="prompt.show" :msg="prompt.msg" ></prompt>

{
  data () {
    return {
      prompt: {
        show: false
      }
    }
  },
  methods: {
    showPrompt () {
      this.prompt = {
        title: '录入信息',
        msg: '请输入你的姓名',
        show: true
      }
    },
    handlerSure (input) {
      this.alert = {
        title: '信息',
        msg: '你输入的是：' + input,
        show: true
      }
    }
  }
}