用vue制作小弹窗

最新推荐文章于 2024-03-25 16:52:29 发布
最新推荐文章于 2024-03-25 16:52:29 发布
阅读量928 收藏
点赞数
文章标签： VUE 弹窗
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ys-vue-modal-component</title>
    <style>
        p,h4{
            margin:0;
        }
        .modal{
            width: 480px;
            background-color: #fff;
            border: 1px solid rgba(0, 0, 0, .3);
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
            margin: 50px;
        }
        .modal-header {
            color: #fff;
            background: cadetblue;
            border-radius: 6px 6px 0 0;
            padding: 15px;
            border-bottom: 1px solid #5e9fa1;
        }
        .modal-content div {
            padding: 15px 10px;
        }
        .modal-footer {
            padding: 15px;
            text-align: right;
            border-top: 1px solid #e5e5e5;
        }
        .btn {
            border: 1px solid #d1d1d1;
            border-radius: 3px;
            background-color: #f7f7f7;
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#f7f7f7),
         to(#f2f2f2));
            background: -moz-gradient(linear, 0 0, 0 100%, from(#f7f7f7),
         to(#f2f2f2));
            background: -o-gradient(linear, 0 0, 0 100%, from(#f7f7f7), to(#f2f2f2));
            background: -ms-gradient(linear, 0 0, 0 100%, from(#f7f7f7), to(#f2f2f2));
            height: 28px;
            padding: 0 20px;
            cursor: pointer;
            line-height: 28px;
            display: inline-block;
            color: #666666;
            margin-right: 5px;
            outline: none;
        }
        .blue {
             border: 1px solid #5e9fa1;
            background-color: #5e9fa1;
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#74c4c6),
         to(#5e9fa1));
            background: -moz-gradient(linear, 0 0, 0 100%, from(#74c4c6),
         to(#5e9fa1));
            background: -o-gradient(linear, 0 0, 0 100%, from(#74c4c6), to(#5e9fa1));
            background: -ms-gradient(linear, 0 0, 0 100%, from(#74c4c6), to(#5e9fa1));
            color: #FFFFFF;
        }       
    </style>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">  
        <input type="button" class="btn blue" value="点击我，呼唤弹窗，再来一遍" v-if="isHide" @click="isHide=!isHide">
        <ys-modal-component 
             v-if="!isHide"
             modal-title="温馨提示" 
             ok-btn="确认购买"  
             cancel-btn="去意已决"
             @on-ok="ok"
             @on-cancel="cancel"
         >
            <div slot="modal-content">
                尊敬的用户，您购买的商品将于支付成功后3-7个工作日内发货，敬请周知。祝您购物愉快！
            </div>
        </ys-modal-component>
    </div>
    <script>
        /*
            props：
                modalTitle: 弹窗标题
                okBtn: 确认按钮
                cancelBtn: 取消按钮
                注意事项：传参时候使用烤串的书写方式xx-xxx
            slot:
                modal-content: 内容区域
                modal-footer： 页脚按钮区域
            methods: 
                okHandle: 触发确认on-ok自定义事件
                cancelHandle： 触发取消on-cancel自定义事件
         */
        Vue.component('ys-modal-component', {
            props: {
                modalTitle: {
                    type: String,
                    default: '标题区域'
                },
                okBtn: {
                    type: String,
                    default: '确认'
                },
                cancelBtn: {
                    type: String,
                    default: '取消'
                }
            },
            template: `
                <div class="modal">
                    <div class="modal-header">
                        <h4>{{ modalTitle }}</h4>
                    </div>
                    <div class="modal-content">
                        <div>
                            <slot name="modal-content">内容区域</slot>
                        </div>
                    </div>
                    <div class="modal-footer">
                            <input class="btn blue" type="button" v-model="okBtn" @click="okHandle" />
                            <input class="btn" type="button" v-model="cancelBtn"  @click="cancelHandle" />
                    </div>
                </div>
            `,
            methods: {
                okHandle () {
                    console.log("点击确定");
                    this.$emit("on-ok"); 
                },
                cancelHandle () {
                    console.log("点击取消");
                    this.$emit("on-cancel");
                }
            }
        })




        new Vue({
            el: "#app",
            data: {
                isHide: false
            },
            methods: {
                ok () {
                    alert("欢迎您购买本产品");
                },
                cancel () {
                    this.isHide = !this.isHide;
                }
            }
        })
    </script>
</body>
</html>
Joker__chan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue.js弹窗插件css样式
03-05
vue.js Dialog插件，支持页面挂载对象和按钮配置，博客有js代码和示例，可以按需求自行修改，链接地址：https://blog.csdn.net/weixin_40885323/article/details/104675450
Vue中自定义弹窗组件
KAone的博客
06-03 409
Vue自定义弹窗
[vue]封装自定义列弹窗组件实现el-table自定义动态列加载
最新发布
weixin_53492834的博客
03-25 279
2.1 在表格加入自定义列按钮以及通过v-for去遍历el-table-column。注：css部分均被本人删除样式需自己根据项目去调整，主要是写实现过程。1.实现效果：通过前端实现el-table自定义展示列数据。2.2在data()去初始化相关数据。2.4 定义methods方法。2.3 导入自定义列的弹窗。2.5封装自定义弹窗。
vue 自定义弹框样式
m0_37697423的博客
06-19 3331
业务场景： 页面内显示多张图片，点击图片能够以幻灯片形式（卡片）放大查看，点击图片能够保存本地 <div class="cover" v-show="isCover" ></div> <div class="custom_container" v-show="isLoopPicture" @click.self="hidePop"> <span...
vue弹窗组件练习
章鱼no丸子
05-24 5253
弹窗是一个项目必备的复用利器，所以封装起来，保证项目ui一致，是很有必要的。学了一段时间vue，想想还是用vue写一下吧。用的很小白，但是会写出来了，说明我也有进步一丢丢了。继续加油…. 代码贴图如下，样式比较丑，不要介意…<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ys-vue-mod
在vue中封装一个简单的弹窗组件
haodanzj的博客
08-02 1076
vue中的一个弹窗组件
Vue自定义弹窗指令的实现代码
10-18
使用vue2.0实现自定义弹窗指令，当标签有该指令时，点击标签可以弹出弹窗。下面通过实例代码给大家介绍Vue自定义弹窗指令的相关知识，感兴趣的朋友一起看看吧
vue实现抽屉弹窗效果
01-21
本文实例为大家分享了vue实现抽屉弹窗效果的具体代码，供大家参考，具体内容如下 以下代码比较简单。主要就是实现 侧边弹窗而且不会影响页面操作的方式，求点赞！！！不多说直接贴代码。 ,leftT:!leftShow,left...
使用Vue组件实现一个简单弹窗效果
08-27
主要介绍了使用Vue组件实现一个简单弹窗效果,本文主要内容会涉及到弹窗遮罩的实现， slot 插槽的使用方式，props 、 $emit 传参，具体组件代码也传上去了。需要的朋友可以参考下
Vue中关闭弹窗组件时销毁并隐藏操作
11-19
原因：在vue的生命周期中，在页面初始化的时候mounted只会执行一次，关闭弹窗页面并没有销毁，所以不会再次执行 <select-experience-group :trialMoneyRecordID=trialMoneyRecordID :showExperienceGroup='...
vue的toast弹窗组件实例详解
01-19
相信普通的vue组件大家都会写, 定义 -> 引入 -> 注册 -> 使用 ,行云流水,一气呵成,但是如果我们今天是要自定义一个弹窗组件呢? 首先,我们来分析一下弹窗组件的特性(需求): 0. 轻量 –一个组件小于 1Kib (实际打包完...
vue弹窗组件的实现示例代码
10-18
主要介绍了vue弹窗组件的实现示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
移动端toast弹框样式美观轻量支持vue20
08-10
移动端toast弹框，样式美观、轻量，支持vue2.0
vue 点击打开小窗口
qq_42619759的博客
09-07 1141
vue 点击打开小窗口
vue小项目
Lily68910的博客
03-16 1803
电商电商业务描述多端电商后台开发模式启动后台项目项目初始化步骤如下1.码云创建仓库2.本地创建项目3.使用git把项目推送到远程仓库4.配置Element-UI安装项目引入5.配置axios6 删除组件和视图7.代码格式校验登录1.登录逻辑２.创建新分支login3.修改根组件4.创建登录组件index.vue 模板样式和安装 less-loader因版本问题报错的解决方案：全局样式添加路由添加第三方字体添加表单验证使用axios请求登录接口异步改造登陆成功跳转 电商 业务描述 多端 客户使用的业务服务：P
Vue.js起手式+Vue小作品实战
weixin_34168700的博客
01-04 206
本文是小羊根据Vue.js文档进行解读的第一篇文章，主要内容涵盖Vue.js的基础部分的知识的，文章顺序基本按照官方文档的顺序，每个知识点现附上代码，然后根据代码给予个人的一些理解，最后还放上在线编辑的代码以供练习和测试之用；在最后，我参考SegmentFault上的一篇技博，对Vue进行初入的实战，目的是将新鲜学到的知识立即派上用场；如果你还是前端的小白，相信这篇文章可能会对产生一些帮助和...
vue通过点击事件弹出弹窗页面
热门推荐
David_house的博客
04-09 6万+
步骤一 创建一个弹窗页面，我们给该页面命名为dialogComponent，弹窗页面中要设置以下内容： <template> <!--1.首先，弹窗页面中要有el-dialog组件即弹窗组件，我们把弹窗中的内容放在el-dialog组件中--> <!--2.设置:visible.sync属性，动态绑定一个布尔值，通过这个属性来控制弹窗是否弹出--> <el-dialog title="弹窗" :visible.sync="detailVisible" width
vue a-moal 本页面增加弹窗
weixin_44805962的博客
01-13 189
<a-modal class="org" title="标题" :width="200" :visible="display" :footer="null" @cancel="onClose">abo </a-modal> 默认with520所以 :with 更改 控制显示 0.绑定 1.定义 2.开启 3.关闭 关于 :footer=“null” footer 不为空 footer为nu
vue中ant 弹窗自适应屏幕大小
04-04
在Vue中，Ant Design的弹窗组件可以通过设置宽度和高度来实现自适应屏幕大小的效果。 首先，需要在弹窗组件的props中添加width和height两个属性，用于接收弹窗的宽度和高度。 然后，在弹窗组件的template中，可以使用v-bind绑定style属性，通过计算得出弹窗的宽度和高度，从而实现自适应屏幕大小的效果。 以下是示例代码： ``` <template> <a-modal :title="title" :visible="visible" :width="width" :height="height"> <p>这是弹窗内容。</p> </a-modal> </template> <script> export default { props: { title: String, visible: Boolean, width: { type: Number, default: 520 }, height: { type: Number, default: 320 } }, computed: { modalStyle() { return { width: `${this.width}px`, height: `${this.height}px` } } } } </script> <style scoped> .ant-modal-body { overflow-y: auto; } </style> ``` 在上面的代码中，我们使用了computed属性来计算弹窗的style属性，其中width和height使用了props中传入的值。在style中，我们将width和height转换为像素值，并将其作为样式属性绑定到弹窗组件上。 需要注意的是，如果弹窗中的内容过多，会导致内容溢出，因此我们需要在样式中设置overflow-y属性为auto，从而实现内容滚动的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值