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 相关文章推荐
新浪中用来显示flash的函数
Apr 02 Javascript
使用JavaScript和C#中获得referer
Nov 14 Javascript
面向切面编程(AOP)的理解
May 01 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 Javascript
浅谈Redux中间件的实践
Jul 27 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
May 28 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 Javascript
javascript实现用户必须勾选协议实例讲解
Mar 24 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
图书管理程序(三)
2006/10/09 PHP
JS 网站性能优化笔记
2011/05/24 PHP
PHP求小于1000的所有水仙花数的代码
2012/01/10 PHP
zf框架db类的分页示例分享
2014/03/14 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
基于jQuery实现模拟页面加载进度条
2013/04/01 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
如何优雅地取消 JavaScript 异步任务
2020/03/22 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
python多线程用法实例详解
2015/01/15 Python
详解python中executemany和序列的使用方法
2017/08/12 Python
python好玩的项目—色情图片识别代码分享
2017/11/07 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
django云端留言板实例详解
2019/07/22 Python
keras导入weights方式
2020/06/12 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
python 如何引入协程和原理分析
2020/11/30 Python
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
九年级数学教学反思
2014/02/02 职场文书
就业表自我评价分享
2014/02/06 职场文书
环保建议书400字
2014/05/14 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
廉洁自律证明
2015/06/24 职场文书
领导视察通讯稿
2015/07/18 职场文书
和领导吃饭祝酒词
2015/08/11 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js
Nginx配置根据url参数重定向
2022/04/11 Servers