Daze-Koala

说明

Daze-Koala中文"呆拉"，缩写dk。

默认750宽度dpr2设计稿（iphone6/7），如果设计稿为非750宽度，需在以下 适配 第一步中引入js时以及第二步中引入styl后进行相关参数设置。

呆拉的布局js会自动对页面的dpr值以及html的字号进行计算，页面书写时尺寸直接写设计稿的实际尺寸，单位px，使用$()进行包裹（例：$(10px) 即可自动转换为rem值。

呆拉已包含reset重置样式。

前期准备

此说明文档基于官方构建工具 vue-cli 构建项目，且假设已安装官方构建工具和 node 。

1. 基于 webpack 构建 vue 项目: $ vue init webpack my-project 。

2. 呆拉框架css基于stylus构建，需安装 stylus ：$ npm install stylus --save-dev 。

3. vue-cli构建项目中使用stylus，需安装 stylus-loader ：$ npm install stylus-loader --save-dev 。

4. 安装 daze-koala ：$ npm install daze-koala --save 。

项目结构

...
+ src // 源码目录
  + assets // 资源
  + components // 公用组件
  + router // 路由
  + store // 状态管理
  + view // 视图
  App.vue // 页面入口文件
  main.js // 程序入口文件
+ static // 静态资源
    config.js // 配置文件
index.html // 入口页面
README.md // 项目说明
...

适配

第一步：main.js

// main.js引入呆拉
import DK from 'daze-koala'
DK.run()

可设置参数

// main.js引入呆拉，以下示例为默认参数，等同上面的例子
import DK from 'daze-koala'
DK.run({
  baseWidth: 750, // 设计稿宽度
  scale: 2, // 设计稿缩放倍数
  baseFontSize: 10, // 基字号
  layout: 2, // 布局设置
  padFontScale: 1, // PC基字号相对于mobile基字号缩放倍数
  pcFontScale: 1 // Pad基字号相对于mobile基字号缩放倍数
})

baseWidth ：设计稿宽度（默认为750）。
scale ： 设计稿缩放倍数（默认为2）。
baseFontSize ： 基字号（默认为10）。
layout ：布局设置（默认为2），设置meta标签缩放值。1：缩放为1；2：缩放为1或1/2；3：缩放为1/dpr。
pcFontScale ：PC基字号相对于mobile基字号缩放倍数（默认为1）。
padFontScale ：Pad基字号相对于mobile基字号缩放倍数（默认为1）。

第二步：自动计算css

在vue文件的style中引入呆拉 base.styl 文件，style需设置 lang="stylus" 。 需要计算的属性值使用 $() 包裹。

<style lang="stylus">

  @import '../node_modules/daze-koala/base.styl'
  #app
    margin-top $(60px)

</style>

可设参数

<style lang="stylus">

  // 设置参数，以下示例为默认参数
  @import '../node_modules/daze-koala/base.styl'

  scale = 2; // 设计稿缩放倍数
  baseFontSize = 10; // 基字号
  layout = 2; // 布局设置

  #app
    margin-top $(60px)

</style>

scale ：设计稿缩放倍数（默认为2），等同第一步中的 scale 参数，两者需保持一致。
baseFontSize ：基字号（默认为10），等同第一步中的 baseFontSize 参数，两者需保持一致。
layout ：布局设置（默认为2），值为1时，生成的css单位为px(第一步中 layout 只能设置为 1), 值为2时，生成的css单位为rem。

结果为：

<style>
  #app {
    margin-top: 3rem;
  }
</style>

设备检测

偶尔可能需要使用设备检测，例如发送短信，android和ios不同，或者同一个页面在微信和支付宝中调用不同的支付接口等等。

import Device from 'daze-koala/device.js'
console.log(Device.mobile())

find(str) ： 查找userAgent是否包含指定字符串。
ios() ： 判断是否为ios系统设备。
iPod() ： 判断是否为apple iPod设备。
iPhone() ： 判断是否为apple iPhone手机。
iPad() ： 判断是否为apple iPad设备。
linux() ： 判断是否为linux系统设备。
android() ： 判断是否为android系统设备。
androidPhone() ： 判断是否为android手机。
androidPad() ： 判断是否为android Pad。
windows() ： 判断是否为windows系统设备。
WindowsPhone() ： 判断是否为WP手机。
WindowsPad() ： 判断是否为WP Pad。
macPC() ： 判断是否为mac PC。
linuxPC() ： 判断是否为linux PC。
windowsPC() ： 判断是否为windows PC。
mobile() ：判断是否为手机。
pad() ： 判断是否为Pad。
pc() ： 判断是否为PC。
alipay() ： 判断是否为支付宝。
weixin() ：判断是否为微信。

