vue modal组件

最新推荐文章于 2024-06-21 09:41:59 发布
最新推荐文章于 2024-06-21 09:41:59 发布
阅读量402 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kekedou443/article/details/70598203
版权 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/bootstrap.css" />
        <title></title>
        <style type="text/css">
            .modal-content{
                width:300px;
                margin: 100px;
            }
        </style>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="modal-demo">
            <custom-demo modal-title="标题"></custom-demo>

            <custom-demo >
                <ul slot="panelBody">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>   
                <div slot="footerBtns">
                    <a href="#" @click="confirm">确定</a>
                    <a href="#" @click="cancel">取消</a>
                </div>

            </custom-demo>

            <custom-demo @on-click="onclose1"  @on-save="onsave1">
                <ul slot="panelBody">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>   


            </custom-demo>
        </div>


    </body>

    <script type="text/javascript">
    Vue.component("custom-demo",{
        props:{
            modalTitle:{
                type:String,
                default:'默认title'
            }
        },
        template:`
                <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                        <h4 class="modal-title">{{modalTitle}}</h4>
                      </div>
                      <div class="modal-body">
                          <slot name="panelBody">
                            <p>One fine body…</p>
                          </slot>
                      </div>
                      <div class="modal-footer">
                      <slot name="footerBtns">
                        <button type="button" class="btn btn-default" data-dismiss="modal" @click="cloes">Close</button>
                        <button type="button" class="btn btn-primary"  @click="save">Save changes</button>
                      </slot>
                      </div>    
                </div>
            `,
            methods:{
                cloes:function(){
                    alert("子close");
                    this.$emit("on-click");
                },
                save:function(){
                    alert("子save");
                    this.$emit("on-save");
                }
            }
    });
        new Vue({
            el:".modal-demo",
            methods:{
                confirm:function(){
                    alert("确定");
                },
                cancel:function(){
                    alert("取消");
                },
                onclose1:function(){
                    alert("修改一个样式");
                    alert("父确定")
                },
                onsave1:function(){
                    alert("父取消")
                }
            }

        })
    </script>
</html>

这里写图片描述

