@rrc-materials/dialog

---

showNav: true

Dialog

@rrc-materials/dialog for rrc

<script> export default { data() { return { currentVisible1: false, currentVisible2: false, gender: '', options: [ { label: '男', value: 'man' }, { label: '女', value: 'woman' } ] } }, methods: { onClose() { this.$notify.warning({ title: '消息', message: '可进行相关操作.' }) this.currentVisible1 = false }, onSubmit() { this.$notify.warning({ title: '消息', message: '可进行相关提交操作.' }) this.currentVisible2 = false }, 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.$rcDialog({ title: '收货地址', render () { return ( ) }, onConfirm () { self.$notify.warning({ title: '消息', message: '我是js 弹框confirm.' }) } }) dialog.show() } } } </script>

组件使用

在保留原有 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 打开的回调	-