Daze-koala NPM

Daze-Koala

说明

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

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

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

呆拉已包含reset重置样式。

前期准备

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

基于 webpack 构建 vue 项目: $ vue init webpack my-project 。
呆拉框架css基于stylus构建，需安装 stylus ：$ npm install stylus --save-dev 。
vue-cli构建项目中使用stylus，需安装 stylus-loader ：$ npm install stylus-loader --save-dev 。
安装 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（可选）：种类，tel3,4,4，card4,4,4,4或自定义x,x,x,x，默认tel3,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和手机端的组件库。

@everything-registry/sub-chunk-1452 @zalastax/nolb-daz

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago