vue-znl-layout

正能量vue布局组件 1.0.3

安装

npm install vue-znl-layout -S

使用

import Vue from 'vue'
import vueZnlLayout from 'vue-znl-layout'
import App from './App.vue'

Vue.use(vueZnlLayout)

new Vue({
  el: '#app',
  render: h => h(App)
})

znl-layout-spa 单页面布局

• 调用说明
  • 必须给父容器，组件将铺满整个父容器，如需用到页面宽高计算父容器宽高，组件提供已get-document-rect事件用来获取页面宽高
  • 自定义插槽需要加类名znlLayoutSpa

• Props

| name | Description | default | type | indispensable | | ------------ | ----------- | :-----: | :-----: | ------------- | | page-loading | 页面加载loading | false | Boolean | |

• Slots 自定义插槽

| name | Description | type | class(必需的类名) | | ------------ | ----------- | ------- | :----------: | | znlLayoutSpa | 单页面布局的单个组件 | Element | znlLayoutSpa |

• METHODS方法

| name | Description | arguments | retrun | | ---- | ----------- | --------- | ------ | | | | | |

• Events

| name | Description | arguments | | ----------------- | ------------------------ | :--------------------------------------: | | get-document-rect | 页面加载时触发，获取页面宽高卷曲以及页面拉伸事件 | win(height,width,scrollLeft,scrollTop)，elResize(on,off) |

elResize举例

// 给body注册页面伸缩改变触发的事件
elResize.on(document.body, () => {
	console.log(111)
})

znl-layout-topbottom 上下布局

• 调用说明
  • 必须给父容器，上下组件将铺满整个父容器，如需用到页面宽高计算父容器宽高，组件提供已get-document-rect事件用来获取页面宽高
  • 上组件最高占父容器高度的80%，超过无效

• Props

| name | Description | default | type | indispensable | | ------------ | ----------- | :-----: | :-----: | ------------- | | top-height | 上组件占比 | 50% | String | | | page-loading | 页面加载loading | false | Boolean | |

• Slots 自定义插槽

| name | Description | type | class(必需的类名) | | --------- | ----------- | ------- | :----------: | | znlTop | 上组件 | Element | znlTop | | znlBottom | 下组件 | Element | znlBottom |

• METHODS方法

| name | Description | arguments | retrun | | ---- | ----------- | --------- | ------ | | | | | |

• Events

| name | Description | arguments | | ---- | ----------- | :-------: | | | | |

• 演示

   	<div class="test"
         :style="{
            'width': '100%',
            'height': parentHeight
          }"
  >  
    <znl-layout-topbottom
      top-height="40%"
      >
      <div slot="znlTop"  style="background:#ccc" class="znlTop">上组件</div>
      <div slot="znlBottom" class="znlBottom">下组件</div>
    </znl-layout-topbottom>

​

znl-layout-leftright 左右布局

• 调用说明
  • 必须给父容器，左右组件将铺满整个父容器，如需用到页面宽高计算父容器宽高，组件提供已get-document-rect事件用来获取页面宽高

• Props

| name | Description | default | type | indispensable | | --------- | ----------- | :-----: | :----: | ------------- | | leftWidth | 左组件占比 | 50% | String | |

• Slots 自定义插槽

| name | Description | type | class(必需的类名) | | -------- | ----------- | ------- | :----------: | | znlLeft | 左组件 | Element | znlLeft | | znlRight | 右组件 | Element | znlRight |

• METHODS方法

| name | Description | arguments | retrun | | ---- | ----------- | --------- | ------ | | | | | |

• Events

| name | Description | arguments | | ---- | ----------- | :-------: | | | | |

• 演示

   <div class="test"
         :style="{
            'width': '100%',
            'height': parentHeight
          }"
  >  
    <znl-layout-leftright
          
      leftWidth="50%"
      >
      <div slot="znlLeft"  style="background:#ccc" class="znlLeft">左组件</div>
      <div slot="znlRight" class="znlRight">右组件</div>
    </znl-layout-leftright>

​

znl-layout-masterslave 主从布局（顶部组件固定）

• 调用说明
  • 必须给父容器，组件将在水平方向铺满整个父容器，如需用到页面宽高计算父容器宽高，组件提供已get-document-rect事件用来获取页面宽高
  • 主组件分发slot,类名znlTop； 附属组件类名znlBottom,组件组在该类名的容器内

• Props

