Element-ui Dialog对话框基本使用

 更新时间:2023年06月29日 09:35:51   作者:菜园前端  
这篇文章主要为大家介绍了Element-ui Dialog对话框基本使用示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

按需引入方式

Element-ui Dialog对话框用于弹出窗口

如果是完整引入可跳过此步骤

import Vue from 'vue'
import { Dialog } from 'element-ui'
import 'element-ui/lib/theme-chalk/base.css'
import 'element-ui/lib/theme-chalk/dialog.css'
Vue.use(Dialog)

基础使用

<template>
    <el-button @click="dialogVisible = true">点击打开 Dialog</el-button>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
export default {
    data() {
        return {
            dialogVisible: false
        }
    }
}
</script>

Attributes

以上就是Element-ui Dialog 对话框基本使用的详细内容,更多关于Element-ui Dialog对话框的资料请关注脚本之家其它相关文章!

相关文章

  • Vue3监听store中数据变化的三种方式

    Vue3监听store中数据变化的三种方式

    这篇文章给大家介绍了Vue3监听store中数据变化的三种方法,使用watch和storeToRefs函数,使用计算属性computed和使用watchEffect函数这三种方法,文中通过代码讲解非常详细,需要的朋友可以参考下
    2024-01-01
  • vue项目中引入vue-datepicker插件的详解

    vue项目中引入vue-datepicker插件的详解

    这篇文章主要介绍了vue项目中引入vue-datepicker插件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 如何解决vue与传统jquery插件冲突

    如何解决vue与传统jquery插件冲突

    本篇文章主要介绍了如何解决vue与传统jquery插件冲突,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • vue项目页面刷新后报404的解决方法

    vue项目页面刷新后报404的解决方法

    vue项目页面正常访问,但是刷新后报404,这种情况通常是由于 前端路由​ 和 浏览器直接访问​ 的差异导致的,主要有以下几个原因和解决方案,下面我们就来详细介绍一下吧
    2025-12-12
  • Vue实现商品飞入购物车效果(电商项目)

    Vue实现商品飞入购物车效果(电商项目)

    这篇文章主要介绍了Vue实现商品飞入购物车效果(电商项目),这种效果在一些电商平台经常会用到,今天小编通过代码详解,需要的朋友可以参考下
    2019-11-11
  • Vue登录主页动态背景短视频制作

    Vue登录主页动态背景短视频制作

    这篇文章主要为大家详细介绍了Vue登录主页动态背景短视频的制作方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • vue实现的微信机器人聊天功能案例【附源码下载】

    vue实现的微信机器人聊天功能案例【附源码下载】

    这篇文章主要介绍了vue实现的微信机器人聊天功能,结合实例形式分析了基于vue.js的微信机器人聊天相关界面布局、ajax交互等操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下
    2019-02-02
  • Vue.js 父子组件通讯开发实例

    Vue.js 父子组件通讯开发实例

    这篇文章主要介绍了Vue.js 父子组件通讯开发实例的相关资料,本文介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • vue使用exif获取图片旋转,压缩的示例代码

    vue使用exif获取图片旋转,压缩的示例代码

    这篇文章主要介绍了vue使用exif获取图片旋转,压缩的示例代码,帮助大家更好的利用python处理图片,感兴趣的朋友可以了解下
    2020-12-12
  • 深入对Vue.js $watch方法的理解

    深入对Vue.js $watch方法的理解

    本篇文章主要介绍了深入对Vue.js $watch方法的理解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧。
    2017-03-03

最新评论