DolphinHybrid
点我扫二维码，查看demo

# Dialog

# 介绍

弹窗的模态对话框组件

# 引入

通过一下方式来全局注册组件。更多注册方式敬请期待。

import Vue from 'vue';
import { Dialog } from '@dolphin-iot/ui';

Vue.use(Dialog);
1
2
3
4

# 代码演示

# 基础用法

通过 show 参数控制对话框是否显示。

<template>
<div>
    <mx-cell title="基础用法" type="link" @click="showBasic = true"></mx-cell>
    <mx-dialog :show="showBasic" title="文本" @button-click="showBasic=!showBasic" />
</div>
</template>
<script>
export default{
    data(){
        return {
            showBasic:false
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 对话框类型

通过 type 参数控制对话框类型，对话框支持 confirm alter more 三种类型。默认为 confirm 类型。confirm 类型时对话框只显示一个 确认 按钮。alter 类型时，对话框显示 取消 确认 两个按钮。more 类型时，对话框显示 确定 更多 取消 三个按钮。如若需要对按钮文本进行定制化，请参考，自定义对话框按钮文本。

<template>
<div class="demo-list">
    <div class="panel">
        <mx-cell title="alert" type="link" @click="showAlter= true"></mx-cell>
        <mx-cell title="confirm" type="link" @click="showConfirm = true"></mx-cell>
        <mx-cell title="more" type="link" @click="showMore = true"></mx-cell>
        <div class="demo-panel">
            <mx-dialog :show="showAlter" type="alter" title="文本" @button-click="showAlter=!showAlter" />
            <mx-dialog :show="showConfirm" type="confirm" title="文本" @button-click="showConfirm=!showConfirm" />
            <mx-dialog :show="showMore" type="more" title="文本" @button-click="showMore=!showMore" />
        </div>
    </div>
</div>
</template>
<script>
export default{
    data(){
        return {
            showAlter:false,
            showConfirm:false,
            showMore:false
        }
    }
}
</script>
<style lang="scss" scoped>
.demo-list {
  width: 100%;
  height: 100%;
  .panel{
    padding-left: 10px;
    padding-right:10px;
    margin-bottom: 20px;
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# 对话框主体内容

通过 content 参数控制对话框主体内容。

<template>
<div class="demo-list">
    <div class="panel">
        <mx-cell title="提示框内容" type="link" @click="showAlterContent = true"></mx-cell>
        <mx-cell title="提示框内容2" type="link" @click="showCustomize = true"></mx-cell>
        <div class="demo-panel">
            <mx-dialog
            :show="showAlterContent"
            type="alter"
            title="标题"
            content="平台变得更大了，我们增加了大约100个新的产品应用。"
            @button-click="showAlterContent = !showAlterContent"
            ></mx-dialog>
            <mx-dialog :show="showCustomize" type="alter" title="家的名称" content="描述" @button-click="showCustomize = !showCustomize">
            <div style="padding-top:20px">
                <input type="text" placeholder="Password" />
            </div>
            </mx-dialog>
        </div>
    </div>
</div>
</template>
<script>
export default{
    data(){
        return {
            showAlterContent:false,
            showCustomize: false
        }
    }
}
</script>
<style lang="scss" scoped>
.demo-list {
  width: 100%;
  height: 100%;
  .panel{
    padding-left: 10px;
    padding-right:10px;
    margin-bottom: 20px;
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

# 自定义对话框按钮文本

通过 buttons 参数控制对话框按钮显示的文本。

<template>
<div class="demo-list">
   <div class="panel">
      <mx-cell title="按钮文本" type="link" @click="showRename = true"></mx-cell>
      <div class="demo-panel">
        <mx-dialog
          :show="showRename"
          title="标题文字"
          type="alter"
          content="我们增加了大约100个新的产品应用"
          :buttons="['取消', '更新']"
          @button-click="showRename = !showRename"
        ></mx-dialog>
      </div>
    </div>
</div>
</template>
<script>
export default {
    data(){
        return {
            showRename:false
        }
    }
}
</script>
<style lang="scss" scoped>
.demo-list {
  width: 100%;
  height: 100%;
  .panel{
    padding-left: 10px;
    padding-right:10px;
    margin-bottom: 20px;
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# 函数调用(v0.2.2开始支持)

函数调用与组件使用的 props 是一致的，在 'btn-click' 事件对应配置对象的 onButtonClick 属性。另外函数式调用不支持自定义插槽。

<template>
<div class="demo-list">
   <div class="panel">
      <h4>函数调用</h4>
      <mx-cell title="函数调用" type="link" @click="onInvokeComponent"></mx-cell>
    </div>
</div>
</template>
<script>
export default {
    methods:{
        onInvokeComponent(){
            this.$dialog({
                title:"标题文字",
                type:"alter",
                content:"我们增加了大约100个新的产品应用",
                buttons:['取消', '更新'],
                onButtonClick:data=>{
                    this.$toast({
                        position:'bottom',
                        message: JSON.stringify(data)
                    })
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.demo-list {
  width: 100%;
  height: 100%;
  .panel{
    padding-left: 10px;
    padding-right:10px;
    margin-bottom: 20px;
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

# Api

# Props

参数 说明 类型 默认值 是否必须
show 是否显示弹出层 boolean false -
overlay 是否显示遮罩层 boolean true -
z-index 弹出层在z轴的序号 number 1030 -
lock-scroll 是否锁定背景滚动 boolean true -
duration 弹出层以及遮罩层动画时长（秒为单位） number 0.36 -
overlay-style 遮罩层自定义样式 object - -
close-on-click-overlay 是否在点击遮罩层后关闭 boolean true -
type 对话框类型，可选值为 confirm alter more string confirm -
title 标题 string - -
content 内容 string - -
buttons 按钮文本 string[] - -
primary 默认按钮 string - -

# Events

事件名称 说明 回调参数
close 关闭时触发 e: Event
button-click 按钮点击时触发 e: {text,index}

# Slots

名称 说明
header 自定义对话框头部
body 自定义对话框中间部分
footer 自定义对话框底部
default 自定义对话框content下面部分
更新时间: 12/3/2021, 1:36:49 PM

← Empty 空白提示 →