primevue-mirror/apps/showcase/doc/nuxt/configuration/DirectivesDoc.vue

49 lines
1.3 KiB
Vue
Raw Normal View History

2023-10-15 20:57:44 +00:00
<template>
<DocSectionText v-bind="$attrs">
2024-07-03 10:06:06 +00:00
<p>When <i>autoImport</i> is disabled, use the <i>include</i> and <i>exclude</i> for manual registration.</p>
2023-10-16 08:10:39 +00:00
<p>The names of the directives to import and register are provided using the <i>include</i> property. When the value is ignored or set using the <i>*</i> alias, all of the directives are registered.</p>
2024-01-30 08:16:35 +00:00
<DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
2023-10-15 21:00:28 +00:00
<p>Similar to components, certain directives can be excluded and name registration can be customized.</p>
2024-01-30 08:16:35 +00:00
<DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
<DocSectionCode :code="code3" importCode hideToggleCode hideStackBlitz />
2023-10-15 20:57:44 +00:00
</DocSectionText>
</template>
<script>
export default {
data() {
return {
code1: {
basic: `
2023-10-16 08:10:39 +00:00
primevue: {
2023-10-15 20:57:44 +00:00
directives: {
include: ['Ripple', 'Tooltip']
}
}
`
},
code2: {
basic: `
2023-10-16 08:10:39 +00:00
primevue: {
2023-10-15 20:57:44 +00:00
directives: {
include: '*',
exclude: ['Ripple']
}
}
`
},
code3: {
basic: `
2023-10-16 08:10:39 +00:00
primevue: {
2023-10-15 20:57:44 +00:00
directives: {
prefix: 'p'
include: ['Ripple', 'Tooltip'] /* Used as v-pripple and v-ptooltip */
}
}
`
}
2023-10-15 21:00:28 +00:00
};
2023-10-15 20:57:44 +00:00
}
};
</script>