اختيار متسلسل Cascader

منتقٍ متسلسل. تنفتح لوحة المستوى التالي تدريجيًا، ويرفع checkStrictly ربط الأب بالابن ليصبح أي مستوى قابلاً للاختيار، ويتحكم emitPath فيما يُعبَّأ من مسار كامل أم قيمة المستوى الأخير فقط؛ تُركَّب اللوحة على body (لا يوجد Teleport في Vue2).

عند التحديد المتعدد (multiple) تكون القيمة مصفوفة مسارات الاختيار، وهي أيضًا خاضعة لـ emitPath: مع emitPath=true يكون كل عنصر مسارًا كاملًا، ومع emitPath=false يكون كل عنصر قيمة المستوى الأخير فقط؛ والتفريغ المتحكَّم به (تفريغ v-model من الخارج) يفرّغ وسوم الاختيار المحدّدة تباعًا.

اختيار متسلسل

<template>
  <div class="demo-col" style="gap: 16px">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhCascader v-model="path" :options="options" placeholder="اختر تصنيف اللوحات" clearable separator=">" />
      <LhCascader v-model="path" :options="options" size="small" disabled />
      <LhCascader v-model="path" :options="options" size="large" readonly />
    </div>
    <p class="demo-note">المسار الكامل (separator=">"): {{ path.length ? path.join(' &gt; ') : 'غير محدد' }}</p>
    <LhCascader
      v-model="leaf"
      :options="options"
      :emit-path="false"
      :show-all-levels="false"
      check-strictly
      placeholder="بدون ربط الأب بالابن، يمكن اختيار أي مستوى"
    />
    <p class="demo-note">قيمة المستوى الأخير فقط: {{ leaf.length ? leaf.join('،') : 'غير محدد' }}</p>
    <LhCascader
      v-model="multi"
      :options="options"
      multiple
      collapse-tags
      filterable
      placeholder="تحديد متعدد + طيّ الوسوم + بحث"
    />
    <p class="demo-note">قيمة التحديد المتعدد: {{ multi.length ? multi.map((m) => m.join('/')).join('،') : 'غير محدد' }}</p>
    <LhCascader
      v-model="custom"
      :options="customOptions"
      :item-config="{ value: 'id', label: 'name', children: 'sub' }"
      placeholder="تعيين حقول مخصصة (id/name/sub)"
      clearable
    />
    <p class="demo-note">المفاتيح المخصصة: {{ custom.length ? custom.join(' / ') : 'غير محدد' }}</p>
    <p class="demo-note">cascading (افتراضي) ينفتح المستوى التالي بمجرد المرور فوق العنصر؛ وبيانات المستويات في الأمثلة أعلاه.</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    path: ['shan', 'pomo', 'dapo'],
    leaf: [],
    multi: [],
    custom: [],
    options: [
      {
        value: 'shan',
        label: 'المناظر الطبيعية',
        children: [
          {
            value: 'pomo',
            label: 'مناظر بالحبر السائل',
            children: [
              { value: 'xiaopo', label: 'حبر سائل - صغير' },
              { value: 'dapo', label: 'حبر سائل - كبير' },
            ],
          },
          { value: 'qianjiang', label: 'مناظر بألوان فاتحة' },
        ],
      },
      {
        value: 'hua',
        label: 'الطيور والزهور',
        children: [
          { value: 'gongbi', label: 'طيور وزهور بأسلوب غونغبي' },
          { value: 'xieyi', label: 'طيور وزهور بأسلوب شيايي' },
        ],
      },
    ],
    customOptions: [
      {
        id: 'hua',
        name: 'الطيور والزهور',
        sub: [
          { id: 'gongbi', name: 'طيور وزهور بأسلوب غونغبي' },
          { id: 'xieyi', name: 'طيور وزهور بأسلوب شيايي' },
        ],
      },
      {
        id: 'shu',
        name: 'فن الخط الصيني',
        sub: [{ id: 'kaishu', name: 'الخط المنتظم' }],
      },
    ],
  }),
}
</script>

Props

خاصية	الوصف	النوع	الافتراضي
v-model	مسار التحديد؛ مع emitPath=false تكون قيمة المستوى الأخير (في التحديد المتعدد تكون مصفوفة من أيهما)	(string \| number)[]	—
options	بيانات الخيارات	LhCascaderNode[]	[]
size	الحجم	'small' \| 'medium' \| 'large'	'medium'
disabled / readonly / clearable	معطّل / للقراءة فقط / قابل للتفريغ	boolean	false
placeholder	نص عنصر النائب	string	حزمة اللغة
showAllLevels	عرض المسار الكامل (افتراضي) أو المستوى الأخير فقط	boolean	true
checkStrictly	بدون ربط الأب بالابن، يمكن اختيار أي مستوى	boolean	false
emitPath	تعبئة المسار الكامل (افتراضي) أو قيمة المستوى الأخير فقط	boolean	true
multiple	تحديد متعدد	boolean	false
cascading	ينفتح المستوى التالي بمجرد المرور فوق العنصر	boolean	true
separator	فاصل المسار	string	' / '
collapseTags	طيّ الوسوم إلى عدّاد في التحديد المتعدد	boolean	false
filterable	قابل للبحث	boolean	false
itemConfig	تعيين الحقول المخصصة (value/label/children/disabled)	LhCascaderItemConfig	—
teleportTarget	هدف تركيب الطبقة المنبثقة	string \| HTMLElement	'body'
sx	خصائص التخطيط السريع sx	—	—

Events

input (v-model)، change (value, nodes)

Slots

فتحة	الوصف
no-match	المحتوى عند عدم تطابق بحث filterable (الافتراضي «لا توجد بيانات مطابقة»)

إمكانية الوصول

المشغّل role="combobox" + aria-expanded، وألواح المستويات role="listbox"، والخيارات role="option"؛ عند تغيّر المستوى المفتوح يُحدَّث aria-activedescendant، مع دعم التنقل بلوحة المفاتيح عبر مفاتيح الأسهم / Enter / ESC.