1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 |
- <template>
- <div class="dynamic-form-design">
- <div class="dynamic-form-design__components">
- <slot name="components"></slot>
- </div>
- <div class="dynamic-form-design__form">
- <div class="dynamic-form-design__toolbar">
- <slot name="toolbar"></slot>
- </div>
- <slot></slot>
- </div>
- <div class="dynamic-form-design__property">
- <slot name="property"></slot>
- </div>
- </div>
- </template>
- <style lang="less">
- .side-style-mixin{
- flex-shrink: 0;
- width: 250px;
- border: 1px solid #ddd;
- background: #fff;
- }
- .dynamic-form-design{
- display: flex;
- height: 100%;
- &__components{
- .side-style-mixin;
- padding: 8px 0;
- }
- &__form{
- box-sizing: border-box;
- height: 100%;
- flex-grow: 1;
- min-width: 300px;
- border-style: solid;
- border-color: #ddd;
- border-width: 1px 0 1px 0;
- }
- &__toolbar{
- height: 45px;
- padding: 0 20px;
- background-color: #fff;
- border-bottom: 1px solid #ddd;
- line-height: 45px;
- text-align: right;
- }
- &__property{
- .side-style-mixin;
- width: 300px;
- }
- }
- </style>
|