@ycwei/yui-layout

yui-layout是一套基于vue开发的UI组件库

使用 yui-layout ，能够使你不再聚焦于css，而向编写js配置项，从而实现任意场景布局，特别是在大屏自适应兼容开发场景中。

如果你正在开发一个大屏项目，而你对页面自适应布局又没有什么即时有效的解决方法，或许yui-layout就能完美的帮你解决你当前遇到的困难，并且这个布局过程，或许只需要几分钟时间。

当然，普通的流式布局也能使用yui-layout，但似乎又显的没那么必要，我也强烈建议你不要使用它。

一、安装步骤

1、安装

npm install @ycwei/yui-layout
or
yarn add @ycwei/yui-layout

2、样式引用

import '@ycwei/yui-layout/yui-layout.css'

3、使用

import Vue from 'vue'
import YuiLayout from '@ycwei/yui-layout'
import '@ycwei/yui-layout/yui-layout.css'

Vue.use(YuiLayout)

二、应用步骤

1、使用布局组件

<yui-layout :layouts="layouts" />

2、配置布局选项

import HelloWorld from './components/HelloWorld.vue'

const option1 = {
  name: 'home', // 布局名称
  widthRange: [1300, 1920], // 宽度范围，从 widthRange[0] ~ 100%
  heightRange: [700, 1080], // 高度范围，从 heightRange[0] ~ 100%
  style: { // 定义样式
    width: '100%',
    height: '100%',
    background: '#161c2c'
  },
  components: [ // 组件配置
    name: '', // 组件唯一标识
    style: {}, // css样式
    render：HelloWorld // vue组件
  ]
}

export default {
  data () {
    return {
      layouts: [ option1 ] // 支持多布局方式
    }
  }
}

三、API文档

option布局配置

参数|说明|类型|默认值|可选值|必填 --|--|--|--|--|-- name|名称|String|-|-|true widthRange|宽度范围|Array(2)|-|-|false heightRange|高度范围|Array(2)|-|-|false components|组件列表|Array|-|-|true style|CSS对象|Object|-|-|false

component组件配置

参数|说明|类型|默认值|可选值|必填 --|--|--|--|--|-- name|名称，组件唯一标识，会赋值给ref|String|-|-|true render|组件模板|template|-|-|true style|CSS对象 ps:自适应布局时，需要将相关样式参数设置成百分比，单位为像素时为某个分辨率下的解决方案|Object|-|-|true

四、demo案例

1.初始化vue项目

vue create yui-layout-test
cd yui-layout-test
yarn add @ycwei/yui-layout

2.main.js引入

import Vue from 'vue'
import App from './App.vue'
import YuiLayout from '@ycwei/yui-layout'
import '@ycwei/yui-layout/yui-layout.css'

Vue.use(YuiLayout)

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

3.创建目录结构

