Wondering what’s next for npm?Check out our public roadmap! »

    @rrc-materials/dialog

    0.2.0 • Public • Published

    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 打开的回调 -

    Keywords

    Install

    npm i @rrc-materials/dialog

    DownloadsWeekly Downloads

    4

    Version

    0.2.0

    License

    ISC

    Unpacked Size

    9.39 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar
    • avatar