wdfe / wdui Goto Github PK

View Code? Open in Web Editor NEW

245.0 245.0 44.0 24.04 MB

Mobile UI Components Library based on Vue 2.0 at Weidian

Home Page: https://wdfe.github.io/wdui/

License: MIT License

JavaScript 56.00% CSS 1.14% Vue 41.80% HTML 1.05%

ui-kit vue vue-components vuejs

wdui's Introduction

WDUI

项目主页

安装

npm i wdui@latest --save-dev

引入

整体引入

import Vue from 'vue'
import * as wdui from 'wdui' //整体引入
import 'wdui/lib/styles/theme-default/index.css' //引入样式文件

Vue.use(wdui)

按需引入（使用 babel-plugin-component 插件）

npm i babel-plugin-component --save-dev

修改 babel 配置文件 .babelrc, 添加 babel-plugin-component 插件

{
  "plugins": ["transform-vue-jsx", "something else" ,["babel-plugin-component", {
    "libraryName": "wdui",
    "style": false
  }]],
}

按需引入

import {Header} from 'wdui'

export default {
  components: {
    'wd-header': Header
  }
}

Tips

全部组件使用 REM 布局实现多终端适配，使用本组件库时请搭配使用 lib-flexible 方案。
兼容性: Android 4.4 + ， iOS 6 +

Contribute

请参考 Contribute Guide 后提交 Pull Request。

Acknowledgements

wdui 开发时曾参考过以下项目:

License

MIT

wdui's People

Stargazers

Watchers

wdui's Issues

Scroller 无限加载组件需支持水平滑动

使用scroller无限加载，顶部tab较长时，不能进行左右滑动～😄

如何在Scroller 中使用Lazyload

我在Scroller 中使用Lazyload ，滚动屏幕，未加载的图片加载不出。

Scroller上拉无效

scroller同时设置了上拉和下拉，结果只有下拉有效，上拉不触发

toast组件实例关闭选项配置

packages目录下的toast.js里的32-41行写法是否欠佳

老铁，表单那些在开发中么？

没有样式重置的文件

引入normalize.css并不完美

有个小建议

progress bar range滑块这样基础的组件应该加进去，觉得还可以

picker组件当数据到底部时，仍然可以继续滑动？

经测试应该是一个bug，当数据触底时，picker组件无论是上滑还是下拉仍继续滑动，正常情况应该回弹回来，其他组件封装的都很棒。

supportWebp 方法导致某些浏览器闪现一个 "!" 符号

现象

在某些浏览器上(具体有哪些未做全面测试), 页面会出现一个 "!" 符合, 然后又消失了.

重现这个 bug 的手机为: iPhone 6 Plus iOS 8.3

浏览器的 UA 信息为:
Mozilla/5.0 (iPhone; CPU iPhone OS 8_3 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12F70

PS: 我们的 webview 用的是 UIWebView, 比较老式

排查问题

为了排查这个诡异的问题, 把代码翻了个遍, 从 install 入口开始, 一个个组件排查, 然后定位在 Lazyload 组件, 最终定位在 src/utils/common.js#supportWebp

    let el = d.createElement('object')
    el.type = 'image/webp'
    // --------------------
    // 就是这个诡异的 "!" 符号会在页面上闪现一下
    el.innerHTML = '!'
    // --------------------
    d.body.appendChild(el)
    support = !el.offsetWidth
    d.body.removeChild(el)

虽然在很多浏览器上都不会闪现出 "!" 符号, 但我们确实碰到了这个问题, 希望改进下方式, 例如给这个元素添加一个透明度的样式, 让其添加到页面时不会显示出来.