Vue對(duì)話框組件使用方法詳解
更新時(shí)間：2022年03月03日 09:23:45 作者：theMuseCatcher
這篇文章主要為大家詳細(xì)介紹了Vue對(duì)話框組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue對(duì)話框組件的使用，供大家參考，具體內(nèi)容如下
效果如下圖所示：（整體樣式模仿ant-design-vue Modal樣式，同時(shí)陰影覆蓋瀏覽器窗口）
①創(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>{{ content }}</p>
? ? ? ? </div>
? ? ? ? <div class="m-modal-footer" v-show="footer">
? ? ? ? ? <button class="u-cancel" @click="onCancel">{{ cancelText }}</button>
? ? ? ? ? <button class="u-confirm" @click="onConfirm">{{ okText }}</button>
? ? ? ? </div>
? ? ? </div>
? ? </div>
? </div>
</template>
<script>
export default {
? name: 'Dialog',
? props: {
? ? title: { // 標(biāo)題
? ? ? type: String,
? ? ? default: '提示'
? ? },
? ? content: { // 內(nèi)容
? ? ? type: String,
? ? ? default: ''
? ? },
? ? cancelText: { // 取消按鈕文字
? ? ? type: String,
? ? ? default: '取消'
? ? },
? ? okText: { // 確認(rèn)按鈕文字
? ? ? type: String,
? ? ? default: '確定'
? ? },
? ? footer: { // 是否顯示底部按鈕，默認(rèn)顯示
? ? ? type: Boolean,
? ? ? default: true
? ? }
? },
? methods: {
? ? onClose () {
? ? ? this.$emit('close')
? ? },
? ? onCancel () {
? ? ? this.$emit('cancel')
? ? },
? ? onConfirm () {
? ? ? this.$emit('ok')
? ? }
? }
}
</script>
<style lang="less" scoped>
.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;
? ? ? ? color: rgba(0,0,0,.65);
? ? ? ? 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: 324px;
? ? ? ? padding: 24px;
? ? ? ? font-size: 16px;
? ? ? ? line-height: 1.5;
? ? ? ? word-wrap: break-word;
? ? ? }
? ? ? .m-modal-footer {
? ? ? ? padding: 10px 16px;
? ? ? ? text-align: right;
? ? ? ? border-top: 1px solid #e8e8e8;
? ? ? ? .u-cancel {
? ? ? ? ? height: 32px;
? ? ? ? ? line-height: 32px;
? ? ? ? ? padding: 0 15px;
? ? ? ? ? font-size: 16px;
? ? ? ? ? border-radius: 4px;
? ? ? ? ? color: rgba(0,0,0,.65);
? ? ? ? ? background: #fff;
? ? ? ? ? border: 1px solid #d9d9d9;
? ? ? ? ? cursor: pointer;
? ? ? ? ? transition: all .3s cubic-bezier(.645,.045,.355,1);
? ? ? ? ? &:hover {
? ? ? ? ? ? color: #40a9ff;
? ? ? ? ? ? border-color: #40a9ff;
? ? ? ? ? }
? ? ? ? }
? ? ? ? .u-confirm {
? ? ? ? ? margin-left: 8px;
? ? ? ? ? height: 32px;
? ? ? ? ? line-height: 32px;
? ? ? ? ? padding: 0 15px;
? ? ? ? ? font-size: 16px;
? ? ? ? ? border-radius: 4px;
? ? ? ? ? background: #1890ff;
? ? ? ? ? border: 1px solid #1890ff;
? ? ? ? ? color: #fff;
? ? ? ? ? transition: all .3s cubic-bezier(.645,.045,.355,1);
? ? ? ? ? cursor: pointer;
? ? ? ? ? &:hover {
? ? ? ? ? ? color: #fff;
? ? ? ? ? ? background: #40a9ff;
? ? ? ? ? ? border-color: #40a9ff;
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? }
? }
}
</style>②使用Dialog組件彈出對(duì)話框：
<Dialog
? ? ? title="Title"
? ? ? :content="content"
? ? ? :footer="true"
? ? ? cancelText="取消"
? ? ? okText="確認(rèn)"
? ? ? @close="onClose"
? ? ? @cancel="onCancel"
? ? ? @ok="onConfirm"
? ? ? v-show="showDialog"
? ? ? />
?
import Dialog from '@/components/Dialog'
components: {
? ? Dialog
},
data () {
? ? return {
? ? ? ? showDialog: false,
?? ? content: '',
? ? }
},
methods: {
? ? onDialog (content) { // 調(diào)用Dialog彈出對(duì)話框
? ? ? this.content = 'Content of the modal ...'
? ? ? this.showDialog = true
? ? },
? ? onClose () { // 關(guān)閉dialog
? ? ? this.showDialog = false
? ? },
? ? onCancel () { // “取消”按鈕回調(diào)
? ? ? this.showDialog = false
? ? },
? ? onConfirm () { // “確定”按鈕回調(diào)
? ? ? this.showDialog = false
? ? }
}以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue 父組件調(diào)用子組件方法及事件的相關(guān)資料，父組件傳入數(shù)組子組件循環(huán)來創(chuàng)建不同的組件模塊,所有事件都在子組件內(nèi)部.怎么實(shí)現(xiàn)這樣一個(gè)功能呢？接下來跟隨腳本之家小編一起看看吧2018-03-03
vue-resource 攔截器interceptors使用詳解
這篇文章主要介紹了vue-resource 攔截器interceptors使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
vue中的echarts實(shí)現(xiàn)寬度自適應(yīng)的解決方案
這篇文章主要介紹了vue中的echarts實(shí)現(xiàn)寬度自適應(yīng),本文給大家分享實(shí)現(xiàn)方案，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
詳解vue-flickity的fullScreen功能實(shí)現(xiàn)
這篇文章主要介紹了詳解vue-flickity的fullScreen功能實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
一文搞懂vue中provide和inject實(shí)現(xiàn)原理對(duì)抗平庸
這篇文章主要為大家介紹了vue中provide和inject實(shí)現(xiàn)原理的深入理解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
vue進(jìn)度條組件實(shí)現(xiàn)代碼(可拖拽可點(diǎn)擊)
在日常開發(fā)中隨著需求的個(gè)性化,邏輯的復(fù)雜化,自定義組件也變得越來越常見,這篇文章主要給大家介紹了關(guān)于vue進(jìn)度條組件實(shí)現(xiàn)(可拖拽可點(diǎn)擊)的相關(guān)資料,需要的朋友可以參考下2023-12-12
vue中watch和computed的區(qū)別與使用方法
這篇文章主要給大家介紹了關(guān)于vue中watch和computed的區(qū)別與使用方法的相關(guān)資料，文中通過實(shí)例代碼結(jié)束的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
Vue3?響應(yīng)式系統(tǒng)實(shí)現(xiàn)?computed
這篇文章主要介紹了?Vue3?響應(yīng)式系統(tǒng)實(shí)現(xiàn)?computed，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下2022-06-06
基于axios請(qǐng)求封裝的vue應(yīng)用實(shí)例代碼
這篇文章主要給大家介紹了基于axios請(qǐng)求封裝的vue應(yīng)用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
vue中選項(xiàng)卡點(diǎn)擊切換且能滑動(dòng)切換功能的實(shí)現(xiàn)代碼
本文通過實(shí)例代碼給大家介紹了vue中選項(xiàng)卡點(diǎn)擊切換且能滑動(dòng)切換功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下2018-11-11