很棒的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中bind()方法用法实例
Jan 19 Javascript
jQuery中triggerHandler()方法用法实例
Jan 19 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
JQuery datepicker 用法详解
Dec 25 Javascript
微信小程序 Flex布局详解
Oct 09 Javascript
JavaScript中for循环的几种写法与效率总结
Feb 03 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
微信小程序实现展示评分结果功能
Feb 15 Javascript
在vue中使用防抖函数组件操作
Jul 26 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 Javascript
Vue scoped及deep使用方法解析
Aug 01 Javascript
vue 子组件和父组件传值的示例
Sep 11 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
php字符串截取问题
2006/11/28 PHP
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
php多任务程序实例解析
2014/07/19 PHP
PHP大神的十大优良习惯
2016/09/14 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
2013/04/11 Javascript
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
JQuery表单元素取值赋值方法总结
2020/05/12 jQuery
Vue+Element-U实现分页显示效果
2020/11/15 Javascript
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
Python实现数字的格式化输出
2020/08/01 Python
Django xadmin安装及使用详解
2020/10/26 Python
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
医学类导师推荐信范文
2013/11/19 职场文书
优秀的茶餐厅创业计划书
2014/01/03 职场文书
家属慰问信
2015/02/14 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书