vue弹窗组件使用方法


Posted in Javascript onApril 28, 2018

本文实例为大家分享了vue弹窗组件的具体代码,供大家参考,具体内容如下

弹窗是一个项目必备的复用利器,所以封装起来,保证项目ui一致,是很有必要的。学了一段时间vue,想想还是用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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
类之Prototype.js学习
Jun 13 Javascript
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
Nov 11 Javascript
jquery判断输入密码两次是否相等
Apr 22 Javascript
JavaScript设计模式初探
Jan 07 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
May 11 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
extjs简介_动力节点Java学院整理
Jul 17 Javascript
Vue组件中的data必须是一个function的原因浅析
Sep 03 Javascript
如何使用Javascript中的this关键字
May 28 Javascript
vue 遮罩层阻止默认滚动事件操作
Jul 28 Javascript
学习Vue组件实例
Apr 28 #Javascript
vue弹窗消息组件的使用方法
Sep 24 #Javascript
layui实现动态和静态分页
Apr 28 #Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 #Javascript
Vue实现点击时间获取时间段查询功能
Aug 21 #Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 #Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 #Javascript
You might like
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
如何在PHP中使用Oracle数据库(1)
2006/10/09 PHP
一些PHP写的小东西
2006/12/06 PHP
分享php邮件管理器源码
2016/01/06 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
JS实现生成会变大变小的圆环实例
2015/08/05 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
js面向对象的写法
2016/02/19 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
js实现鼠标跟随运动效果
2020/08/02 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
Vue路由权限控制解析
2020/11/09 Javascript
python字典基本操作实例分析
2015/07/11 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
葡萄牙语专业个人求职信
2013/12/10 职场文书
酒吧创业计划书
2014/01/18 职场文书
高中毕业自我评价
2014/02/08 职场文书
小区文明倡议书
2014/05/16 职场文书
大专生求职信
2014/06/29 职场文书
教学改革问题查摆整改措施
2014/09/27 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
大足石刻导游词
2015/02/02 职场文书