Vue實現(xiàn)通知或詳情類彈窗
本文實例為大家分享了Vue實現(xiàn)通知或詳情類彈窗的具體代碼,供大家參考,具體內(nèi)容如下
效果如圖所示:(整體樣式模仿ant-design-vue Modal樣式,同時陰影覆蓋瀏覽器窗口,并自定義滾動條樣式)
①創(chuàng)建彈窗組件Dialog.vue:
<template> ? <div class="m-dialog-mask"> ? ? <div class="m-modal"> ? ? ? <div class="m-modal-content"> ? ? ? ? <div @click="onClose" class="u-close">✖</div> ? ? ? ? <div class="m-modal-header"> ? ? ? ? ? <div class="u-head">{{ title }}</div> ? ? ? ? </div> ? ? ? ? <div class="m-modal-body"> ? ? ? ? ? <p class="u-content" v-html="content"></p> ? ? ? ? </div> ? ? ? </div> ? ? </div> ? </div> </template> <script> export default { ? name: 'Dialog', ? props: { ? ? title: { ? ? ? type: String, ? ? ? default: '提示' ? ? }, ? ? content: { ? ? ? type: String, ? ? ? default: '' ? ? } ? }, ? methods: { ? ? onClose () { ? ? ? this.$emit('close') ? ? } ? } } </script> <style lang="less> .m-dialog-mask { ? position: fixed; ? top: 0; ? right: 0; ? bottom: 0; ? left: 0; ? width: 100%; ? height: 100%; ? z-index: 1000000; ? background: rgba(0,0,0,0.45); ? .m-modal { ? ? width: 720px; ? ? position: relative; ? ? top: calc(50% - 240px); ? ? margin: 0 auto; ? ? .m-modal-content { ? ? ? position: relative; ? ? ? background: #fff; ? ? ? border-radius: 4px; ? ? ? box-shadow: 0 4px 12px rgba(0,0,0,.1); ? ? ? .u-close { ? ? ? ? position: absolute; ? ? ? ? top: 16px; ? ? ? ? right: 24px; ? ? ? ? color: rgba(0,0,0,.45); ? ? ? ? font-size: 18px; ? ? ? ? line-height: 22px; ? ? ? ? cursor: pointer; ? ? ? ? transition: color .3s; ? ? ? ? &:hover { ? ? ? ? ? color: rgba(0,0,0,.75); ? ? ? ? } ? ? ? } ? ? ? .m-modal-header { ? ? ? ? height: 22px; ? ? ? ? padding: 16px 24px; ? ? ? ? border-radius: 4px 4px 0 0; ? ? ? ? border-bottom: 1px solid #e8e8e8; ? ? ? ? .u-head { ? ? ? ? ? margin: 0; ? ? ? ? ? color: rgba(0,0,0,.85); ? ? ? ? ? font-weight: 500; ? ? ? ? ? font-size: 16px; ? ? ? ? ? line-height: 22px; ? ? ? ? ? word-wrap: break-word; ? ? ? ? } ? ? ? } ? ? ? .m-modal-body { ? ? ? ? height: 425px; ? ? ? ? padding: 24px; ? ? ? ? font-size: 16px; ? ? ? ? line-height: 1.5; ? ? ? ? word-wrap: break-word; ? ? ? ? box-sizing: border-box; ? ? ? ? overflow: auto; ? ? ? ? .u-content { ? ? ? ? ? width: 672px; ? ? ? ? ? img { max-width: 100%; } // v-html中圖片過大時,設(shè)置其樣式最大寬度為100% ? ? ? ? } ? ? ? } ? ? ? /* 自定義滾動條樣式 */ ? ? ? .m-modal-body::-webkit-scrollbar { ? ? ? ? width: 10px; /*對垂直流動條有效*/ ? ? ? ? height: 10px; /*對水平流動條有效*/ ? ? ? } ? ? ? /*定義滾動條的圓角、內(nèi)陰影及軌道樣式*/ ? ? ? .m-modal-body::-webkit-scrollbar-track { ? ? ? ? border-radius: 5px; ? ? ? ? box-shadow: inset 0 0 6px rgba(0,0,0,.3); ? ? ? ? background: #fff; ? ? ? } ? ? ? /* 滾動條上部軌道樣式 */ ? ? ? .m-modal-body::-webkit-scrollbar-track-piece:vertical:start { ? ? ? ? border-radius: 5px; ? ? ? ? background: #c3c3c3; ? ? ? } ? ? ? /*定義圓角、內(nèi)陰影及滑塊樣式*/ ? ? ? .m-modal-body::-webkit-scrollbar-thumb { ? ? ? ? border-radius: 5px; ? ? ? ? box-shadow: inset 0 0 6px rgba(0,0,0,.3); ? ? ? ? background: #e8e8e8; ? ? ? ? &:hover { // 懸浮或選中時滑塊樣式 ? ? ? ? ? background: #c9c9c9; ? ? ? ? } ? ? ? } ? ? } ? } } </style>
②使用Dialog組件進(jìn)行通知,詳情類的展示:
<Dialog ? ? ? title="提示" ? ? ? :content="content" ? ? ? @close="onClose" ? ? ? v-show="showDialog" ? ? ? /> ? import Dialog from '@/components/Dialog' components: { ? ? Dialog } ? data () { ? ? return { ? ? ? showDialog: false, ? ? ? content: '', ? ? } } methods: { ? ? onDialog (content) { // 調(diào)用Dialog彈窗展示 ? ? ? this.content = content ? ? ? this.showDialog = true ? ? }, ? ? onClose () { // 關(guān)閉dialog ? ? ? this.showDialog = false ? ? } }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue動態(tài)獲取數(shù)據(jù)后控件不可編輯問題
這篇文章主要介紹了Vue動態(tài)獲取數(shù)據(jù)后控件不可編輯問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04vue實現(xiàn)在線預(yù)覽pdf文件和下載(pdf.js)
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)在線預(yù)覽pdf文件和下載,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-11-11詳解基于webpack和vue.js搭建開發(fā)環(huán)境
本篇文章主要介紹了詳解基于webpack和vue.js搭建開發(fā)環(huán)境 ,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-04-04vue中異步數(shù)據(jù)獲取方式(確保數(shù)據(jù)被獲取)
這篇文章主要介紹了vue中異步數(shù)據(jù)獲取方式(確保數(shù)據(jù)被獲取),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-01-01詳解如何在Vue中快速實現(xiàn)數(shù)據(jù)可視化大屏展示
在現(xiàn)代數(shù)據(jù)驅(qū)動的應(yīng)用程序中,數(shù)據(jù)可視化大屏已經(jīng)成為了非常重要的一環(huán),通過對海量數(shù)據(jù)進(jìn)行可視化展示,可以幫助用戶更好地理解和分析數(shù)據(jù),從而做出更加明智的決策,在Vue中進(jìn)行數(shù)據(jù)可視化大屏展示也變得越來越流行,本文將介紹如何在Vue中快速實現(xiàn)數(shù)據(jù)可視化大屏展示2023-10-10讓axios發(fā)送表單請求形式的鍵值對post數(shù)據(jù)的實例
今天小編就為大家分享一篇讓axios發(fā)送表單請求形式的鍵值對post數(shù)據(jù)的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08