8. المشروع [vuejs-06]: تخطيط عرض باستخدام فتحات

8.1. البرنامج النصي الرئيسي [main.js]

يظل البرنامج النصي الرئيسي [main.js] دون تغيير.

8.2. المكون الرئيسي [App]

رمز المكون [App] هو كما يلي:

<template>
  <div class="container">
    <b-card>
      <b-alert show variant="success" align="center">
        <h4>[vuejs-06] : mise en page avec des slots</h4>
      </b-alert>
      <Content />
    </b-card>
  </div>
</template>


<script>
  import Content from './components/Content'
  export default {
    name: "app",
    // المكونات المستخدمة
    components: {
      Content
    }
  };
</script>

يقدم المكون [App] مكونًا جديدًا يُسمى [Content] (الأسطر 7 و14 و19).

8.3. المكون [Layout]

يُستخدم المكون [Layout] لتعريف تخطيط عرض التطبيق:

<template>
  <!-- سطر -->
  <b-row>
    <!-- حقل مكون من ثلاثة أعمدة -->
    <b-col cols="3" v-if="left">
      <slot name="slot-left" />
    </b-col>
    <!-- منطقة ذات تسعة أعمدة -->
    <b-col cols="9" v-if="right">
      <slot name="slot-right" />
    </b-col>
  </b-row>
</template>

<script>
  export default {
    name: "patron",
    // المعلمات
    props: {
      left: {
        type: Boolean
      },
      right: {
        type: Boolean
      }
    }
  };
</script>

تعليقات

• يحدد المكون [Layout] سطرًا واحدًا (الأسطر 3-12). وينقسم هذا السطر إلى عمودين:
  • عمود يتكون من 3 أعمدة Bootstrap (الأسطر 5-7)؛
  • عمود مكون من 9 أعمدة Bootstrap (الأسطر 9-11)؛
• السطر 5: يتوقف وجود العمود الأيسر (الأسطر 5-7) على قيمة المعلمة [left]، المحددة في الخاصية [props] للمكون (الأسطر 20-22)؛
• السطر 9: يتوقف وجود العمود الأيمن (الأسطر 9-11) على قيمة المعلمة [right]، المحددة في الخاصية [props] للمكون (الأسطر 23-25)؛
• يجب تحديد قيم المعلمات [left, right] بواسطة مكون أب للمكون [Layout]؛
• السطر 6: لا يتم تحديد محتوى العمود الأيسر. بل يتم فقط تسمية هذا العمود باستخدام العلامة <slot>. وهنا سيُسمى [slot-left]. يجب على المكون الذي يستخدم المكون [Content] أن يحدد ما يريد وضعه في المنطقة المسماة [slot-left]؛
• السطر 10: سيُسمى العمود الأيمن [slot-right]؛

8.4. المكون [Right]

المكون [Right] هو كما يلي:

<template>
  <!-- رسالة في تنبيه من نوع «تحذير» -->
  <b-alert show variant="warning" align="center">
    <h4>{{msg}}</h4>
  </b-alert>
</template>

<!-- نص برمجي -->
<script>
  export default {
    name: "droite",
    // معلمات
    props: {
      msg: String
    }
  };
</script>

• الأسطر 3-5: يعرض المكون [Right] رسالة في تنبيه من النوع [warning]. هذه الرسالة [msg] مُعرَّفة كمعلمة للمكون، السطر 14. لذا يجب على المكون الأصلي أن يحدد لها قيمة؛

8.5. المكون [Left]

المكون [Left] هو كما يلي:

<template>
  <!-- رسالة في تنبيه من النوع «primary» -->
  <b-alert show variant="primary" align="center">
    <h4>{{msg}}</h4>
  </b-alert>
</template>

<!-- نص برمجي -->
<script>
  export default {
    name: "gauche",
    // معلمات
    props: {
      msg: String
    }
  };
</script>

• الأسطر 3-5: يعرض المكون [Left] رسالة في تنبيه من النوع [primary]. هذه الرسالة [msg] مُعرَّفة كمعلمة للمكون، السطر 14. لذا يجب على المكون الأصلي أن يحدد لها قيمة؛

8.6. المكون [Content]

نتذكر أن المكون [Content] هو المكون الذي تعرضه الواجهة الرئيسية [App.vue]:

<template>
  <div>
    <!-- الأعمدة اليسرى واليمنى مملوءة -->
    <Layout :left="true" :right="true">
      <Right slot="slot-right" msg="slot [slot-right] présent et rempli" />
      <Left slot="slot-left" msg="slot [slot-left] présent et rempli" />
    </Layout>
    <!-- الأعمدة اليسرى فارغة، العمود الأيمن مملوء -->
    <Layout :left="false" :right="true">
      <Right slot="slot-right" msg="slot [slot-right] présent et rempli, slot [slot-left] absent" />
    </Layout>
    <!-- العمود الأيسر مملوء، والعمود الأيمن غير موجود -->
    <Layout :left="true" :right="false">
      <Left slot="slot-left" msg="slot [slot-left] présent et rempli, slot [slot-right] absent" />
    </Layout>
    <!-- العمود الأيسر موجود ولكنه غير مملوء، والعمود الأيمن مملوء -->
    <Layout :left="true" :right="true">
      <Right slot="slot-right" msg="slot [slot-right] présent et rempli, slot [slot-left] présent mais vide" />
    </Layout>
  </div>
</template>

<!-- نص برمجي -->
<script>
  import Layout from "./Layout";
  import Left from "./Left";
  import Right from "./Right";
  export default {
    name: "contenu",
    // المكونات
    components: {
      Layout,
      Left,
      Right
    }
  };
</script>

العرض المرئي

تعليقات

• يُستخدم المكون [Layout] 4 مرات (الأسطر 4-7، 9-11، 13-15، 17-19). وإذا ما تذكرنا أن المكون [Layout] يحدد سطرًا واحدًا، فإن المكون [template] المذكور أعلاه يحدد أربعة أسطر. كما نتذكر أن سطر المكون [Layout] يحدد عمودين:
  • عمود يُسمى [slot-left] يشغل الأعمدة الثلاثة اليسرى في Bootstrap؛
  • عمود يُسمى [slot-Right] يشغل الأعمدة التسعة اليمنى في Bootstrap؛
• الأسطر 4-7: تحدد صفًا باسم [1] حيث يشغل المكون [Left] العمود [slot-left]، ويشغل المكون [Right] العمود [slot-right]؛
• الأسطر 9-11: تحدد صفًا [2] حيث لا يتم عرض العمود [slot-left] ويشغل المكون [Right] العمود [slot-right]؛
• الأسطر 13-15: تحدد سطرًا [3] حيث لا يتم عرض العمود [slot-right] ويشغل المكون [Left] العمود [slot-left]؛
• الأسطر 17-19: يحدد صفًا [4] حيث يتم عرض العمود [slot-left] ([:left=’true’]) ولكنه غير مملوء، ويشغل المكون [Right] العمود [slot-right]؛

وفي النهاية، استُخدم المكون [Layout] كنموذج تخطيط للمكون [Content].