工具

// 引入工具
import Tool from 'daze-koala/tool.js'
Tool.getUrlValue('key')

getUrlValue(key) ：获取url中通过get方式传的某个 key 的值。
trim(text, symbol) ：去空格或其他字符。text：字符串；symbol（可选）：指定字符，多个字符可用 | 分割，默认去空白。
isBankCard(cardid) ：验证银行卡格式。校验16-19位符合Luhm校验规则的银行卡号，部分银行卡号不符合次规则，例如平安银行的的部分卡号。
isIDCard(cardid) ：验证身份证格式。校验大陆18位身份证。
isMobile(mobile, kind) ：校验手机号。mobile：手机号码；kind（可选）：cmcc ：移动，cucc：联通，ctc：电信。不填则判断是否为手机号。
formatTime(num, double) ：格式化时间。num：1970年至今毫秒数；double（可选）：时间是否保持两位，true：两位（字符串），false：自动（数字）。fullTime 均为字符串并保持两位。year：年，month：月，day：日，hours：时，minutes：分，seconds，秒。
split(str, kind, symbol) ：分割字符串。str：待分割字符串；kind（可选）：种类，tel[3,4,4]，card[4,4,4,4]或自定义[x,x,x,x]，默认tel[3,4,4]；symbol（可选）：分隔符，默认空格。

弹出框组件

<!-- App.vue -->
<template>
   <dk-alert></dk-alert>
</template>

// main.js
import Alert from 'daze-koala/alert'
Vue.use(Alert)

实例中使用 this.$alert.setParams({}) 进行设置

...
methods: {
  fun: function () {
    this.$alert.setParams({
      // 参数设置
    })
  }
}

msg ：弹出提示（string/array）；传入 string 默认居中显示，传入 array 例如['内容', '对齐方式（left/center/right）']。
info ：详情（string/array）；传入 string 默认左对齐（左对齐文字两端对齐，居中和右对齐文字不能两端对齐，另：手机不支持相关属性也无法文字两端对齐），传入 array 例如['内容', '对齐方式（left/center/right）']。
btn ：按钮，只用来关闭弹出（string/array）；传入 string 为按钮文字，默认为'确定'，右对齐，传入 array 例如['按钮文字', '对齐方式（left/center/right）']。
auto ：自动关闭时间（number），单位毫秒，默认2500毫秒。0为不自动关闭，此时出现按钮。
show ：是否显示（true/false）。
theme ：样式（number），数值1-7，彩虹色。

// 示例
this.$alert.setParams({
  msg: '提示',
  info: '这里是提示内容',
  show: true
})

输入框分割指令

// main.js
import Split from 'daze-koala/split'
Vue.use(Split)

<template>
  <!-- 默认数字，手机号，空格分割 -->
  <imput type="text" v-dk-split />
  <!-- 可自定义 -->
  <input type="text" v-dk-split="{kind : 'card', symbol : '-', char : /^[0-9x]*$/}">
</template>

kind ：分割类型（string/array），预置'card'和'tel'两种，默认'tel'。如需自定义，可输入数组，例如手机号是[3,4,4]。
symbol ：分割字符（string），默认空格。
char ：可输入字符（regex），默认只能输入数字。

倒计时组件

<div v-on:click="change('is_start')">
  <dk-timer v-bind:time="30" v-bind:start="is_start" message="还有X秒" from="获取验证码" to="重新获取" v-on:reset="reset('is_start')"></dk-timer>
</div>

export default {
  name: 'app',
  data () {
    return {
      is_start: false
    }
  },
  methods: {
    change (key) {
      if (!this[key]) {
        this[key] = true
      }
    },
    reset (key) {
      this[key] = false
    }
  }
}
// is_start为实例中data中的值，初始false，当变为true的时候开始倒计时
// is_reset为实例中mothods中的方法，用来重置is_start值

message ：倒计时文字（string），'X'代表倒计时数字。
time ：秒数（number）。
start ：开始-必填（true/false）。
from ：初始文字（string）。
to ：倒计时结束文字（string）。

后记

这是呆拉第一阶段，仅仅提供适配和有限的常用工具，没有更多的组件，也并没有更多的去考虑PC和Pad，主要针对手机页面的适配。

• 未来的第二阶段
  呆拉将成为一个完整的组件库，包括常用的各类组件。
• 未来的未来的第三阶段
  呆拉将成为一个覆盖PC和手机端的组件库。