diantou/docs/examples/PC移动适配.md

为了减少移动/PC 端代码的差异，我们抽象出了一些统一的接口，底层分别实现成 Ant Design Vue/Quasar

信息反馈

API 与 Ant Design Vue 里的 message 一致（content 只能是字符串）

<template>
  <div>
    <button @click="str">
      直接传字符串
    </button>
    <button @click="obj">
      对象参数控制更多选项
    </button>
    <button @click="promise">
      promise 方式
    </button>
    <button @click="callback">
      callback 方式
    </button>
    <button @click="update">
      更新已有的信息
    </button>
  </div>
</template>

<script>
import { message } from '@/common/one-ui'

export default {
  methods: {
    str() {
      message.info('This is a info message')
      message.success('This is a success message')
      message.error('This is an error message')
      message.warning('This is a warning message')
    },
    obj() {
      // 可以指定显示时长
      message.success({ content: 'This is a success message', duration: 3 })
    },
    promise() {
      message
        .info('This is a info message')
        .then(() => message.success('This is a success message'))
        .then(() => message.error('This is an error message'))
    },
    callback() {
      message.info('This is a info message', () =>
        message.success('This is a success message', () =>
          message.error('This is an error message')
        )
      )
    },
    update() {
      // 传一样的 key 可以更新上一条信息
      message.info({ content: 'This is a info message', key: 'mykey' })
      setTimeout(() => {
        message.success({ content: 'This is a success message', key: 'mykey' })
      }, 1000)
    },
  },
}
</script>

alert/confirm 对话框

API 与 Ant Design Vue 里的 modal 一致（content 只能是字符串）

<template>
  <div>
    <button @click="alert">
      各种alert框
    </button>
    <button @click="confirm">
      confirm框
    </button>
    <button @click="multiLine">
      多行
    </button>
    <button @click="update">
      更新和关闭
    </button>
  </div>
</template>

<script>
import { Modal } from '@/common/one-ui'

export default {
  methods: {
    alert() {
      Modal.info({
        title: 'info',
        content: 'content',
        onOk() {
          Modal.success({
            title: 'success',
            content: 'content',
            onOk() {
              Modal.warning({
                title: 'warning',
                content: 'content',
                onOk() {
                  Modal.error({
                    title: 'error',
                    content: 'content',
                  })
                },
              })
            },
          })
        },
      })
    },
    confirm() {
      Modal.confirm({
        title: 'confirm',
        content: 'content',
        onOk() {
          Modal.confirm({
            title: 'confirm',
            content: 'content',
          })
        },
        cancelText: 'XXX',
        okText: '删除',
        okType: 'danger',
        onCancel() {
          Modal.info({
            title: 'onCancel',
            content: 'Cancel',
            icon: 'logout',
          })
        },
      })
    },
    multiLine() {
      Modal.info({
        title: 'info',
        content: '第一行\n第二行',
      })
    },
    update() {
      const modal = Modal.info({ content: '开始的内容' })
      setTimeout(() => modal.update({ content: '更新后的内容' }), 1000)
      setTimeout(modal.destroy, 2000)
    },
  },
}
</script>