| name | Description | default | type | indispensable | | --------- | :-----------------------: | :-----: | :----: | ------------- | | topHeight | 顶部固定组件高度(如要传占比，则需保证父容器高度) | 300px | String | |

• Slots 自定义插槽

| name | Description | type | class(必需的类名) | | --------- | ----------- | -------- | :----------: | | znlTop | 顶部固定组件 | Element | znlTop | | znlBottom | 附属组件组 | Elements | znlBottom |

• METHODS方法

| name | Description | arguments | retrun | | ---- | ----------- | --------- | ------ | | | | | |

• Events

| name | Description | arguments | | ---- | ----------- | :-------: | | | | |

• 演示

  	<div class="test"
         :style="{
            'width': '100%',
            'height': parentHeight,
            'background': '#f2f2f2'
          }"
  >  
    <znl-layout-masterslave
          
      top-height="10%"
      >
        <div 
          slot="znlTop"  
          :style="{
            background:'#ccc',
            }" 
          class="znlTop">上组件</div>
  
        <div slot="znlBottom" class="znlBottom" >
            <div style="background:#ddd; height:500px">下组件1</div>
            <div style="background:#ddd; height:500px">下组件2</div>
            <div style="background:#ddd; height:500px">下组件3</div>
        </div>
    </znl-layout-masterslave>

znl-layout-multiple 多模块行布局

• 调用说明
  • 必须给父容器，组件将在水平方向铺满整个父容器，如需用到页面宽高计算父容器宽高，组件提供已get-document-rect事件用来获取页面宽高
  • 每行默认为flex布局，且每行铺满整个父容器，按组件个数平分宽度，如需修改在外部更改样式即可

• Props

| name | Description | default | type | indispensable | | ------------ | :---------: | :-----: | :-----: | ------------- | | multiplerows | 多行模块数组 | | Array | yes | | out-style | 是否使用外部样式 | false | Boolean | |

• multiplerows单选项配置：

  • name: solt
  • rowHeight：行高
  • maxHeight: 最大高度
  • minHeight: 最小高度

  ​

• Slots 自定义插槽

| name | Description | type | class(必需的类名) | | ------ | ----------- | ---- | :----------: | | （配置决定） | | | multiplerows | | | | | |

• METHODS方法

| name | Description | arguments | retrun | | ---- | ----------- | --------- | ------ | | | | | |

• Events

| name | Description | arguments | | ---- | ----------- | :-------: | | | | |

• 演示

  <div class="test"
         :style="{
            'width': '100%',
            'height': parentHeight,
            'background': '#f2f2f2'
          }"
  >  
      <znl-layout-multiple
        :multiplerows="multiplerows"
        :out-style="false">
        <div :slot="multiplerows[0].name"
            class="multiplerows">
            <div style="background: #ccc">组件1</div>
            <div style="background: #eee">组件2</div>
        </div>
        <div :slot="multiplerows[1].name"
            class="multiplerows">
            <div style="background: #eee">组件1</div>
            <div style="background: #ccc">组件2</div>
            <div style="background: #eee">组件3</div>
        </div>
        <div :slot="multiplerows[2].name"
            class="multiplerows">
            <div style="background: #ccc">组件1</div>
            <div style="background: #eee">组件2</div>
        </div>
      </znl-layout-multiple>

业务层通信组件使用规范

1. 公共父组件中混入znlMixins

   import znlLayout from 'vue-znl-layout'
   mixins: [
       znlLayout.znlMixins
     ]

2. 发送组件混入znlSendMixins; 参数加 @eventStart="(val)=>{emitCommont(val)}"

   <znl-gridmodule
             @eventStart="(val)=>{emitCommont(val)}">
   </znl-gridmodule>
                
    import znlLayout from 'vue-znl-layout'
   mixins: [
       znlbasegrid.znlSendMixins
     ]

3. 接收组件混入znlAcceptMixins

   import znlLayout from 'vue-znl-layout'
   mixins: [
       znlbasegrid.znlAcceptMixins
     ]

4. 给每一个通信组件注册引用信息ref ; 需要发送数据的组件参入sendto参数(Array，接收数据组件注册信息)

   发送：<test-val 
         	ref="www" 
         	:sendto="['qqq']"
           ></test-val>
              
   接收：<test-val 
         	ref="qqq" 
           ></test-val>

   ​

5. 在接收组件中可在AcceptData方法中拿到发送过来的数据

    methods: {
       AcceptData (val) {
           console.log(val)
       }
    }