feat: update layout

antdv-demo

@@ -1 +1 @@
-Subproject commit 20a93889a18d1c061e56e715094234fa0c1bdd21
+Subproject commit 7e7899bc49e5e5ebe4716a5ba12215ecfe0d3d22

components/layout/Sider.jsx

@@ -1,11 +1,12 @@
 import classNames from 'classnames';
+import { inject, provide } from 'vue';
 import PropTypes from '../_util/vue-types';
 import {
   initDefaultProps,
   getOptionProps,
   hasProp,
-  getComponentFromProp,
+  getComponent,
-  getListeners,
+  getSlot,
 } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
 import isNumeric from '../_util/isNumeric';
@@ -76,10 +77,6 @@ export default {
   name: 'ALayoutSider',
   __ANT_LAYOUT_SIDER: true,
   mixins: [BaseMixin],
-  model: {
-    prop: 'collapsed',
-    event: 'collapse',
-  },
   props: initDefaultProps(SiderProps, {
     collapsible: false,
     defaultCollapsed: false,
@@ -109,21 +106,6 @@ export default {
       belowShow: false,
     };
   },
-  provide() {
-    return {
-      layoutSiderContext: this, // menu组件中使用
-    };
-  },
-  inject: {
-    siderHook: { default: () => ({}) },
-    configProvider: { default: () => ConfigConsumerProps },
-  },
-  // getChildContext() {
-  //   return {
-  //     siderCollapsed: this.state.collapsed,
-  //     collapsedWidth: this.props.collapsedWidth,
-  //   };
-  // }
   watch: {
     collapsed(val) {
       this.setState({
@@ -131,6 +113,15 @@ export default {
       });
     },
   },
+  created() {
+    provide('layoutSiderContext', this); // menu组件中使用
+  },
+  setup() {
+    return {
+      siderHook: inject('siderHook', {}),
+      configProvider: inject('configProvider', ConfigConsumerProps),
+    };
+  },
 
   mounted() {
     this.$nextTick(() => {
@@ -169,6 +160,7 @@ export default {
           sCollapsed: collapsed,
         });
       }
+      this.$emit('update:collapsed', collapsed);
       this.$emit('collapse', collapsed, type);
     },
 
@@ -195,7 +187,7 @@ export default {
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
 
-    const trigger = getComponentFromProp(this, 'trigger');
+    const trigger = getComponent(this, 'trigger');
     const rawWidth = this.sCollapsed ? collapsedWidth : width;
     // use "px" as fallback unit for width
     const siderWidth = isNumeric(rawWidth) ? `${rawWidth}px` : String(rawWidth);
@@ -240,13 +232,12 @@ export default {
       [`${prefixCls}-zero-width`]: parseFloat(siderWidth) === 0,
     });
     const divProps = {
-      on: getListeners(this),
       class: siderCls,
       style: divStyle,
     };
     return (
       <aside {...divProps}>
-        <div class={`${prefixCls}-children`}>{this.$slots.default}</div>
+        <div class={`${prefixCls}-children`}>{getSlot(this)}</div>
         {collapsible || (this.below && zeroWidthTrigger) ? triggerDom : null}
       </aside>
     );

components/layout/index.js

@@ -1,16 +1,14 @@
 import Layout from './layout';
 import Sider from './Sider';
-import Base from '../base';
 
 Layout.Sider = Sider;
 
 /* istanbul ignore next */
-Layout.install = function(Vue) {
+Layout.install = function(app) {
-  Vue.use(Base);
+  app.component(Layout.name, Layout);
-  Vue.component(Layout.name, Layout);
+  app.component(Layout.Header.name, Layout.Header);
-  Vue.component(Layout.Header.name, Layout.Header);
+  app.component(Layout.Footer.name, Layout.Footer);
-  Vue.component(Layout.Footer.name, Layout.Footer);
+  app.component(Layout.Sider.name, Layout.Sider);
-  Vue.component(Layout.Sider.name, Layout.Sider);
+  app.component(Layout.Content.name, Layout.Content);
-  Vue.component(Layout.Content.name, Layout.Content);
 };
 export default Layout;

components/layout/layout.jsx

@@ -1,6 +1,7 @@
+import { inject } from 'vue';
 import PropTypes from '../_util/vue-types';
 import classNames from 'classnames';
-import { getOptionProps, getListeners } from '../_util/props-util';
+import { getOptionProps, getSlot } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 
 export const BasicProps = {
@@ -14,8 +15,10 @@ function generator({ suffixCls, tagName, name }) {
     return {
       name,
       props: BasicComponent.props,
-      inject: {
+      setup() {
-        configProvider: { default: () => ConfigConsumerProps },
+        return {
+          configProvider: inject('configProvider', ConfigConsumerProps),
+        };
       },
       render() {
         const { prefixCls: customizePrefixCls } = this.$props;
@@ -23,14 +26,11 @@ function generator({ suffixCls, tagName, name }) {
         const prefixCls = getPrefixCls(suffixCls, customizePrefixCls);
 
         const basicComponentProps = {
-          props: {
           prefixCls,
           ...getOptionProps(this),
           tagName,
-          },
-          on: getListeners(this),
         };
-        return <BasicComponent {...basicComponentProps}>{this.$slots.default}</BasicComponent>;
+        return <BasicComponent {...basicComponentProps}>{getSlot(this)}</BasicComponent>;
       },
     };
   };
@@ -39,12 +39,11 @@ function generator({ suffixCls, tagName, name }) {
 const Basic = {
   props: BasicProps,
   render() {
-    const { prefixCls, tagName: Tag, $slots } = this;
+    const { prefixCls, tagName: Tag } = this;
     const divProps = {
       class: prefixCls,
-      on: getListeners(this),
     };
-    return <Tag {...divProps}>{$slots.default}</Tag>;
+    return <Tag {...divProps}>{getSlot(this)}</Tag>;
   },
 };
 
@@ -68,15 +67,14 @@ const BasicLayout = {
     };
   },
   render() {
-    const { prefixCls, $slots, hasSider, tagName: Tag } = this;
+    const { prefixCls, hasSider, tagName: Tag } = this;
     const divCls = classNames(prefixCls, {
       [`${prefixCls}-has-sider`]: typeof hasSider === 'boolean' ? hasSider : this.siders.length > 0,
     });
     const divProps = {
       class: divCls,
-      on: getListeners,
     };
-    return <Tag {...divProps}>{$slots.default}</Tag>;
+    return <Tag {...divProps}>{getSlot(this)}</Tag>;
   },
 };
 

examples/index.js

@@ -35,6 +35,7 @@ import Menu from 'ant-design-vue/menu';
 import Mentions from 'ant-design-vue/mentions';
 import Dropdown from 'ant-design-vue/dropdown';
 import Steps from 'ant-design-vue/steps';
+import Layout from 'ant-design-vue/layout';
 
 import 'ant-design-vue/style.js';
 
@@ -84,4 +85,5 @@ app
   .use(Mentions)
   .use(Dropdown)
   .use(Steps)
+  .use(Layout)
   .mount('#app');