当前位置: 首页 > 编程笔记 >

很棒的vue弹窗组件

苏乐
2023-03-14
本文向大家介绍很棒的vue弹窗组件,包括了很棒的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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍很棒的Android弹幕效果实例,包括了很棒的Android弹幕效果实例的使用技巧和注意事项,需要的朋友参考一下 很多项目需要用到弹幕效果,尤其是在播放视频的时候需要一起显示别人发的弹幕,也包括自己的发的。 今天就试着写了一下这个效果。 思路就是将从右往左的动画效果,字体内容,字体大小,弹幕平移速度等属性一起与TextView封装成BarrageItem,并将控制效果与Barrage

  • 本文向大家介绍vue弹窗组件使用方法,包括了vue弹窗组件使用方法的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了vue弹窗组件的具体代码,供大家参考,具体内容如下 弹窗是一个项目必备的复用利器,所以封装起来,保证项目ui一致,是很有必要的。学了一段时间vue,想想还是用vue写一下吧。用的很小白,但是会写出来了,说明我也有进步一丢丢了。继续加油…. 代码贴图如下,样式比较丑,不要介

  • 本文向大家介绍很棒的一组js图片轮播特效,包括了很棒的一组js图片轮播特效的使用技巧和注意事项,需要的朋友参考一下 大家经常在网页中使用轮播效果,本文为大家分享的是一组图片轮播特效,希望大家喜欢 先看一眼效果图: 代码: 精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍Vue $mount实战之实现消息弹窗组件,包括了Vue $mount实战之实现消息弹窗组件的使用技巧和注意事项,需要的朋友参考一下 之前的项目一直在使用Element-UI框架,element中的Notification、Message组件使用时不需要在html写标签,而是使用js调用。那时就很疑惑,为什么element ui使用this.$notify、this.$message

  • 我想要的是用raphaeljs创建一个简单的圆圈,里面有Facebook的“F”(这也将用于其他类似的情况)。“F”符号将由Font-Awesome生成。 我所做的(没有工作)是使用css和/或将字体家族设置为raphael属性。 代码如下: 这里也有一把小提琴,让你的生活更轻松。据我所见,问题是raphaels将字符放置在文本节点内的tspan中,因此无法对其进行解码。谁有办法克服这个问题?

  • 问题内容: 按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实,参考或专业知识的支持,但是这个问题可能会引起辩论,争论,民意调查或扩展讨论。如果您认为此问题可以解决并且可以重新提出,请访问帮助中心以获取指导。 7年前关闭。 我真的很想学习C。什么是很好的教程? 问题答案: C编程语言(通常称为“ K&R”)几乎被普遍认为是学习C的最佳资源。