README
快速上手
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对应组件
- anpm login --registry=http://repo.pab.com.cn/artifactory/api/npm/npm-arch-frontend/
- 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