珂珂豆443
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue modal 组件_适用于Vue应用程序的简单易用的Modal组件
cuk5239的博客
07-22 1895
vue modal 组件 虚拟可爱模态 (vue-cute-modal) A simple and easy to use Modal component for Vue applications. Vue应用程序的一个简单易用的Modal组件。 View demo 查看演示 Download Source 下载源 特征 (Features) Simple API 简单的API C...
vue中的组件
weixin_46030955的博客
03-27 1756
1、什么是组件？ 实现局部代码交互和功能的集合 组件就是一个可复用的vue实例 2、组件怎么写？ 注册一个全局组件 <div id="app"> <tab-button></tab-button> </div> 注册一个全局组件 Vue.component('tab-button',{ data:function(){ return{
Vue2信息提示（Modal）
热门推荐
Mr Dear的博客
07-28 1万+
一共有两种模式，六种展示效果，弹窗随内容自适应增加高度，同时支持对弹窗位置进行设置：①水平垂直居中②高度固定水平居中
用Vue3.0 想实现一个 Modal组件（详细讲解）
贫僧法号依平
05-22 1248
现在有一个场景，点击新增与编辑都弹框出来进行填写，功能上大同小异，可能只是标题内容或者是显示的主体内容稍微不同。组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式。这样，下次开发相同界面程序时就可以写更少的代码，意义着更高的开发效率，更少的。这时候就没必要写两个组件，只需要根据传入的参数不同，组件显示不同内容即可。内置组件进行包裹，其相当于传送门，将里面的内容传送至。主体内容需要灵活，所以可以是字符串，也可以是一段。组件内部是如何处理「确定」「取消」事件的，既然是。
6.用Vue3.0 写过组件吗？如果想实现一个 Modal你会怎么设计？
kleinBlue.的博客
11-08 1268
一、组件设计 组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式 现在有一个场景，点击新增与编辑都弹框出来进行填写，功能上大同小异，可能只是标题内容或者是显示的主体内容稍微不同 这时候就没必要写两个组件，只需要根据传入的参数不同，组件显示不同内容即可 这样，下次开发相同界面程序时就可以写更少的代码，意味着更高的开发效率，更少的Bug和更少的程序体积 二、需求分析 实现一个Modal组件，首先确定需要完成的内容： 遮罩层 标题内容 主体内...
vue封装一个简单的modal对话框
qq_55491577的博客
02-08 1014
在modal.vue中，我们在props中接受四个参数，title：标题，width：宽度， height：高度，top：距离顶部的高度，不传则是默认的值；并提供了两个具名插槽，header和footer，以及一个默认插槽slot显示里面的内容；并添加了三个自定义事件控制modal的显示和隐藏；点击右上角的xx, 取消、确定都会把对话框隐藏，并使用message组件提示用户 ，可以再这三个事件写自己的逻辑，比如点击确定发起请求等；通过外层的div控制组件的显示隐藏。点击打开modal那个按钮弹出对话框。
vue自定义组件v-modal（包含vue2,vue3)
weixin_58031521的博客
02-27 194
vue自定义组件v-modal（包含vue2,vue3)
vue 组件
weixin_45856470的博客
10-07 321
1. 什么是组件化开发 组件化开发指的是：根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。 2. vue 中的组件化开发 vue 是一个支持组件化开发的前端框架。 vue 中规定：组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。 3. vue 组件的三个组成部分 每个 .vue 组件都由 3 部分构成，分别是： template -> 组件的模板结构 script -> 组件的 JavaScript 行为
很棒的vue弹窗组件
08-30
* 创建一个 Vue 组件，例如 `Modal` 组件。 * 在组件中，使用模板语法来渲染对话框的内容和操作按钮。 * 使用 CSS 来控制对话框的样式。 * 使用 Vue.js 的生命周期钩子来控制对话框的逻辑。 Vue 弹窗组件是一种非常...
手写Vue弹窗Modal的实现代码
10-16
在本文中，我们将深入探讨如何手写一个Vue Modal组件，并通过实例代码来解析其实现过程。 首先，让我们来看一下一个简单的Vue通知组件的实现。该组件包含类型（type）、消息（msg）两个属性，用于定义弹窗的样式和...
vue弹窗组件使用方法
08-27
1. 创建一个 Vue 组件，例如 modal.vue： ``` <div class="modal"> <div class="modal-header"> <h4>{{ title }} <div class="modal-content"> {{ content }} <div class="modal-footer"> 关闭 ...
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
10-17
主要介绍了vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show,本文通过实例图文相结合的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vuex-modal:简单的模态组件Vuex模块
05-02
Vuex模态 简单的模态组件/ Vuex模块。 安装 $ npm install --save vuex-modal # or $ yarn add vuex-modal 用法 导入modalModule并将其设置为Vuex模块。 import Vue from 'vue' import Vuex from 'vuex' import { modalModule } from 'vuex-modal' Vue . use ( Vuex ) const store = new Vuex . Store ( { // ... modules : { modal : modalModule } } ) new Vue ( { el : '#app' , store , // ... } ) （可选）在所需的任何位置导入模态的基本CSS文件，也可以定义自己的样式
Vue-Router-Modal
04-02
Vue-Router-Modal 是一个基于 Vue.js 框架的路由管理模态解决方案。它将传统的页面跳转转换为模态对话框展示，这在某些应用场景下，如处理表单填写、查看详细信息或者轻量级的导航时，能够提供更好的用户体验。Vue-...
【uniapp】【Vue3】 超简单全局自定义弹窗组件Modal
向来缘浅，奈何情深
08-03 1421
H5下需要正确设置 Canvas 的大小。其实自动引入后使用变得很简单，直接调用ElMessage就行了，也不用import。this.$router.push不支持传递params了，建议用状态管理，比如。这个名字怎么去看呢，就打开node_modules，找到引入的。三方件，可以看到components下面有很多文件，比如。同理ElLoading也是直接用就行了。但是vscode提示。
Vue3信息提示（Modal）
Mr Dear的博客
04-06 4688
Vue3+TS开发的模态对话框组件，弹窗类型一共有六种：'info' 'success' 'error' 'warn' 'confirm' 'erase'，弹窗随内容自适应增加高度；同时支持对弹窗位置进行设置：①水平垂直居中②高度固定水平居中
vue二次封装ant-design-vue中的Modal弹窗组件，实现拖拽，全屏两种功能，原有参数属性不变
m0_57071129的博客
01-17 2589
在我们的项目的有的地方需要用弹框的拖拽，以及弹窗自定义全屏显示的需求，所以再次将二次合一，同时弹框里面内容自适应屏幕高度在ant-design-vue中，已经实现了拖拽，全屏的功能，下面是ant官网的示例。
推荐一款高效轻量的Vue模态组件——vue-modal
最新发布
gitblog_00072的博客
06-21 392
推荐一款高效轻量的Vue模态组件——vue-modal 项目地址:https://gitcode.com/kouts/vue-modal 在构建Web应用时，我们常常需要使用到模态窗口来提供额外的信息或者交互体验。今天，我要向您推荐一个功能强大且高度可定制的Vue模态组件——vue-modal。它以其简洁的代码、强大的功能和良好的兼容性，成为开发中的得力助手。 1、项目介绍 vue-modal是一...
vue中modal组件标题
06-06
您可以在Vue中使用Modal组件时，为标题添加一个prop属性，比如说"modal-title"。然后在Modal组件中，使用这个prop属性来渲染标题。例如： ```html <modal :show="showModal" :modal-title="title"> <!-- Modal ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值