很棒的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更换文章内容与改变字体大小代码
Sep 30 Javascript
jquery中load方法的用法及注意事项说明
Feb 22 Javascript
JS和函数式语言的三特性
Mar 05 Javascript
javascript实现很浪漫的气泡冒出特效
Sep 05 Javascript
Javascript中的几种继承方式对比分析
Mar 22 Javascript
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
微信小程序收藏功能的实现代码
Jun 12 Javascript
D3.js实现拓扑图的示例代码
Jun 30 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
小程序实现按下录音松开识别语音
Nov 22 Javascript
详解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
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
PHP基础知识介绍
2013/09/17 PHP
PHP模板解析类实例
2015/07/09 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
Jquery取得iframe下内容的方法
2013/11/18 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
快速处理vue渲染前的显示问题
2018/03/05 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
vue keep-alive的简单总结
2021/01/25 Vue.js
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
Python 从相对路径下import的方法
2018/12/04 Python
NumPy中的维度Axis详解
2019/11/26 Python
python传到前端的数据,双引号被转义的问题
2020/04/03 Python
Python实现画图软件功能方法详解
2020/07/28 Python
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
挪威手表购物网站:Klokker
2016/09/19 全球购物
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
某公司部分笔试题
2013/11/05 面试题
人事部主管岗位职责
2013/12/26 职场文书
简短大学毕业感言
2014/01/18 职场文书
出差报告怎么写
2014/11/06 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
2015年妇女工作总结
2015/05/14 职场文书
读书笔记怎么写
2015/07/01 职场文书
工作报告范文
2019/06/20 职场文书
Python 读写 Matlab Mat 格式数据的操作
2021/05/19 Python