Vue實現(xiàn)通知或詳情類彈窗

更新時間：2022年03月03日 17:58:00 作者：theMuseCatcher

這篇文章主要為大家詳細介紹了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">&#10006;</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組件進行通知，詳情類的展示：

<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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: