# poppy-ui

> UI Library for mobile

Latest version **5.0.12** (published 2020-12-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install poppy-ui
pnpm add poppy-ui
yarn add poppy-ui
bun add poppy-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.0.12 |
| Published | 2020-12-21 |
| First published | 2020-12-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 79.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | harry32009 |
| Keywords | UI, Vue |

## Links

- npm: https://www.npmjs.com/package/poppy-ui
- Repository: http://gitlab.pab.com.cn/ARCH/front-arch/poppy-ui
- npm.io page: https://npm.io/package/poppy-ui

## Dependencies (5)

- [dayjs](https://npm.io/package/dayjs.md) 1.9.4
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.12.1
- [@pa/poppy-icon](https://npm.io/package/@pa/poppy-icon.md) ^1.2.2
- [@babel/runtime-corejs3](https://npm.io/package/@babel/runtime-corejs3.md) ^7.12.1

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 5.0.12 (latest) — 2020-12-21

## README

## 快速上手
### poppy-ui开发说明

### 组件poppy-ui引用

#### 方式一：ANPM 引用

```shell
$ anpm install @pa/poppy-ui --save
```

#### 引入方式1：全部引入 
一般在入口文件main.js中：

```js
import Vue from 'vue'
import Poppy from '@pa/poppy-ui'
import '@pa/poppy-ui/__build__/lib/style.css'

Vue.use(Poppy)
```

全部引入了后就相当于全局注册了，直接用就可以了。不需要在每个`.vue`文件中`import { … }`（局部引用），以及`components{ … }`局部注册了。

#### 引入方式2：按需引入

```js
 import '@pa/poppy-ui/__build__/lib/style.css'
 import {
    Button,
    Keyboard
  } from '@pa/poppy-ui'
```

  >注意： 按需引入的话，是不会打包基础样式部分的，所以在使用的时候需要引入 style 模块。

#### 注册方式 (可选全局注册也可以选择局部注册)

```js
  // 全局注册
  Vue.use(Keyboard) // 在入口文件中

  // 或者局部注册
  // 某个组件中
  {
    components: {
      "poppy-keyboard": Keyboard
    }
  }
```

所有基础组件以及模块：

```js
import {
  Style,
  Button,
  Icon,
  Loading,
  Checkbox,
  CheckboxGroup,
  RadioGroup,
  Radio,
  Switch,
  Popup,
  Toast,
  Input,
  Picker,
  Select,
  Dialog,
  Mask,
  progressBar,
  Slider,
  Search,
  Counter,
  TabBar,
  TabPanels,
  TitleBar,
  NavigationBar,
  BetterScroll,
  createAPI
} from '@pa/poppy-ui'
```
所有可按需加载的组件及模块
```js
import {
  Keyboard,
  Secure-popup
} from '@pa/poppy-ui'
```

#### 示例

```html
<template>
  <poppy-button @click="showDialog">show dialog</poppy-button>
</template>

<script>
  export default {
    methods: {
      showDialog() {
        this.$createDialog({
          title: '支付密码已被锁定',
          onConfirm: () => {
            this.$createToast({
              text: '点击确认按钮'
            }).show()
          }
        }).show()
      }
    }
  }
</script>
```

#### 方式一：CDN 引入

```html
<script src="https://cdn.sdb.com.cn/poppy/0.0.1/poppy.min.js"></script>
<link rel="stylesheet" href="https://cdn.sdb.com.cn/poppy/0.0.1/poppy.min.css">
```

#### 示例

```html
  <div id="test">
      <poppy-button size='medium' @click="click">{{msg}}</poppy-button>
    </div>
```

```js
    Vue.use(poppy.Button)
    window.vm = new Vue({
      el:'#test',
      data:function(){
        return {
          lowerCaseVal: 'www',
          msg:"按钮"
        }
      },
      components: {
        'poppy-button' : poppy.Button
      }
    })
```

#### 单个组件引入

以键盘组件为例

```html
<script src="https://cdn.sdb.com.cn/poppy/0.0.1/keyboard/keyboard.min.js"></script>
<link rel="stylesheet" href="https://cdn.sdb.com.cn/poppy/0.0.1/keyboard/keyboard.min.css">
```

#### 示例

```html
  <div id="test">
      <poppy-button :big='true' @click="open('keyboard1')" >小写</poppy-button>
      <poppy-keyboard  type="lower"  :value = "lowerCaseVal"  @handle-click="handleClick1" ref="keyboard1"></poppy-keyboard>
  </div>
```

```js
    Vue.use(keyboard)
    window.vm = new Vue({
      el:'#test',
      data:function(){
        return {
          lowerCaseVal: 'www',
          msg:"按钮"
        }
      },
      methods:{
        open(keyboard) {
        this.$refs[keyboard].open()
        },
        handleClick1(value) {
        this.lowerCaseVal = value
      },
        click(){
          this.msg="123",
          dialog.$create({
          title: '支付密码已被锁定',
          onConfirm: () => {
            this.$createToast({
              text: '点击确认按钮'
            }).show()
          }
        }).show()
        }
      },
      components: {
        'poppy-keyboard' : keyboard
      }
    })
```

### 简洁引用方式

#### 推荐使用 babel-plugin-transform-modules 插件，可以更优雅引入组件模块以及对应的样式

```shell
$ anpm install babel-plugin-transform-modules -D
```

然后配置下这个插件，修改 .babelrc：(添加到plugins中去)

```js
{
    "plugins": [
    ["transform-modules", {
      "poppy-ui": {
        "transform": "@pa/poppy-ui/__build__/lib/${member}",
        "preventFullImport": true,
        "style": {
          "ignore": ["create-api", "better-scroll"]
        }
      }
    }]
  ],
}
```

一般在入口文件main.js中：

```js
import Vue from 'vue'
import Poppy from 'poppy-ui'
import 'poppy-ui/__build__/lib/style.css'

Vue.use(Poppy)
```

## 二次开发
### 引入新组件
1、在src/components/下添加组件实现页面
2、在src/modules/下添加注册文件
3、在src/module.js中添加对应组件
3、在src/index.js中export对应组件



1. anpm login --registry=http://repo.pab.com.cn/artifactory/api/npm/npm-arch-frontend/
2. anpm publish --registry=http://repo.pab.com.cn/artifactory/api/npm/npm-arch-frontend/

打内测tag
anpm dist-tag add @pa/poppy-ui@5.0.11-innertest-20201015 innertest
设置最新版本
anpm dist-tag add @pa/poppy-ui@5.0.10-patch-4 latest
查看所有tag
anpm dist-tag ls

---
_Source: https://npm.io/package/poppy-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._