精华内容
下载资源
问答
  • 使用vue2.0实现自定义弹窗指令,当标签有该指令时,点击标签可以弹出弹窗。下面通过实例代码给大家介绍Vue自定义弹窗指令的相关知识,感兴趣的朋友一起看看吧
  • 具体参考博客:
  • 主要介绍了Vue自定义全局弹窗组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue 自定义弹窗

    2020-09-25 16:46:31
    vue 自定义弹窗 <template> <div id="demo"> <!-- 随便写个点击事件,把model设为true即可 --> <!-- 自定义提示框 --> <div class="model" @touchmove.prevent v-if="model"> ...

    vue 自定义弹窗

    <template>
    	<div id="demo">
    		<!-- 随便写个点击事件,把model设为true即可 -->
    		<!-- 自定义提示框 -->
    		<div class="model" @touchmove.prevent v-if="model">
    			<div class="box">
    				这里可以放弹窗的内容
    			</div>
    		</div>
    	</div>
    </template>
    
    <script>
    	export default {
    		name: 'demo',
    		data(){
    			return {
    				model: false,
    			}
    		},
    		methods:{
    			<!-- 1.页面中设置一个点击事件,把model的值改成true即可 -->
    			<!-- 2.自定义弹窗,背景可能会滑动,要禁止背景滑动的话,添加@touchmove.prevent这个即可.-->
    			<!-- @touchmove.prevent : 禁止背景滑动 -->
    		},
    		mounted() {}
    	}
    </script>
    <style scoped lang="less" type="text/less">
    #dome{
    	width: 7.5rem; height: 100%; background-color: #fff;
    	.model{
    		width: 7.5rem; height: 100vh;
    		position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,0.6); z-index: 100;
    		.box{
    			width: 5.86rem;
    			height: 3.5rem;
    			background:rgba(255,255,255,1);
    			border-radius: 0.2rem;
    			margin-left: 0.82rem;
    			display: flex; justify-content: space-around; flex-direction: column;
    			position: fixed; top: 3.5rem;
    		}
    	}
    }
    </style>
    

    完结,撒花.
    有问题请评论…
    每天进步一点点…
    对您有帮助的话,可以点赞,收藏哦,土豪可以随意打赏!

    展开全文
  • vue 自定义弹窗的使用

    2020-11-25 10:53:02
    第一步:在文件夹 components里面新建一个文件夹 表示控件名称 CommentDialog,我的名字,然后在这个文件夹里面新建一个index.vue文件 第二步: index.vue 文件的内容 <template> <div class="pop-...

    这个文章 完全是写给自己用,方便自己后面开发,大部分借鉴他人的demo。参考地址:https://blog.csdn.net/qq_32442967/article/details/107343611

    第一步:在文件夹 components里面新建一个文件夹 表示控件名称 CommentDialog,我的名字,然后在这个文件夹里面新建一个index.vue文件

    第二步:
    index.vue 文件的内容
    <template>
      <div class="pop-container">
        <div ref="popRef" :style="{width: popWidth + 'px'}" :class="{'maxHeight7': !isFull}" class="container">
          <div class="top">
            <h3>{{ title }}</h3>
            <div>
              <i v-if="fullScreenIcon" class="el-icon-full-screen el-icon-tools" @click="isFullScreen"/>
              <i class="el-icon-close el-icon-tools" @click="closePop"/>
            </div>
          </div>
          <div :class="{'maxHeight5': !isFull}" class="main-container">
            <slot/>
            <div v-if="btnShow" class="btn-content">
              <el-button size="small" @click="closePop">{{ closeBtn }}</el-button>
              <el-button size="small" type="primary" @click="submitPop">{{ submitBtn }}</el-button>
            </div>
          </div>
        </div>
      </div>
    </template>

    <script>
      export default {
        name: 'popContent',
        props: {
          title: {
            type: String,
            default: ''
          },
          fullScreenIcon: { // 是否显示按钮
            type: Boolean,
            default: false
          },
          btnShow: { // 是否显示按钮
            type: Boolean,
            default: true
          },
          closeBtn: { // 关闭按钮-文字
            type: String,
            default: '取消'
          },
          submitBtn: { // 确定按钮-文字
            type: String,
            default: '确定'
          },
          popWidth: { // 弹出层宽度
            type: Number,
            default: 400
          }
        },
        data() {
          return {
            isFull: false
          }
        },
        created() {
          const that = this
          window.onresize = function() {
            if (!checkFull()) {
              // 要执行的动作
              that.isFull = false
            }
          }
          function checkFull() {
            var isFull =
              document.fullscreenElement ||
              document.mozFullScreenElement ||
              document.webkitFullscreenElement
            // to fix : false || undefined == undefined
            if (isFull === undefined) isFull = false
            return isFull
          }
        },
        methods: {
          closePop() {
            this.$emit('closePop')
          },
          submitPop() {
            this.$emit('submitPop')
          },
          isFullScreen() {
            if (!this.isFull) {
              this.$refs.popRef.requestFullscreen()
            } else {
              document.exitFullscreen()
            }
            this.isFull = !this.isFull
          }
        }
      }
    </script>
    <style lang="scss" scoped>
      .pop-container {
        position: fixed;
        left: 0;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.55);
        overflow: auto;
        z-index: 2000;
        .container{
          background-color: #FFFFFF;
          border-radius: 4px;
          overflow: auto;
          .top{
            height: 46px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #EEEFF1;
            h3{
              font-size: 14px;
              color: #283550;
              padding-left: 20px;
              position: relative;
              &:after{
                position: absolute;
                top: 0;
                left: 0;
                width: 6px;
                height: 100%;
                display: block;
                content: '';
                background: #17caaa;
              }
            }
            .el-icon-tools{
              color: #AFAFAF;
              font-size: 20px;
              font-weight: bold;
              cursor: pointer;
              margin-right: 16px;
            }
          }
          .main-container{
            padding: 15px 20px;
            overflow: auto;
            .btn-content{
              float: right;
              margin-top: 15px
            }
          }
        }
      }
      .maxHeight7{
        max-height: 700px
      }
      .maxHeight5{
        max-height: 500px
      }
    </style>
    <!--
    弹出框地址 参考地址
    https://blog.csdn.net/qq_32442967/article/details/107343611
    -->

    第三步:引用
    main.js文件中 

    // 全局组件挂载
    import CommentDialog from "@/components/CommentDialog";
    Vue.component('CommentDialog', CommentDialog)

    布局文件的使用
      <CommentDialog
          v-if="dialogVisibleScore"
          :pop-width="1000"
          :full-screen-icon="true"
          :btn-show="false"
          title="动态(序号)评论管理"
          @closePop="dialogVisibleScore = false">
          <div>
            完成
          </div>
        </CommentDialog>

    展开全文
  • * 自定义指令 v-dialogDrag: 弹窗拖拽 * @author sunWei * @create 2019-08-01 */ Vue.directive ( 'dialogDrag' , { bind ( el, binding, vnode, oldVnode ) { const dialogHeaderEl = el....

    在使用element-UI时,使用了dialog弹框,但是文档里没有拖动dialog的属性,但是现在需要这个功能,其实我们知道原生是可以写拖动的,那么就自定义一个指令v-dialogDrag吧。
    首先写一个el-dialog-drag.js文件:

    import Vue from 'vue';
    /**
     * 自定义指令 v-dialogDrag: 弹窗拖拽
     * @author sunWei
     * @create 2019-08-01
     */
    Vue.directive('dialogDrag', {
        bind(el, binding, vnode, oldVnode) {
            const dialogHeaderEl = el.querySelector('.el-dialog__header');
            const dragDom = el.querySelector('.el-dialog');
            dialogHeaderEl.style.cursor = 'move';
            // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
            const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
            dialogHeaderEl.onmousedown = (e) => {
                // 鼠标按下,计算当前元素距离可视区的距离
                const disX = e.clientX - dialogHeaderEl.offsetLeft;
                const disY = e.clientY - dialogHeaderEl.offsetTop;
                // 获取到的值带px 正则匹配替换
                let styL, styT;
                // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
                if(sty.left.includes('%')) {
                    styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
                    styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
                }else {
                    styL = +sty.left.replace(/\px/g, '');
                    styT = +sty.top.replace(/\px/g, '');
                };
                document.onmousemove = function (e) {
                    // 通过事件委托,计算移动的距离 
                    const l = e.clientX - disX;
                    const t = e.clientY - disY;
                    // 移动当前元素  
                    dragDom.style.left = `${l + styL}px`;
                    dragDom.style.top = `${t + styT}px`;
                    //将此时的位置传出去
                    //binding.value({x:e.pageX,y:e.pageY})
                };
                document.onmouseup = function (e) {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            }  
        }
    })
    // v-dialogDragWidth: 弹窗宽度拖大 拖小
    Vue.directive('dialogDragWidth', {
        bind(el, binding, vnode, oldVnode) {
            const dragDom = binding.value.$el.querySelector('.el-dialog');
            el.onmousedown = (e) => {
                // 鼠标按下,计算当前元素距离可视区的距离
                const disX = e.clientX - el.offsetLeft;
                document.onmousemove = function (e) {
                    e.preventDefault(); // 移动时禁用默认事件
                    // 通过事件委托,计算移动的距离 
                    const l = e.clientX - disX;
                    dragDom.style.width = `${l}px`;
                };
                document.onmouseup = function (e) {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            }  
        }
    })
    

    在main.js中引入:

    // 引入自定义指令--窗口拖动
    import '@/directive/el-dialog-drag.js'
    

    在业务组件里使用:
    在这里插入图片描述

    展开全文
  • vue自定义弹窗组件

    千次阅读 2019-07-17 16:09:06
    在平时写页面的时候,一些页面总是需要到弹窗,可以将它写成组件的形式,考虑到有不一样的弹窗,可以按照下面的来写: 新建popup.vue, <template> <div class="jl_dialog" :class="{hide:!value}"> ...

    在平时写页面的时候,一些页面总是需要到弹窗,可以将它写成组件的形式,考虑到有不一样的弹窗,可以按照下面的来写:
    新建popup.vue,

    <template>
      <div class="jl_dialog" :class="{hide:!value}">
        <div class="UImask" @click="maskHandle"></div>
        <div class="UIdialog">
          <div class="UIdialog_hd"><strong class="UIdialogTitle">{{title}}</strong></div>
          <div class="UIdialog_bd">
            <slot>弹窗内容</slot>
          </div>
          <div class="UIdialog_ft">
            <span v-if="cancel" class="UIdialog_btn UIdialog_btn_default left" @click="onCancel" >{{cancelVal}}</span>
            <span v-if="confirm" class="UIdialog_btn UIdialog_btn_default right " :class={UIdialog_btn_disabled:isDisabled} @click="onConfirm">{{confirmVal}}</span>
          </div>
        </div>
      </div>
    </template>
    

    首先先来普及一下知识点:
    1.弹窗组件通过slot插槽接受从父组件那里传过来弹窗内容。
    2.弹窗组件通过props接收从父组件传过来的值
    3.通过父组件传进来的props控制组件的显示与隐藏,子组件关闭时通过事件$emit触发父组件改变值。
    在script里面

    export default {
        name: 'jlDialog',
        props: {
          value: {
            type: Boolean,
            default: false
          },
          confirm: {
            type: Boolean,
            default: false
          },
          cancel: {
            type: Boolean,
            default: false
          },
          title: {
            default: null
          },
          confirmVal: {
            type: String,
            default: '是'
          },
          cancelVal: {
            type: String,
            default: '否'
          },
          isDisabled: {
            type: Boolean,
            default: false
          },
          maskHide:{
            type: Boolean,
            default:true
          }
        },
        methods: {
          maskHandle(){
              if(this.maskHide){
                  console.log(2222)
                  this.$emit('input',false)
              }
          },
          onConfirm(){
              if(!this.isDisabled){
                  this.$emit('onConfirm')
                  this.$emit('input', false)
              }
          },
          onCancel(){
            this.$emit('onCancel')
            this.$emit('input', false)
          }
        }
      }
    

    因为是公共的组件,在main.js里面统一引入:

    import jlPopup from './CustomComponents/Popup.vue';
    Vue.component('jlPopup',jlPopup )
    

    在其他组件里面可以这样使用:

    <jlPopup :maskHide=false v-model="showpoup" @onConfirm="onConfirm" @onCancel="showDialog=false" confirm cancel cancelVal="取消" confirmVal="确定">
                <h3 style="color: #ee0f06">啦啦啦</h3>
        </jlPopup>
    

    以下的为css

    <style lang="less">
      @weuiDialogBackgroundColor: #FFFFFF;
      @weuiDialogLineColor: #D5D5D6;
      @weuiDialogLinkColor: #3CC51F;
      @weuiDialogLinkActiveBc: #EEEEEE;
      @weuiDialogGapWidth: 1.6em;
      @weuiTextColorGray: #4a4a4a;
        .UImask{
            position: fixed;
            z-index: 1000;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            background: rgba(0, 0, 0, .6);
        }
       .UIdialog{
            text-align: left;
           position: fixed;
           z-index: 5000;
           width: 80%;
           max-width: 300px;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           background-color:@weuiDialogBackgroundColor;
           text-align: center;
           border-radius: 8px;
           overflow: hidden;
           border: 1px solid @weuiDialogLinkActiveBc;
       }
        .UIdialog_hd {
          padding: 1.3em @weuiDialogGapWidth .5em;
        }
        .UIdialogTitle {
          font-weight: 400;
          font-size: 18px;
        }
        .UIdialog_bd {
          padding: 0 @weuiDialogGapWidth .8em;
          min-height: 40px;
          font-size: 15px;
          line-height: 1.3;
          word-wrap: break-word;
          word-break: break-all;
          color: @weuiTextColorGray;
          &:first-child{
            padding:2.7em 20px 1.7em;
            color:#353535;
          }
        }
        .UIdialog_ft {
          position: relative;
          line-height: 48px;
          font-size: 18px;
          display: flex;
          border-top:1px solid @weuiDialogLineColor ;
          &:after {
            content: " ";
            //.setTopLine(@weuiDialogLineColor);
          }
        }
        .UIdialog_btn {
          display: block;
          flex: 1;
          color: @weuiDialogLinkColor;
          text-decoration: none;
          //.setTapColor();
          /*&:active {*/
            /*<!--background-color: @weuiDialogLinkActiveBc;-->*/
          /*}*/
          position: relative;
          &:first-child {
            border-right: 1px solid @weuiDialogLineColor;
            &:after {
              display: none;
            }
          }
        }
        .left {
          color: #353535;
        }
        .right{
          background-color: #2c5fc3;
          color: #FFFFFF;
        }
        .UIdialog_btn_disabled{
          background-color: #d7d7d7;
          color: #a4a4a4;
        }
    
        .weui-skin_android{
          .UIdialog{
            text-align: left;
            box-shadow: 0 6px 30px 0 rgba(0, 0, 0, .1);
          }
          .UIdialogTitle{
            font-size: 21px;
          }
          .UIdialog_hd{
            text-align: left;
          }
          .UIdialog_bd{
            color:@weuiTextColorGray;
            padding:.25em @weuiDialogGapWidth 2em;
            font-size: 17px;
            text-align: left;
            &:first-child{
              padding:1.6em @weuiDialogGapWidth 2em;
              color:#353535;
            }
          }
          .UIdialog_ft{
            display: block;
            text-align: right;
            line-height: 42px;
            font-size: 16px;
            padding:0 @weuiDialogGapWidth .7em;
            &:after{
              display: none;
            }
          }
          .UIdialog_btn{
            display: inline-block;
            vertical-align: top;
            padding:0 .8em;
            &.left{
              color: @weuiDialogLinkColor
            }
            &:after{
              display: none;
            }
    
            &:active{
              background-color: rgba(0,0,0,.06);
            }
            &:visited{
              background-color: rgba(0,0,0,.06);
            }
            &:last-child{
              margin-right: -.8em;
            }
          }
          .left {
            color: #353535;
          }
          .right{
            background-color: #2c5fc3;
            color: #FFFFFF;
          }
          .UIdialog_btn_disabled{
            background-color: #d7d7d7;
            color: #a4a4a4;
          }
        }
    
        @media screen and (min-width: 1024px) {
          .UIdialog {
            width: 35%;
          }
        }
    
    </style>



    作者:jialing_cccwei
    链接:https://www.jianshu.com/p/d3ae9efa6b40
    来源:简书
    简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

    展开全文
  • vue 自定义弹窗组件

    2021-07-21 12:30:46
    父组件 <template> <div> <p @click="onDelete"> 打开 </p> <!-- 弹框 --> <code-dialog :status.sync="deleteDialogStatus" /> </div> ... </script> 弹窗组件具体可以根据业务需求 <template> <div> ...
  • 利用vuex搭建vue自定义弹窗

    千次阅读 2018-05-31 10:13:14
    1、在vue环境下2、使用vuex3、说多没用,来代码最实际【因为我也是初学】自己写了个自定义弹窗组件,起名wrap.vue:我在某个组件引入这个弹窗组件:下图更精彩自定义关闭按钮触发关闭弹窗的事件其实和前面的组件内置...
  • 1、新建一个文件,放弹窗函数 modal.js /** * 提示弹窗 */ export default { // 提示弹窗,无按钮,延迟关闭 toast: function (msg, duration) { duration = isNaN(duration) ? 2000 : duration; var m = ...
  • 这里的弹窗为ant vue源码执行自Modal.js 弹窗代码: handleCancel和handleOk事件都为this.close(),功能相同,只需要显示一个。 解决办法: 这里可以使用slot=“footer”自定义按钮 <div slot="footer"> <...
  • 自定义弹窗拖拽指令 第一步: src目录下新建目录directive,然后在directive目录下的新建文件el-drag-dialog.js,在该文件里实现了拖拽逻辑。 el-drag-dialog.js文件代码如下: export default { bind(el, binding, ...
  • vue实现自定义弹窗

    千次阅读 2019-09-26 10:41:38
    在component下面新建一个toast文件夹,创建toast.vue和toast.js文件 toast.vue <template> <div class="toast" :class="type? `toast--${type}`:''"> <p>{{content}}</p> </div> &...
  • 话不多说,先上代码,习惯性在components里定义自己的公共组件,名称看个人习惯,我的叫做commonConfirm,定义一个对应的.vue文件以及index.js 首先你的commonConfirm.vue 文件 <template> <transition...
  • vue自定义全局弹窗组件 组件目录如下 dialogBox文件代码如下: <!-- 弹窗dialog.vue文件 --> <template> <div class="dialog_box" v-if="show"> <div class="dialog_wrap"> <img v-...
  • 首先和普通组件一样定义一个自定义组件在components下面:CusConfirm <template> <transition name="fade"> <div class="cus-confirm-mask" v-if="flag" @click="cancel"> <d...
  • vue 全局弹窗内容自定义

    千次阅读 2020-09-11 15:36:08
    在 src/components 下创建公共组件 visible.vue visible.vue <!-- 二次确认组件 --> <template> <section class='visible'> <el-dialog :visible.sync="visible" top="35v.

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,142
精华内容 2,056
关键字:

vue自定义弹窗

vue 订阅
友情链接: MA.rar