Dialog 弹窗

弹窗一个模态框供用户操作。

基础使用

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

这是个标题

这是一段信息

Dialog组件需设置ref属性，通过$refs.[refName].show()||hide()来控制Dialog打开关闭。Dialog 分为两个部分：header、body和footer。title属性用于定义标题，它是可选的，默认值为空。

<j-button type="link" @click="$refs.jDialog1.show()">点击打开 Dialog</j-button>
<j-dialog ref="jDialog1"
          title="这是个标题"
          style="width:520px;height:380px;">
        <div slot="body" style="padding:20px">这是一段信息</div>
        <div slot="footer">
          <j-button type="primary" @click="$refs.jDialog1.hide()">确认</j-button>
          <j-button type="default" @click="$refs.jDialog1.hide()">取消</j-button>
        </div>
</j-dialog>

显示代码 复制代码 复制代码

自定义标头及标尾

Dialog 支持自定义您的标头

这是一段信息

这是一段信息

这是一段信息

Dialog 的头部可以通过titel属性传递字符串展示标头，也可通过slot="header"自定义您的标头，当title及slot="header"为空时则不展示标头，当slot="footer"为空时则不展示标头。

<j-button type="link" @click="$refs.jDialog2.show()">自定义标头</j-button>
<j-button type="link" @click="$refs.jDialog3.show()">无标头</j-button>
<j-dialog ref="jDialog2"
          style="width:520px;height:380px;">
        <div slot="header" style="color:red">
          <i class="j-icon icon-jiaobiao"></i><span >这是一段信息</span>
        </div>
        <div slot="body" style="padding:20px">这是一段信息</div>
</j-dialog>
<j-dialog ref="jDialog3"
          style="width:520px;height:380px;">
        <div slot="body" style="padding:20px">这是一段信息</div>
        <div slot="footer">
          <j-button type="primary" @click="$refs.jDialog3.hide()">关闭</j-button>
        </div>
</j-dialog>

显示代码 复制代码 复制代码

自定义标头

Dialog 组件的内容可以是任意的

表格

1		A	2023-1-1	confirmed	123
2		B	2023-1-1	confirmed	124
3		C	2023-1-1	confirmed	125
4		A	2023-1-1	confirmed	126
5		B	2023-1-1	confirmed	127
6		C	2023-1-1	confirmed	128

每页记录数

10

50

200

共

0

条

1

/

0

页

表单

这是一段信息

页面

这是一段信息

<j-button type="link" @click="$refs.jDialog4.show()">嵌套表格</j-button>
<j-button type="link" @click="$refs.jDialog5.show()">嵌套表单</j-button>
<j-button type="link" @click="$refs.jDialog6.show()">嵌套页面</j-button>
<j-dialog ref="jDialog4"
          title="表格"
          style="width:560px;height:420px;">
        <div slot="body" style="padding:10px">
            <j-table
              :data-page="{ 
                  PageSize: 10,
                  PageSizes: [
                    50,
                    200
                  ], PageCount: 0,
                  PageIndex: 1,
                  DataCount: 0
                }"
              style="height:362px;width:100%"
              class="large"
              :col-config="colConfig"
              :data="list"
            />
        </div>
</j-dialog>
<j-dialog ref="jDialog5"
          title="表单"
          style="width:520px;height:380px;">
        <div slot="body" style="padding:20px">这是一段信息</div>
        <div slot="footer">
          <j-button type="primary" @click="$refs.jDialog5.hide()">确认</j-button>
          <j-button type="default" @click="$refs.jDialog5.hide()">取消</j-button>
        </div>
</j-dialog>
<j-dialog ref="jDialog6"
          title="页面"
          style="width:520px;height:380px;">
        <div slot="body" style="padding:20px">这是一段信息</div>
        <div slot="footer">
          <j-button type="primary" @click="$refs.jDialog6.hide()">确认</j-button>
          <j-button type="default" @click="$refs.jDialog6.hide()">取消</j-button>
        </div>
