快捷導(dǎo)航

Vue組件解析之如何自定義彈窗組件ByDialog

更新時(shí)間：2024年01月11日 09:54:37 作者：Leo_Mr

這篇文章主要介紹了Vue組件解析之如何自定義彈窗組件ByDialog問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

ByDialog組件代碼

下面是ByDialog組件的完整代碼：

<template>
  <!-- 
    el組件的大部分屬性在by-dialog標(biāo)簽上都可以使用，如果某屬性或事件不生效可以在by-dialog組件中    去擴(kuò)展        
   （例如通過(guò)props）
    -->
  <el-dialog
    :title="title"
    :visible="visible"
    v-bind="$attrs"
    v-on="$listeners"
    @close="$emit('cancel')"
    :width="width"
    @touchmove.prevent
    class="by-dialog"
  >
    <div class="by-dialog-content">
      <slot></slot>
    </div>
    <slot name="footer" slot="footer">
      <el-button @click="$emit('ok')" type="primary">{{ okText }}</el-button>
      <el-button @click="$emit('cancel')">{{ cancelText }}</el-button>
    </slot>
  </el-dialog>
</template>

<script>
export default {
  name: 'ByDialog',
  props: {
    // 彈框的顯示隱藏
    value: {
      type: Boolean,
      default: false,
    },
    // 確定按鈕文本
    okText: {
      type: String,
      default: '確定',
    },
    // 取消按鈕文本
    cancelText: {
      type: String,
      default: '取消',
    },
    // 彈框標(biāo)題
    title: {
      type: String,
      default: '',
    },
    // 彈框的寬度
    width: {
      type: String,
      default: '600px',
    },
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  },
  methods: {
  },
};
</script>

<style scoped>
.by-dialog-content {
  max-height: 500px;
  overflow-y: auto;
}
</style>

ByDialog組件詳解

下面對(duì)ByDialog組件的關(guān)鍵部分進(jìn)行詳細(xì)解釋?zhuān)?/p>

模板部分

el-dialog是Element UI庫(kù)提供的彈窗組件，我們?cè)诖嘶A(chǔ)上進(jìn)行擴(kuò)展和定制。
:title屬性綁定了彈窗的標(biāo)題，可以通過(guò)父組件傳遞屬性進(jìn)行自定義。
:visible屬性控制彈窗的顯示與隱藏，我們使用了雙向綁定，即通過(guò)v-model將組件內(nèi)部的visible屬性與外部的value屬性進(jìn)行關(guān)聯(lián)。
v-bind="$attrs"和v-on="$listeners"用于將父組件傳遞的屬性和事件綁定到內(nèi)部的el-dialog組件上，以實(shí)現(xiàn)屬性和事件的傳遞和繼承。
@close事件綁定了$emit('cancel')，當(dāng)彈窗關(guān)閉時(shí)觸發(fā)，向父組件傳遞取消按鈕被點(diǎn)擊的信號(hào)。
:width屬性控制彈窗的寬度，可以根據(jù)實(shí)際需求進(jìn)行自定義。
@touchmove.prevent阻止在觸摸設(shè)備上滾動(dòng)彈窗時(shí)的默認(rèn)滾動(dòng)行為。

插槽部分

<slot></slot>標(biāo)簽用于顯示彈窗的主要內(nèi)容，父組件可以在使用<by-dialog>標(biāo)簽時(shí)插入自定義的內(nèi)容。
<slot name="footer" slot="footer"></slot>定義了名為footer的插槽，用于顯示彈窗底部的按鈕區(qū)域。父組件可以通過(guò)使用<template v-slot:footer>或<template #footer>的方式插入自定義的按鈕組件或文本。

屬性部分

value屬性是組件的一個(gè)props，用于控制彈窗的顯示與隱藏，它的類(lèi)型是布爾型，默認(rèn)值為false。
okText和cancelText屬性分別用于設(shè)置確定按鈕和取消按鈕的文案，默認(rèn)值分別為"確定"和"取消"。
title屬性用于設(shè)置彈窗的標(biāo)題，默認(rèn)值為空字符串。
width屬性用于設(shè)置彈窗的寬度，默認(rèn)值為"600px"。

計(jì)算屬性和方法部分

visible是一個(gè)計(jì)算屬性，用于對(duì)外部的value屬性進(jìn)行雙向綁定。通過(guò)get方法獲取value的值，通過(guò)set方法觸發(fā)input事件，將新的值傳遞給父組件。
close方法用于關(guān)閉彈窗，它觸發(fā)cancel事件，向父組件傳遞取消按鈕被點(diǎn)擊的信號(hào)。
$emit('ok')和$emit('cancel')分別用于處理確定按鈕和取消按鈕的點(diǎn)擊事件。在實(shí)際應(yīng)用中，您可以在這兩個(gè)事件向父組件傳遞確定跟取消的信號(hào)。

樣式部分

.by-dialog-content類(lèi)定義了彈窗內(nèi)容區(qū)域的樣式，其中max-height屬性限制了內(nèi)容區(qū)域的最大高度，并通過(guò)overflow-y屬性實(shí)現(xiàn)垂直滾動(dòng)效果。

使用示例

在使用ByDialog組件時(shí)，我們可以通過(guò)傳遞不同的屬性和事件監(jiān)聽(tīng)器來(lái)實(shí)現(xiàn)定制化的彈窗效果。

下面是一個(gè)使用示例：

<template>
  <!-- 其他組件內(nèi)容 -->
  <by-dialog
    title="修改密碼"
    width="350px"
    v-model="dialogVisible"
    okText="確認(rèn)修改"
    cancelText="取消修改"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <!-- 彈窗內(nèi)容區(qū)域 -->
    <div>
      <label for="password">新密碼：</label>
      <input type="password" id="password" v-model="password" />
    </div>
  </by-dialog>
  <!-- 其他組件內(nèi)容 -->
</template>

<script>
export default {
  // 組件代碼
  data() {
    return {
      dialogVisible: false,
      password: '',
    };
  },
  methods: {
    // 其他方法
 
    handleOk() {
      // 處理確認(rèn)按鈕點(diǎn)擊事件
      // 執(zhí)行修改密碼操作
      if (this.password !== '') {
        // 執(zhí)行密碼修改邏輯
        this.dialogVisible = false; // 關(guān)閉彈窗
        this.password = ''; // 清空密碼輸入框
        // 其他操作...
      } else {
        // 提示密碼不能為空
        // 其他邏輯...
      }
    },
    handleCancel() {
      // 處理取消按鈕點(diǎn)擊事件
      this.dialogVisible = false; // 關(guān)閉彈窗
      this.password = ''; // 清空密碼輸入框
      // 其他操作...
    },
  },
};
</script>