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

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

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

ByDialog組件代碼

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

<template>
  <!-- 
    el組件的大部分屬性在by-dialog標簽上都可以使用，如果某屬性或事件不生效可以在by-dialog組件中    去擴展        
   （例如通過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: '取消',
    },
    // 彈框標題
    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組件詳解

下面對ByDialog組件的關鍵部分進行詳細解釋：

模板部分

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

插槽部分

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

屬性部分

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

計算屬性和方法部分

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

樣式部分

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

使用示例

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

下面是一個使用示例：

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

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