精华内容
下载资源
问答
  • vue弹窗组件

    2019-05-21 11:03:51
    基于VUE的input双向绑定机制 // 弹窗 <template> <div> <div v-show="visible" :value="value" class="mod"> <div class="mod_body"> <div v-if="useClose" class="close" @c...

    基于VUE的input双向绑定机制

    // 弹窗
    <template>
      <div>
        <div v-show="visible" :value="value" class="mod">
          <div class="mod_body">
            <div v-if="useClose" class="close" @click="cancel">X</div>
            <div class="mod_title" v-if="title">{{title}}</div>
            <div class="slot">
              <slot/>
            </div>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      components: {},
      props: {
        value: {
          type: Boolean,
          default: false
        },
        // 是否出现关闭
        useClose: {
          type: Boolean,
          default: true
        },
        //标题
        title: {
          type: String
        }
      },
      data() {
        return {
          visible: false,
          scrollTop: 0
        };
      },
      watch: {
        value(val) {
          this.visible = val;
          const body = window.document.body;
          if (val) {
            this.scrollTop =
              document.body.scrollTop || document.documentElement.scrollTop;
            body.style.position = "fixed";
            body.style.width = "100%";
            body.style.top = -this.scrollTop + "px";
          } else {
            body.style.position = "relative";
            body.style.top = 0;
            document.body.scrollTop = this.scrollTop;
          }
        },
        visible(val) {
          this.$emit("input", val);
        }
      },
      mounted() {
        if (this.value) {
          this.visible = true;
        }
      },
      methods: {
        cancel() {
          this.visible = false;
        }
      }
    };
    </script>
    
    <style scoped lang="scss" rel="stylesheet/scss" >
    // @import '~@/assets/css/style.less';
    .mod {
      position: fixed;
      top: 0;
      bottom: 0;
      width: 100%;
      //   height: 100vh;
      background-color: rgba(0, 0, 0, 0.73);
      z-index: 999;
      .mod_body {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-60%);
        margin-left: -35%;
        border-radius: 6px;
        width: 70%;
        background-color: #fff;
        padding-bottom: 20px;
        .close {
          position: absolute;
          top: 0;
          right: 0;
          width: 38px;
          height: 38px;
          //   background-image: url('~@/assets/image/red-pack/close.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
        .slot {
          padding: 0 20px;
          height: 72%;
          overflow-x: hidden;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
        }
      }
      .mod_title {
        font-size: 16px;
        color: #4a4a4a;
        text-align: center;
        line-height: 23px;
        padding: 38px 25px 0 25px;
      }
    }
    </style>
    

     

    使用

    <template>    
      <alert-mod v-model="showModal" :title="'xxx_title'">xxx_body</alert-mod>
    </template>
    
    import alertMod from "@/alertMod.vue";
    export default {
      components: { alertMod },
      data() {
        return {
          showModal: true
        };
      },
    }
    展开全文
  • 样式差不多只是弹窗中字不一样的组件,可以用一下方式封装,防止每次都要在父组件中重新给子组件重新赋值,而且还可以通过回调函数都方式返回子组件中都返回值 <template> <el-dialog custom-class=...

    CustomAlert.vue

    样式差不多只是弹窗中字不一样的组件,可以用一下方式封装,防止每次都要在父组件中重新给子组件重新赋值,而且还可以通过回调函数都方式返回子组件中都返回值

    <template>
        <el-dialog
            custom-class="component custom-alert"
            :title="localTitle"
            :visible="isShow"
            @update:visible="e => { isShow = e }"
            width="600px">
            <span v-if="localContent">{{localContent}}</span>
            <span slot="footer">
                <el-button @click="isShow = false">{{localCancelBtn}}</el-button>
                <el-button type="primary" @click="callBack(true), isShow = false">{{localOkBtn}}</el-button>
            </span>
        </el-dialog>
    </template>
    
    <script>
    export default {
        name: 'CustomAlert',
        props: {
            titile: {
                type: String,
                default: '提示'
            },
            content: {
                type: String
            },
            okBtn: {
                type: String,
                default: '确定'
            },
            cancelBtn: {
                type: String,
                default: '取消'
            }
        },
        data: () => ({
            isShow: false,
            localTitle: '',
            localContent: '',
            localOkBtn: '',
            localCancelBtn: ''
        }),
        methods: {
            show ({ title = this.title, content = this.content, okBtn = this.okBtn, cancelBtn = this.cancelBtn }, cb) {
                this.localTitle = title
                this.localContent = content
                this.localOkBtn = okBtn
                this.localCancelBtn = cancelBtn
                this.isShow = true
                
                // 子组件返回值
                this.callBack = cb
            }
        }
    }
    </script>
    
    <style lang="scss">
    .component.custom-alert {}
    </style>
    

    这样使用

    每次调用都时候给子组件传递需要显示都值,或者需要异步加载数据都 id,并且通过一个回调函数接收子组件的返回值

    <template>
        <div class="app">
            <el-button type="primary" @click="$refs.AlertEl.show({
                title: '是否删除',
                content: '删除当前项目,此操作不可逆!',
                cancelBtn: '暂不删除',
                okBtn: '删除'
            }, deleteEvent)">删除</el-button>
            <el-button type="primary" @click="$refs.AlertEl.show({
                title: '是否取消',
                cancelBtn: '暂不取消',
                okBtn: '取消'
            }, cancelEvent)">取消</el-button>
            <custom-alert ref="AlertEl"></custom-alert>
        </div>
    </template>
    
    <script>
    import CustomAlert from './components/CustomAlert'
    
    export default {
        name: 'App',
        methods: {
            deleteEvent (status) {
                console.log('删除', status)
            },
            cancelEvent (status) {
                console.log('取消', status)
            }
        },
        components: {
            CustomAlert
        }
    }
    </script>
    
    <style>
    .app {}
    </style>
    
    展开全文
  • 弹窗组件一直是 web 开发中必备的,使用频率相当高,最常见的莫过于 alert,confirm,prompt .. 这些(曾经我们都会用alert来调试程序), 不同的组件库对于弹窗的处理也是不一样的。在开发时需要...
        

    最近是用 vue 开发了一套组件库 vue-carbon , 在开发过程对对于组件化的开发有一些感想,于是开始记录下这些。

    弹窗组件一直是 web 开发中必备的,使用频率相当高,最常见的莫过于 alert,confirm,prompt .. 这些(曾经我们都会用alert来调试程序), 不同的组件库对于弹窗的处理也是不一样的。在开发时需要考虑一下三点:

    1. 进入和弹出的动画效果。

    2. z-index 的控制

    3. overlay 遮盖层

    关于动画

    vue 对于动画的处理相对简单,给组件加入css transition 动画即可

    <template>
    <div class="modal" transition="modal-scale">
        <!--省略其它内容-->
    </div>
    </template>
    <script>
    // ...
    </script>
    <style>
    .modal-scale-transition{
      transition: transform,opacity .3s ease;
    }
    
    .modal-scale-enter,
    .modal-scale-leave {
        opacity: 0;
    }
    
    .modal-scale-enter {
      transform: scale(1.1);
    }
    .modal-scale-leave {
      transform: scale(0.8);
    }
    </style>

    外部可以由使用者自行控制,使用 v-if 或是 v-show 控制显示

    z-index 的控制

    关于z-index的控制,需要完成以下几点

    1. 保证弹出框的 z-index 足够高能使 其再最外层

    2. 后弹出的弹出框的 z-index 要比之前弹出的要高

    要满足以上两点, 我们需要以下代码实现

    const zIndex = 20141223  // 先预设较高值
    
    const getZIndex = function () {
        return zIndex++ // 每次获取之后 zindex 自动增加
    }

    然后绑定把 z-index 在组件上

    <template>
    <div class="modal" :style="{'z-index': zIndex}" transition="modal-scale">
        <!--省略其它内容-->
    </div>
    </template>
    <script>
    export default {
        data () {
            return {
                zIndex: getZIndex()
            }
        }
    }
    </script>

    overlay 遮盖层的控制

    遮盖层是弹窗组件中最难处理的部分, 一个完美的遮盖层的控制需要完成以下几点:

    1. 遮盖层和弹出层之间的动画需要并行

    2. 遮盖层的 z-index 要较小与弹出层

    3. 遮盖层的弹出时需要组件页面滚动

    4. 点击遮盖层需要给予弹出层反馈

    5. 保证整个页面最多只能有一个遮盖层(多个叠在一起会使遮盖层颜色加深)

    为了处理这些问题,也保证所有的弹出框组件不用每一个都解决,所以决定利用 vue 的 mixins 机制,将这些弹出层的公共逻辑封装层一个 mixin ,每个弹出框组件直接引用就好。

    vue-popup-mixin

    明确了上述所有的问题,开始开发 mixin, 首先需要一个 overlay (遮盖层组件) ;

    <template>
      <div class="overlay" @click="handlerClick" @touchmove="prevent" :style="style" transition="overlay-fade"></div>
    </template>
    <script>
    export default {
      props: {
        onClick: {
          type: Function
        },
        opacity: {
          type: Number,
          default: 0.4
        },
        color: {
          type: String,
          default: '#000'
        }
      },
      computed: {
        style () {
          return {
            'opacity': this.opacity,
            'background-color': this.color
          }
        }
      },
      methods: {
        prevent (event) {
          event.preventDefault()
          event.stopPropagation()
        },
        handlerClick () {
          if (this.onClick) {
            this.onClick()
          }
        }
      }
    }
    </script>
    <style lang="less">
    .overlay {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: #000;
      opacity: .4;
      z-index: 1000;
    }
    
    
    .overlay-fade-transition {
      transition: all .3s linear;
      &.overlay-fade-enter,
      &.overlay-fade-leave {
        opacity: 0 !important;
      }
    }
    </style>

    然后 需要一个 js 来管理 overlay 的显示和隐藏。

    import Vue from 'vue'
    import overlayOpt from '../overlay'  // 引入 overlay 组件
    const Overlay = Vue.extend(overlayOpt)
    
    const getDOM = function (dom) {
      if (dom.nodeType === 3) {
        dom = dom.nextElementSibling || dom.nextSibling
        getDOM(dom)
      }
      return dom
    }
    
    // z-index 控制
    const zIndex = 20141223  
    
    const getZIndex = function () {
        return zIndex++ 
    }
    // 管理
    const PopupManager = {
      instances: [],  // 用来储存所有的弹出层实例
      overlay: false,
      // 弹窗框打开时 调用此方法
      open (instance) {
        if (!instance || this.instances.indexOf(instance) !== -1) return
        
        // 当没有遮盖层时,显示遮盖层
        if (this.instances.length === 0) {
          this.showOverlay(instance.overlayColor, instance.overlayOpacity)
        }
        this.instances.push(instance) // 储存打开的弹出框组件
        this.changeOverlayStyle() // 控制不同弹出层 透明度和颜色
        
        // 给弹出层加上z-index
        const dom = getDOM(instance.$el)
        dom.style.zIndex = getZIndex()
      },
      // 弹出框关闭方法
      close (instance) {
        let index = this.instances.indexOf(instance)
        if (index === -1) return
        
        Vue.nextTick(() => {
          this.instances.splice(index, 1)
          
          // 当页面上没有弹出层了就关闭遮盖层
          if (this.instances.length === 0) {
            this.closeOverlay()
          }
          this.changeOverlayStyle()
        })
      },
      showOverlay (color, opacity) {
        let overlay = this.overlay = new Overlay({
          el: document.createElement('div')
        })
        const dom = getDOM(overlay.$el)
        dom.style.zIndex = getZIndex()
        overlay.color = color
        overlay.opacity = opacity
        overlay.onClick = this.handlerOverlayClick.bind(this)
        overlay.$appendTo(document.body)
    
        // 禁止页面滚动
        this.bodyOverflow = document.body.style.overflow
        document.body.style.overflow = 'hidden'
      },
      closeOverlay () {
        if (!this.overlay) return
        document.body.style.overflow = this.bodyOverflow
        let overlay = this.overlay
        this.overlay = null
        overlay.$remove(() => {
          overlay.$destroy()
        })
      },
      changeOverlayStyle () {
        if (!this.overlay || this.instances.length === 0) return
        const instance = this.instances[this.instances.length - 1]
        this.overlay.color = instance.overlayColor
        this.overlay.opacity = instance.overlayOpacity
      },
      // 遮盖层点击处理,会自动调用 弹出层的 overlayClick 方法
      handlerOverlayClick () {
        if (this.instances.length === 0) return
        const instance = this.instances[this.instances.length - 1]
        if (instance.overlayClick) {
          instance.overlayClick()
        }
      }
    }
    
    window.addEventListener('keydown', function (event) {
      if (event.keyCode === 27) { // ESC
        if (PopupManager.instances.length > 0) {
          const topInstance = PopupManager.instances[PopupManager.instances.length - 1]
          if (!topInstance) return
          if (topInstance.escPress) {
            topInstance.escPress()
          }
        }
      }
    })
    
    export default PopupManager

    最后再封装成一个 mixin

    import PopupManager from './popup-manager'
    
    export default {
      props: {
        show: {
          type: Boolean,
          default: false
        },
        // 是否显示遮盖层
        overlay: {
          type: Boolean,
          default: true
        },
        overlayOpacity: {
          type: Number,
          default: 0.4
        },
        overlayColor: {
          type: String,
          default: '#000'
        }
      },
      // 组件被挂载时会判断show的值开控制打开
      attached () {
        if (this.show && this.overlay) {
          PopupManager.open(this)
        }
      },
      // 组件被移除时关闭
      detached () {
        PopupManager.close(this)
      },
      watch: {
        show (val) {
          // 修改 show 值是调用对于的打开关闭方法
          if (val && this.overlay) {
            PopupManager.open(this)
          } else {
            PopupManager.close(this)
          }
        }
      },
      beforeDestroy () {
        PopupManager.close(this)
      }
    }
    

    使用

    以上所有的代码就完成了所有弹出层的共有逻辑, 使用时只需要当做一个mixin来加载即可

    <template>
      <div class="dialog"
        v-show="show"
        transition="dialog-fade">
        <div class="dialog-content">
          <slot></slot>
        </div>
      </div>
    </template>
    
    <style>
      .dialog {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        position: fixed;
        width: 90%;
      }
    
      .dialog-content {
        background: #fff;
        border-radius: 8px;
        padding: 20px;
        text-align: center;
      }
    
      .dialog-fade-transition {
        transition: opacity .3s linear;
      }
    
      .dialog-fade-enter,
      .dialog-fade-leave {
        opacity: 0;
      }
    </style>
    
    <script>
    import Popup from '../src'
    
    export default {
      mixins: [Popup],
      methods: {
        // 响应 overlay事件
        overlayClick () {
          this.show = false
        },
        // 响应 esc 按键事件
        escPress () {
          this.show = false
        }
      }
    }
    </script>

    项目地址 vue-popup-mixin

    展开全文
  • vue dialog 弹窗组件

    2020-09-29 17:26:49
    因为官方组件不是很好用所以自己写了一个弹窗组件 ```javascript <template> <!-- <transition name='slide-fade'> --> <view class="cu-modal show dialog" v-if="isShow"> ...

    因为官方组件不是很好用所以自己写了一个弹窗组件

    
    ```javascript
    <template>
    
    
    			<!-- <transition    name='slide-fade'> -->
    					<view class="cu-modal show  dialog" v-if="isShow">
    						<view class="cu-dialog">
    							<view class="cu-bar bg-white justify-end ">
    								<view class="content">{{text.title}}</view>
    							</view>
    							<view class="padding-xl">
    								{{text.message}}
    							</view>
    							<view class="cu-bar bg-white justify-end">
    								<view class="action">
    									<view>
    										<button class="cu-btn line-green text-green" @tap="hideModal">{{text.btn.concel}}</button>
    									</view>
    									<view>
    										<button class="cu-btn bg-green margin-left" @tap="addModal">{{text.btn.confirm}}</button>
    									</view>
    								</view>
    							</view>
    						</view>
    					</view>
    			</transition>
    	
    </template>
    
    <script>
    	export default {
    		data(){
    			return{
    				isShow:true,
    				text:{
    					title:"温馨提示",
    					message:"代码是写出来给人看的,附带能在机器上运行",
    					btn:{
    						concel:"取消",
    						confirm:"确定"
    					}
    				}
    			}
    		},
    		methods:{
    			hideModal(){
    			},
    			addModal(){
    			}
    		}
    	}
    </script>
    
    <style lang="less" scoped>
    		.slide-fade-enter-active {
    		  transition: all 3s ease;
    		}
    		.slide-fade-leave-active {
    		  transition: all 8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    		}
    		.slide-fade-enter, .slide-fade-leave-to
    		/* .slide-fade-leave-active for below version 2.1.8 */ {
    		  // transform: translateX(10px);
    		  opacity: 0;
    		}
    	.dialog{
    		position: fixed;
    		top: 0;
    		right: 0;
    		bottom: 0;
    		left: 0;
    		z-index: 1110;
    		text-align: center;
    		backface-visibility: hidden;
    		perspective: 2000rpx;
    		background: rgba(0, 0, 0, 0.6);
    		transition: all 0.3s ease-in-out 0s;
    		pointer-events: none;
    		opacity: 1;
    		transition-duration: 0.3s;
    		transform: scale(1);
    		overflow-x: hidden;
    		overflow-y: auto;
    		pointer-events: auto;
    		.cu-dialog {
    			position: relative;
    			display: inline-block;
    			vertical-align: middle;
    			margin-left: auto;
    			margin-right: auto;
    			width: 680rpx;
    			max-width: 100%;
    			background-color: #f8f8f8;
    			border-radius: 10rpx;
    			overflow: hidden;
    			top: 35%;
    			.cu-bar {
    				display: flex;
    				position: relative;
    				align-items: center;
    				min-height: 100rpx;
    				justify-content: space-between;
    				.content {
    					position: absolute;
    					text-align: center;
    					width: calc(100% - 340rpx);
    					left: 0;
    					right: 0;
    					bottom: 0;
    					top: 0;
    					margin: auto;
    					height: 60rpx;
    					font-size: 32rpx;
    					line-height: 60rpx;
    					cursor: none;
    					pointer-events: none;
    					text-overflow: ellipsis;
    					white-space: nowrap;
    					overflow: hidden;
    					}
    				.action {
    					width: 100%;
    				    display: flex;
    				    align-items: center;
    					flex-direction: row !important; 
    				    max-width: 100%;
    					padding: 20rpx 0;
    					box-sizing: border-box;
    					view{
    						flex: 1;
    						display: flex;
    						align-items: center;
    						justify-content: center;
    						.cu-btn {
    							position: relative;
    							border: 0px;
    							display: inline-flex;
    							align-items: center;
    							justify-content: center;
    							box-sizing: border-box;
    							padding: 0 30rpx;
    							font-size: 28rpx;
    							height: 64rpx;
    						}
    						.cu-btn[class*="line"] {  
    							    background-color: transparent;
    							}
    						.cu-btn:not([class*="bg-"]) {  //not 排除 bg-
    							    background-color: #f0f0f0;
    							}
    						.text-green, .line-green, .lines-green {
    							    color: #3b69ee;
    							}
    						.bg-green {
    							    background-color: #3b69ee;
    							    color: #ffffff;
    							}
    					}
    				}
    				.cu-bar .action:last-child {
    				    margin-right: 30px;
    				}
    				
    				.cu-bar .action:first-child {
    				    margin-left: 30rpx;
    				    font-size: 30rpx;
    				}
    			}
    			.bg-white {
    			    background-color: #ffffff;
    			    color: #666666;
    			}
    			.justify-end {
    			    justify-content: flex-end;
    			}
    			.padding-xl {
    			    padding: 50rpx;
    				font-size: 26rpx;
    			}
    			
    		}
    	}
    		
    	// .dialog{
    	// 	position: fixed;
    	// 	top: 0;
    	// 	left: 0;
    	// 	width: 100%;
    	// 	height: 100%;
    	// 	background-color: rgba(0,0,0,0.7);
    	// 	z-index: 999;
    	// 	.main{
    	// 		position: fixed;
    	// 		    top: 45%;
    	// 		    left: calc((100% - 640rpx) / 2);
    	// 		    width: 640rpx;
    	// 		    overflow: hidden;
    	// 		    font-size: 16px;
    	// 		    background-color: #fff;
    	// 		    border-radius: 16px;
    	// 		.title{
    			
    	// 				padding-top: 24rpx;
    	// 			    // font-weight:bold;
    	// 			    line-height: 48rpx;
    	// 			    text-align: center;
    	// 		}
    	// 		.message{
    	// 			max-height: 60vh;
    	// 			padding:28rpx 48rpx 48rpx;
    	// 			overflow-y: auto;
    	// 			font-size: 28rpx;
    	// 			line-height: 40rpx;
    	// 			white-space: pre-wrap;
    	// 			text-align: center;
    	// 			color: #646566;
    	// 		}
    	// 		.footer{
    	// 			display: flex;
    	// 			overflow: hidden;
    	// 			user-select: none;
    	// 			view{
    	// 				flex: 1;
    	// 				width: 100%;
    	// 				height: 80rpx;
    	// 				line-height: 80rpx;
    	// 				color: #323233;
    	// 				box-sizing: border-box;
    	// 				font-size: 32rpx;
    	// 				text-align: center;
    	// 				border-radius: 4rpx;
    	// 				border-top: 1px  solid #333333;
    	// 			}
    	// 		}
    	// 	}
    	// }	
    </style>
    
    

    js部分

    import Vue from "vue"
    
    import Dialog from "./dialog.vue"
    
    let commonDialog = Vue.extend(Dialog)
    
    let DialogFun = function ( text) {
    		return new Promise((resovle,reject)=>{
    			let comfirmDom = new commonDialog({
    				el:document.createElement('div')
    			})	
    			document.body.appendChild(
    		
    				comfirmDom.$el
    		
    			)
    			text ? comfirmDom.text= text  : comfirmDom.text = comfirmDom.text;
    				
    			comfirmDom.hideModal=()=>{
    				reject()
    				comfirmDom.isShow=false
    			}
    			comfirmDom.addModal=()=>{
    				resovle()
    				comfirmDom.isShow=false
    			}
    		})
    }
    export default DialogFun
    
    
    
    展开全文
  • 1.父组件引入并注册子组件 import BusinessDialog from '../../components/BusinessDialog' export default { components: { BusinessDialog ...business-dialog :dialog.sync="dialog"></bus
  • 最近公司有一个后台业务虽然也...这次业务中又遇到了弹窗的功能,所以只能手动写一个了(虽然说弹窗组件很简单,也是想自己总结一下,有不对的地方也请指出),一开始用传统的props,$emit但是觉得要接两个取消与确认的...
  • 具体参考博客:
  • 在ant-dialog中嵌套使用List的滚动加载功能,vue-infinite-scroll配合使用时,滚动和初始时,都无法触发loadmore 问题链接:https://github.com/ElemeFE/vue-infinite-scroll/issues/147、 1.弹窗启动时,未...
  • vue 开发弹窗组件

    2021-02-08 15:50:33
    弹窗组件A.vue <template> <!-- 最外层的父容器也是要固定定位 --> <div class="dialog" v-show='show'> <!-- 遮罩层 需要固定定位 --> <div class="mask"> <div class=...
  • vue组件弹窗 el-dialog

    千次阅读 2020-03-12 18:28:21
    将父组件的值通过props的方式传递给子组件弹窗组件通过computed的方式来获取值和设置新值,在set中调用$emit(‘update:porp’)方法 整个过程通过.sync来完成数据的双向流通 父组件 <template> <div ...
  • 之前是通过propus传递stt值,子组件监听这个stt值来控制dialog的现实和隐藏.关闭时在通过子组件更新父组件的(传递值stt)状态. 这个方法不可取,因为子组件更新父组件的状态,当父组件点击时(这个时候stt状态值应该为...
  • 主要介绍了Vue自定义全局弹窗组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 本文通过实例给大家讲解了vue的toast弹窗组件功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
  • vue自定义组件dialog

    千次阅读 2019-10-07 09:46:06
    自定义组件 dialog.vue源码: <template> <divclass="dialog"v-show="showMask"> <divclass="dialog-container"> <divclass="dialog-title">{{title}}</div>...
  • vue自定义弹窗组件

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

    2021-07-21 12:30:46
    组件 <template> <div> <p @click="onDelete"> 打开 </p> <!-- 弹框 --> <code-dialog :status.sync="deleteDialogStatus" /> </div> </template> <...
  • vue自定义全局弹窗组件 组件目录如下 dialogBox文件代码如下: <!-- 弹窗dialog.vue文件 --> <template> <div class="dialog_box" v-if="show"> <div class="dialog_wrap"> <img v-...
  • Vue自定义全局弹窗组件

    万次阅读 2019-05-27 11:58:20
    页面中会有很多时候需要弹窗提示,我们可以写一个弹窗组件,但是如果每个页面都引入这个组件,太麻烦了,所以我们将它变成全局组件,需要用的时候直接通过JS调用即可,不需要在每个页面引入了 效果图 弹窗组件 新建...
  • 我们公司项目的需要在el-dialog弹窗组件中写入表单数据,由于表单数据比较多,有时候误触了el-dialog的遮罩层就关闭弹窗了,导致辛辛苦苦填入的数据被清空重置。所以需要阻止弹窗遮罩层的关闭事件。 下面针对使用...

空空如也

空空如也

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

vue弹窗组件dialog

vue 订阅