lnn-droplet-ui

weex ui

Usage no npm install needed!

<script type="module">
  import lnnDropletUi from 'https://cdn.skypack.dev/lnn-droplet-ui';
</script>

README

水滴UI

install

npm i weex-droplet-ui -S

playground扫一扫查看demo演示

扫一扫

HTML5 demo演示

https://hbteam.github.io/weex-droplet-ui/index/index.html
扫一扫

关于文档

https://houbank.github.io/dropletui-docs

联系我们

如您在使用我们的“水滴UI”，有任何问题可以添加微信号springalsky，或者给我们提issue。

配置

因未编译成ES5发布到npm，所以webpack.config.js需要配置排除node_modules下包含weex的文件。

{
    test: /\.js$/,
    use: [{
      loader: 'babel-loader',
    }],
    exclude: /node_modules(?!\/.*(weex).*)/
}

UI组件代码按需加载

  • npm i babel-preset-stage-0 babel-plugin-component -D
  • .babelrc配置如下
{
    "presets": ["es2015", "stage-0"],
    "plugins": [
        [
            "component",
            {
                "libraryName": "weex-droplet-ui",
                "libDir": "packages",
                "style": false
            },
            ...其他UI，如weex-ui
        ]
    ]
}

Usage

<template>
    <div>
        <wx-button @wxClick="handleClick">点击测试</wx-button>
    </div>
</template>

<script>
    import { WxButton } from 'weex-droplet-ui';
    const modal = weex.requireModule('modal');
    // import WxButton from 'weex-droplet-ui/packages/wx-button';
    export default {
        components: { WxButton },
        methods: {
            handleClick () {
                modal.toast({
                    message: 'test'
                });
            }
        }
    };
</script>