很棒的vue弹窗组件


Posted in Javascript onMay 24, 2017

弹窗是一个项目必备的复用利器,所以封装起来,保证项目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 相关文章推荐
jquery ajax 简单范例(界面+后台)
Nov 19 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
javascript实现校验文件上传控件实例
Apr 20 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
Sep 06 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
Google 地图控件集详解及实例代码
Aug 06 Javascript
JS原型链 详解及示例代码
Sep 06 Javascript
JS与jQuery实现隔行变色的方法
Sep 09 Javascript
微信小程序商品详情页的底部弹出框效果
Nov 16 Javascript
js实现打字小游戏
Dec 17 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 Javascript
vue+iview实现手机号分段输入框
Mar 25 Vue.js
详解Vue使用命令行搭建单页面应用
May 24 #Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 #Javascript
微信小程序 支付功能(前端)的实现
May 24 #Javascript
微信小程序 选项卡的简单实例
May 24 #Javascript
JS回调函数基本定义与用法实例分析
May 24 #Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 #jQuery
详解前后端分离之VueJS前端
May 24 #Javascript
You might like
php实现计数器方法小结
2015/01/05 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
PHP创建对象的六种方式实例总结
2019/06/27 PHP
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
AngularJS入门教程(一):静态模板
2014/12/06 Javascript
使用js画图之画切线
2015/01/12 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
DOM操作一些常用的属性汇总
2015/03/13 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
8个有意思的JavaScript面试题
2019/07/30 Javascript
用Python的urllib库提交WEB表单
2009/02/24 Python
Python探索之创建二叉树
2017/10/25 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
Python如何将装饰器定义为类
2020/07/30 Python
python 线程的五个状态
2020/09/22 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
纯CSS3实现滚动的齿轮动画效果
2014/06/05 HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
数据库笔试题
2013/05/09 面试题
限期整改通知书
2015/04/22 职场文书
公司欠款证明
2015/06/24 职场文书
mysql幻读详解实例以及解决办法
2022/06/16 MySQL