poppy-ui v5.0.12

快速上手

poppy-ui开发说明

组件poppy-ui引用

方式一：ANPM 引用

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

引入方式1：全部引入

一般在入口文件main.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：按需引入

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

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

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

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

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

所有基础组件以及模块：

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'

所有可按需加载的组件及模块

import {
  Keyboard,
  Secure-popup
} from '@pa/poppy-ui'

示例

<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 引入

<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">

示例

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

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

单个组件引入

以键盘组件为例

<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">

示例

  <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>

    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 插件，可以更优雅引入组件模块以及对应的样式

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

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

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

一般在入口文件main.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