feat: drawer 组件封装
This commit is contained in:
34
lib/component/drawer/drawer.vue
Normal file
34
lib/component/drawer/drawer.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<!-- @format -->
|
||||
|
||||
<template>
|
||||
<a-drawer v-bind="getBindValue">
|
||||
<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
|
||||
<slot :name="item" v-bind="data || {}"></slot>
|
||||
</template>
|
||||
<template #footer>
|
||||
<a-button>取消</a-button>
|
||||
</template>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, toRefs } from 'vue';
|
||||
import { drawerProps } from 'ant-design-vue/es/drawer';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'NsDrawer',
|
||||
props: {
|
||||
...drawerProps(),
|
||||
},
|
||||
setup(props, { attrs, emit, slots }) {
|
||||
console.log(props, slots);
|
||||
|
||||
const getBindValue = computed(() => ({
|
||||
...attrs,
|
||||
...props,
|
||||
}));
|
||||
return { getBindValue };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped></style>
|
4
lib/component/drawer/index.ts
Normal file
4
lib/component/drawer/index.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
import drawer from './drawer.vue';
|
||||
import { withInstall } from '/nerv-lib/util';
|
||||
|
||||
export const NsDrawer = withInstall(drawer);
|
@@ -1,5 +1,3 @@
|
||||
|
||||
|
||||
export {
|
||||
Button,
|
||||
Select,
|
||||
@@ -68,6 +66,7 @@ export { NsSteps } from './form/steps';
|
||||
export { NsVNode } from './VNode';
|
||||
export { NsMessage } from './message';
|
||||
export { NsModal } from './modal';
|
||||
export { NsDrawer } from './drawer';
|
||||
|
||||
export { NsForm } from './form/form';
|
||||
export * from './table';
|
||||
|
Reference in New Issue
Block a user