Emui

# 使用

通过与visiable绑定我们可以指定事件打开对话框

日常生活中，少不了对话，emui 为您提供了两种对话框，您可以通过v-slot填入指定的插槽，实现对话的按钮功能

对话框dialog 你好，欢迎使用emui组件库

日常生活中，少不了对话，emui 为您提供了两种对话框，您可以通过v-slot填入指定的插槽，实现对话的按钮功能

<template>
  <div id="app">
    <emui-button type="primarygold" @click="visiable = true"
      >对话框dialog
    </emui-button>
    <emui-dialog title="emui提示您" :visiable.sync="visiable">
      <!-- .sync等同于 visiable="false" @update:visable,false -->
      你好，欢迎使用emui组件库
      <template v-slot:footer>
        <emui-button type="primarygold" @click="visiable = false" mimicry
          >确定</emui-button
        >
        <emui-button @click="visiable = false">取消</emui-button>
      </template>
    </emui-dialog>
  </div>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        visiable: false,
        visiable1: false,
      };
    },
  };
</script>
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
Expand Copy

朴实无华的对话 dialog

对话框dialog2 你好，欢迎使用emui组件库

朴实无华的对话 dialog



    <emui-button type="primarygold" @click="visiable1 = true"
      >对话框dialog2
    </emui-button>
    <emui-dialog title="emui提示您" :visiable.sync="visiable1">
      <!-- .sync等同于 visiable="false" @update:visable,false -->
      你好，欢迎使用emui组件库
    </emui-dialog>
  </div>


<script>
  export default {
    name: "App",
    data() {
      return {
        visiable: false,
        visiable1: false,
      };
    },
  };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Expand Copy

# Attributes

# 1、dialog

属性 属性值 说明
title String dialog 标题
visiable String dialog 是否开始就展示在页面上
v-slot slot 给对话框添加开关按钮
width String dialog 宽度
top String dialog 与上页的距离

← switch →