1. src下创建pages/home目录，创建card模板，旨在清楚直观的傻瓜式编写demo，你完全可以跳过此步骤
   1. 创建header.vue

      <template>
        <div class="title">主标题</div>
      </template>
             
      <script>
      export default {
        name: 'HomeHeader'
      }
      </script>
             
      <style scoped>
      .title{
        height: 100%;
        font-size: 18px;
        line-height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      </style>

   2. 创建card-one.vue

      <template>
        <div>CardOne</div>
      </template>
             
      <script>
      export default {
        name: 'CardOne'
      }
      </script>
      ``

   3. 创建card-two.vue

      <template>
        <div>CardTwo</div>
      </template>
             
      <script>
      export default {
        name: 'CardTwo'
      }
      </script>

   4. 创建card-three.vue

      <template>
        <div>CardThree</div>
      </template>
             
      <script>
      export default {
        name: 'CardThree'
      }
      </script>

   5. 创建card-four.vue

      <template>
        <div>CardFour</div>
      </template>
             
      <script>
      export default {
        name: 'CardFour'
      }
      </script>

   6. 创建card-five.vue

      <template>
        <div>CardFive</div>
      </template>
             
      <script>
      export default {
        name: 'CardFive'
      }
      </script>

   7. 创建card-six.vue

      <template>
        <div>CardSix</div>
      </template>
             
      <script>
      export default {
        name: 'CardSix'
      }
      </script>

   8. 创建card-middle.vue

      <template>
        <div>CardMiddle</div>
      </template>
             
      <script>
      export default {
        name: 'CardMiddle'
      }
      </script>

2. src/pages/home下创建index.js，作为所有组件的配置入口，你需要特别注意当前配置文件，特别是component配置项，当然，在你项目中使用，可按项目组规范自行规范此文件

   import header from '@/pages/home/header'
   import cardOne from '@/pages/home/card-one'
   import cardTwo from '@/pages/home/card-two'
   import cardThree from '@/pages/home/card-three'
   import cardFour from '@/pages/home/card-four'
   import cardFive from '@/pages/home/card-five'
   import cardSix from '@/pages/home/card-six'
   import cardMiddle from '@/pages/home/card-middle'
      
   // 设计稿尺寸
   const screenWidth = 1920 // 设计图宽度
   const screenHeight = 1080 // 设计图高度
   const cardWidth = 470 // 卡片宽度
   const cardHeight = 310 // 卡片高度
   const cardBgColor = 'rgb(29, 47, 86, 0.3)'
   const appBgColor = '#161c2c'
   const margin = 20
      
   // 计算各区域尺寸
   const headerHeight = 80
   const cardOneTop = headerHeight + margin
   const cardTwoTop = cardOneTop
   const cardThreeTop = cardTwoTop + cardHeight + margin
   const cardFiveTop = cardThreeTop + cardHeight + margin
   const cardSixTop = cardFiveTop
   const cardMiddleTop = cardFiveTop
   const cardMiddleWidth = screenWidth - cardWidth * 2 - margin * 4
      
   // 高度百分比
   function getHeightPercent (height) {
     return getPercent(height, screenHeight)
   }
   // 宽度百分比
   function getWidthPercent (width) {
     return getPercent(width, screenWidth)
   }
   function getPercent (a, b) {
     return (a / b * 100) + '%'
   }
      
   export default {
     name: 'home', // 布局名称
     widthRange: [1300, 1920], // 宽度范围，从 widthRange[0] ~ 100%
     heightRange: [700, 1080], // 高度范围，从 heightRange[0] ~ 100%
     style: { // 定义样式
       width: '100%',
       height: '100%',
       background: appBgColor
     },
     components: [ // 组件配置
       {
         name: 'homeHeader', // 组件唯一标识
         style: {
           top: 0,
           left: 0,
           right: 0,
           height: getHeightPercent(headerHeight) // 为了自适应，宽高使用百分比
         },
         render: header // vue组件
       },
       {
         name: 'cardOne',
         style: {
           width: getWidthPercent(cardWidth),
           height: getHeightPercent(cardHeight),
           top: getHeightPercent(cardOneTop),
           left: getWidthPercent(margin),
           background: cardBgColor
         },
         render: cardOne
       },
       {
         name: 'cardTwo',
         style: {
           width: getWidthPercent(cardWidth),
           height: getHeightPercent(cardHeight),
           top: getHeightPercent(cardTwoTop),
           right: getWidthPercent(margin),
           background: cardBgColor
         },
         render: cardTwo
       },
       {
         name: 'cardThree',
         style: {
           width: getWidthPercent(cardWidth),
           height: getHeightPercent(cardHeight),
           top: getHeightPercent(cardThreeTop),
           left: getWidthPercent(margin),
           background: cardBgColor
         },
         render: cardThree
       },
       {
         name: 'cardFour',
         style: {
           width: getWidthPercent(cardWidth),
           height: getHeightPercent(cardHeight),
           top: getHeightPercent(cardThreeTop),
           right: getWidthPercent(margin),
           background: cardBgColor
         },
         render: cardFour
       },
       {
         name: 'cardFive',
         style: {
           width: getWidthPercent(cardWidth),
           height: getHeightPercent(cardHeight),
           top: getHeightPercent(cardFiveTop),
           left: getWidthPercent(margin),
           background: cardBgColor
         },
         render: cardFive
       },
       {
         name: 'cardSix',
         style: {
           width: getWidthPercent(cardWidth),
           height: getHeightPercent(cardHeight),
           top: getHeightPercent(cardSixTop),
           right: getWidthPercent(margin),
           background: cardBgColor
         },
         render: cardSix
       },
       {
         name: 'cardMiddle',
         style: {
           width: getWidthPercent(cardMiddleWidth),
           height: getHeightPercent(cardHeight),
           top: getHeightPercent(cardMiddleTop),
           left: getWidthPercent(cardWidth + 2 * margin),
           background: cardBgColor
         },
         render: cardMiddle
       }
     ]
   }

   yui-layout通过百分比实现的自适应，你需要特别注意style中的getWidthPercent，getHeightPercent
3. src/components下创建home目录，创建index.vue，代码如下

   <template>
     <yui-layout :layouts="layouts" />
   </template>
      
   <script>
   import HomeLayouts from '@/pages/home'
      
   export default {
     name: 'HOME',
     data () {
       return {
         layouts: [HomeLayouts]
       }
     }
   }
   </script>

3.App.vue引入home组件

<template>
  <div id="app">
    <layout-demo />
  </div>
</template>

<script>
import LayoutDemo from '@/components/home'

export default {
  name: 'App',
  components: {
    LayoutDemo
  }
}
</script>

<style>
html,
body,
#app{
  width: 100%;
  height: 100%;
}
*{
  margin: 0;
  padding: 0;
  color: #fff;
}
</style>

yui-layout包裹容器宽高默认是100%，注意父容器要有宽高，demo为 #app

4. 启动项目，查看效果

yarn serve

至此，你应该可以预览demo了，按需去card里编写你自己的业务逻辑吧