showNav: true

Dialog

@rrc-materials/dialog for rrc

组件使用

在保留原有 el-dialog 的属性和方法的的情况下进行完善，封装了取消和确定按钮，用来告知用户并承载相关操作。

:::tip

注意： Element-UI 的属性和方法都适用。

:::

基本用法

Dialog 弹出一个对话框，适合需要定制性更大的场景。

:::demo

<el-button type="text" @click="currentVisible1 = true">点击打开Dialog</el-button>

<rc-dialog width="400px" :visible.sync="currentVisible1" @close="onClose">
  <span style="font-size: 16px;">这是属于人人车自己的dialog文档。\(^o^)/</span>
</rc-dialog>
<script>
export default {
  data() {
    return {
      currentVisible1: false
    }
  },
  methods: {
    onClose() {
      this.$notify.warning({
        title: '消息',
        message: '可进行相关操作.'
      })
      this.currentVisible1 = false
    }
  }
}
</script>

:::

自定义用法

Dialog 组件的内容可以是任意的，可以是表格或表单，下面是应用了 Element Form 组件的一个样例。

:::demo

<el-button type="text" @click="currentVisible2 = true">点击打开嵌套表单的Dialog</el-button>

<rc-dialog title="表单提交" width="400px" confirm-button-text="确认提交" :visible.sync="currentVisible2" @close="onSubmit">
  <el-form size="small">
    <el-form-item label="姓名">
      <el-input type="text" placeholder="请输入姓名" style="width:200px"></el-input>
    </el-form-item>
    <el-form-item label="性别">
      <el-select v-model="gender" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
  </el-form>
</rc-dialog>
<script>
export default {
  data() {
    return {
      currentVisible2: false,
      gender: '',
      options: [
        {
          label: '男',
          value: 'man'
        },
        {
          label: '女',
          value: 'woman'
        }
      ]
    }
  },
  methods: {
    onSubmit() {
      this.$notify.warning({
        title: '消息',
        message: '可进行相关提交操作.'
      })
      this.currentVisible2 = true
    }
  }
}
</script>

:::

JS 中使用

::: tip 因为在Render 外部是无法拿到 内置组件的实例，所以如果有复杂的表单操作。请使用组件的方式调用 :::

::: demo

<el-button @click="onOpenDialog">打开JS Dialog</el-button>
<script>
  export default {
    methods: {
      onOpenDialog () {
        const self = this
        const data = [
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '铁建广场B座 19-01'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '铁建广场B座 19-01'
          }
        ]
        const columns = [
          {
            property: 'date',
            label: '日期',
            width: 150
          },
          {
            property: 'name',
            label: '姓名',
            width: 200
          },
          {
            property: 'address',
            label: '地址'
          }
        ]
        const dialogAttr = {
          data
        }
        const dialog = this.$rrcDialog({
          title: '收货地址',
          render () {
            return (
              <rc-table attr={dialogAttr} isPage={false} columns={columns}></rc-table>
            )
          },
          onConfirm () {
            self.$notify.warning({
              title: '消息',
              message: '我是js 弹框confirm.'
            })
          }
        })

        dialog.show()
      }
    }
  }
</script>

:::

Attributes

| 参数 | 说明 |可选值 |类型| 默认值| |---------|-------- |---------- |-------- |---------- | | title | Dialog的标题 |-| String | 提示 | | attr | 绑定el-dialog原有的属性 | 具体属性请看 ElementUI文档 | Object |-| | on | 绑定el-dialog原有的事件 | open，close| Object |-| | width | Dialog的宽度 |-| String | 50% | | confirmButtonText | 确认按钮的提示文字 |-| String | 确定 | | cancelButtonText | 取消按钮的提示文字 |-| String | 取消 |

Events

| 事件名称 | 说明 |回调函数 | |---------- |-------- |---------- | | confirm | Dialog点击确定按钮时触发的回调 |-| | close | Dialog 关闭的回调 |-| | cancel | Dialog点击取消按钮时触发的回调 |-| | open | Dialog 打开的回调 |-|