</j-dialog>

<script>
  export default {
    data() {
      return {
        list: [
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'A', i_id: '2023-1-1', status: 'confirmed', $checked: true, end_datetime: '', sku_id: 123, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'B', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 124, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'C', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 125, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'A', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 126, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'B', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 127, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'C', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 128, pv: '' }
        ],
        colConfig: [
          {
            name: 'pic',
            label: '图片',
            template: 'image',
            width: '60px'
          },
          {
            name: 'name',
            label: '名称',
            width: '140px'
          },
          {
            name: 'i_id',
            label: 'i_id',
            width: '100px'
          },
          {
            name: 'status',
            label: 'status',
            width: '100px'
          },
          {
            name: 'sku_id',
            label: 'sku_id',
            width: '60px'
          }
        ],
      };
    },
    methods: {
     
    }
  };
</script>

显示代码 复制代码 复制代码

弹出位置

Dialog 弹出到自己适合的位置。

自定义弹出位置

距离页面左边

px 距离页面顶部

px

这是个标题

这是一段信息

Dialog组件需设置ref属性，通过$refs.[refName].show()||hide()来控制Dialog打开关闭。Dialog 分为两个部分：header、body和footer。title属性用于定义标题，它是可选的，默认值为空。

<j-button type="link" @click="dialogPosition='center';$refs.jDialog7.show()">居中</j-button>
<j-button type="link" @click="dialogPosition='top';$refs.jDialog7.show()">居上</j-button>
<j-button type="link" @click="dialogPosition='right';$refs.jDialog7.show()">居右</j-button>
<j-button type="link" @click="dialogPosition='bottom';$refs.jDialog7.show()">居下</j-button>
<j-button type="link" @click="dialogPosition='left';$refs.jDialog7.show()">居左</j-button>
<j-row style="margin-top:20px">
  <p>自定义弹出位置</p>
  <span>距离页面左边</span>
  <j-input v-model="dialogPositionLeft" style="width:50px"></j-input>px
  <span>距离页面顶部</span>
  <j-input v-model="dialogPositionTop" style="width:50px"></j-input>px
  <j-button type="link" @click="dialogPosition='location';$refs.jDialog7.left=dialogPositionLeft+'px';$refs.jDialog7.top=dialogPositionTop+'px';$refs.jDialog7.show()">弹出</j-button>
</j-row>
<j-dialog ref="jDialog7"
          title="这是个标题"
          :position="dialogPosition"
          style="width:520px;height:380px;">
        <div slot="body" style="padding:20px">这是一段信息</div>
        <div slot="footer">
          <j-button type="primary" @click="$refs.jDialog7.hide()">确认</j-button>
          <j-button type="default" @click="$refs.jDialog7.hide()">取消</j-button>
        </div>
</j-dialog>
<script>
  export default {
    data() {
      return {
        dialogPositionLeft:'',
        dialogPositionTop:'',
        dialogPosition:'center'
      };
    },
    methods: {
     
    }
  };
</script>

显示代码 复制代码 复制代码

Dialog Attributes

参数	说明	类型	可选值	默认值
position	Dialog弹出的位置	String	top,left,bottom,right,center,location	center
title	标头文字	string	-	—
icon	标头文字前面的icon	string	—	—
header-border-bottom	标头下划线	string	传空时可取消标头下划线	-
footer-border-top	标尾上划线	string	传空时可取消标尾上划线	-
show-mask	是否展示遮罩层	boolean	—	true
closeAble	是否显示关闭按钮	boolean	—	true
autoHeight	Dialog body高度自动	boolean	—	false
beforeClose	弹窗关闭之前的回调	Function	—	-

Dialog Events

事件名	说明	参数
show	Dialog 弹出后执行的函数	Dialog实例(this)
close	Dialog 关闭后执行的函数	Dialog实例(this)

Dialog Methods

方法名	说明	参数
show	Dialog 弹出
hide	Dialog 关闭