o UI for Vue

移动端ui库 前缀采用 o 开头

目前为测试版本

线上地址 - Demo

基本用法

  npm i ui_ldf -S

  import 'ui_ldf/lib/ui.min.css'
  import UI from 'ui_ldf'
  Vue.use(UI)

  <template>
    <div>
      <o-navbar>导航</o-navbar>
      <span font="16" color="bgred yellow">字体</span>
    </div>
  </template>

  <script>
    export default {
      created() {
        this.$pop.toast('hello world')
      }
    }
  </script>

单独引入

const prefix = 'O'
import {Ul, Li} from 'ui_ldf/lib/src/Uli'
import {Tabar, TabarItem} from 'ui_ldf/lib/src/Tabar'
import Clocker from 'ui_ldf/lib/src/Clocker'
import {Checkbox} from 'ui_ldf/lib/src/Form'

Vue.component(prefix + Tabar.name, Tabar)
Vue.component(prefix + TabarItem.name, TabarItem)
Vue.component(prefix + Clocker.name, Clocker)
Vue.component(prefix + Ul.name, Ul)
Vue.component(prefix + Li.name, Li)
Vue.component(prefix + Checkbox.name, Checkbox)

// 服务类
import pop from 'ui_ldf/lib/src/$pop'
import Cache from 'ui_ldf/lib/src/$Cache'
import notice from 'ui_ldf/lib/src/$notice'
Vue.prototype.$pop = pop(Vue)
Vue.prototype.$S = new Cache
Vue.prototype.$Cache = Cache
Vue.prototype.$notice = notice

postcss-pxr-to-rem

pxr自动转rem的单位，不妨试试

• 可配合flexible.js使用 内置css已经适配了media几种
• 12pxr 对应 pc下的12px
• 自动pxr转rem, .postcssrc.js 配置如下：

  "postcss-pxr-to-rem": {
      pixel: 50,
      fontSize: 1,
      unit: 'rem',
      mediaQuery: false,
      selectorBlackList: []
  }

  width: 100pxr;
  font-size: 16pxr;

version

• 2.3.4

  • 基础组件基本完成，缩减体积80%以上 [gzip压缩: js 16k左右 css 5k左右]
  • 增加基础css bfc
  • css border 增加两种风格
  • 组件 Checkbox Radio 风格微调 新增 不确定 blurry 样式
  • 新增可选组件 Tabbar
  • loading组件默认保留一个 其它可选

• 2.3.3

  • 服务类 $pop $notice 参数统一
  • 基础颜色调整
  • 新增服务类 $Cache

• 2.3.2

  • Toggle组件 移到可选
  • 服务 $notice $cache 移到可选
  • 新增服务 $pop [toast, alert, loading]
  • 新增可选表单组件 Checkbox, Radio
  • 基础css调整
  • 修复已知bug

• 2.3.1

  • Modal组件

• 2.3.0

  • 重构
  • 保留基础css
  • 保留基础组件
  • 扩展组件可选
  • 体积大大减小

• 1.0.7

  • 修复 styl 文件内 pxr 不自动转 rem 问题

• 1.0.8

  • 废弃 icon-svg 自行使用 vue-svg-icon等
  • 缩小体积 只允许 use 方式

• 2.0.0

  • 使用前缀由 ui -> o [为了简化]

• 2.0.3

  • 增加stickty组件

• 2.0.4

  • 增加countup组件

• 2.0.5

  • 增加表单验证
  • 修复modal 等bug

• 2.0.6

  • 美化表单验证以及增加自定义插槽

• 2.0.7

  • 表单验证支持多规则
  • input组件
  • checkbox组件
  • radio组件
  • toggle组件
  • 优化ul li等

• 2.0.9

  • 组件css全部剥离
  • 增加$notice服务

• 2.0.10

  • 增加Tag
  • 修复$notice

• 2.0.11

  • 增加Badge 徽章
  • 增加Tag 标签
  • 增加checkbox, radio 两种样式
  • 增加Clocker 倒计时

• 2.0.12

  • 增加Upload

• 2.0.13

  • 修改modal弹出方式

• 2.0.14

  • 修改modal不检测body滚动

• 2.0.15

  • 增加Region地区组件

• 2.0.16

  • 修复Radio value不能为对象问题

• 2.0.17

  • Upload 删除第二个参数变更为null

• 2.0.18

  • Upload 增加裁剪功能

• 2.0.19

  • css修改[颜色，边框等]

• 2.0.21

  • 去除颜色 grey

• 2.0.22

  • Pager组件

• 2.0.23

  • 移除Region地区组件

• 2.1.0

  • 引入方式支持单独引入独立模块

• 2.2.0

  • 重新组织css基础样式

• 2.2.1

  • 日期组件增加时间
  • 重整说明文档

• 2.2.2

  • 新增时光轴 Timeline组件

• 2.2.3

  • 新增步进器 Step组件

• 2.2.6

  • 修复Pagerbug
  • 修复padStart引起的bug

power by LDF QQ 47121862