vue-znl-layout v1.0.28

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>

   </div> 

  ​

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>

   </div>

  ​

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>

   </div>  

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>

  </div>
  -------------------------------------------------------------------      
    data () {
      return {
        multiplerows: [{
          name: 'row1',
          rowHeight: '300px'
        }, {
          name: 'row2',
          rowHeight: '400px'
        }, {
          name: 'row3',
          rowHeight: '500px'
        }]
      }
    }

业务层通信组件使用规范

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)
       }
    }