kb-app-ui 移动端UI组件 （postcssrc 移动端适配方案 https://segmentfault.com/a/1190000021196911?utm_source=tag-newest）

$3

npm i kb-app-ui

Project setup

``
npm install
`
npm run dev
`

$3

`
npm run lib
`

$3

`
npm publish --registry=https://registry.npmjs.org/
``

-----examples // 原 src 目录，改成 examples 用作示例展示
-----packages // 新增 packages 用于编写存放组件
-----public // 公共资源

-----gitignore // 设置git忽略文件

-----npmignore // 设置npm忽略文件
-----vue.config.js // 对内部webpack 配置修改



// main.js

// 本地导入组件库
import kBAppUI from '../packages/index';

// npm 导入组件库
import kBAppUI from 'kb-app-ui';

// 注册组件库
Vue.use(kBAppUI);;

全局调用 如TqHeader


// 顶部导航栏组件
1、TqHeader
props: {
title: { // 标题
type: String,
default: '标题'
},
rightText: { // 右边标题
type: String,
default: ''
},
leftText: { // 左边标题
type: String,
default: ''
},
backNumber: { // 返回第几层
type: Number,
default: -1
}
},

methods: {
// 右边标题点击事件
rightOnClick() {
this.$emit('rightOnClick', '')
},
// 左边标题点击事件
leftOnClick() {
this.$emit('leftOnClick', '')
}
}
// 列表组件
2、TqCellBox
props: {
label: { // 栏目名称
type: String,
default: '栏目名称'
},
val: { // 初始值
type: String,
default: ''
},
placeholder: { // 输入提示语
type: String,
default: '扫描或输入条码'
},
readonly: { // 是否禁止填写
type: Boolean,
default: false
}
}
methods: {
// 失去焦点返回数据
onblur() {
this.$emit('getValue', this.value)
}
}

// 弹窗组件
3、TqPopup
props: {
isShow: { // 是否显示
type: Boolean,
default: false
},
title: { // 标题
type: String,
default: ''
},
confirmText: { // 确定按钮文本
type: String,
default: '确定'
},
cancelText: { // 取消按钮文本
type: String,
default: '取消'
},
hasCancelText: { // 是否有取消按钮
type: Boolean,
default: true
}
}
methods: {
// 点击取消按钮事件
doCancel() {
this.$emit('doCancel')
},
// 点击确认按钮事件
doConfirm() {
this.$emit('doConfirm')
},
// 关闭弹窗按钮事件
doHide() {
this.$emit('doHide')
}
}


// 浮框提示
4、TqTips
props: {
left: { // 向左坐标
type: Number,
default: 0
},
top: { // 向右坐标
type: Number,
default: 0
},
text: { // 内容文本
type: String,
default: '清除'
},
isShow: { // 是否显示
type: Boolean,
default: false
}
}
methods: {
doConfirm() { // 点击事件
this.$emit('doConfirm')
}
}

// 顶部搜索弹窗
5、TqSearch
props: {
isShow: { // 是否显示
type: Boolean,
default: false
},
title: { // 标题0
type: String,
default: ''
},
confirmText: { // 查询文本
type: String,
default: '查询'
},
cancelText: { // 重置文本
type: String,
default: '重置'
},
hasCancelText: { // 是否有重置按钮
type: Boolean,
default: true
}
}
methods: {
// 重置按钮点击
doCancel() {
this.$emit('doCancel')
},
// 查询按钮点击
doConfirm() {
this.$emit('doConfirm')
},
// 查询弹窗隐藏
doHide() {
this.$emit('doHide')
}
}


6、TqInput
props: {
val: { // 输入绑定的数据
type: String,
default: ''
},
title: { // 标题
type: String,
default: ''
},
placeholder: { // 输入前提示语
type: String,
default: '请输入'
},
hasPadding:{ // 是否有边距
type: Boolean,
default: true
}
}
methods: {
// 输入框失去焦点向父级传递数据
onBlur() {
this.$emit('onBlur', this.value)
}
}


7、TqSelect
props: {
val: { // 输入绑定的数据
type: String,
default: ''
},
title: { // 标题
type: String,
default: ''
},
placeholder: { // 输入前提示语
type: String,
default: '请选择'
},
hasPadding:{ // 是否有边距
type: Boolean,
default: true
}
}

methods: {
// 点击事件向父级传递数据
onSelect() {
this.$emit('onSelect')
}
}

8、TqBtn
props: {
btns: { // 按钮名称
type: Array,
default: () => ['确定']
},
}
methods: {
// 点击事件向父级传递数据
btnClick(index) { // index:为btn索引
this.$emit('btnClick', index)
}
}



适配方案配置文件
.postcssrc.js

// https://github.com/michael-ciniawsky/postcss-load-config

const path = require('path');
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
"postcss-aspect-ratio-mini": {},
"postcss-write-svg": {
utf8: false
},
"postcss-cssnext": {},
"postcss-px-to-viewport": {
viewportWidth: 375, // (Number) The width of the viewport.
viewportHeight: 595, // (Number) The height of the viewport.
unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
viewportUnit: 'vw', // (String) Expected units.
selectorBlackList: ['.ignore', '.hairlines', /^\.weui/, /^\.vux/], // (Array) The selectors to ignore and leave as px.
minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
mediaQuery: false // (Boolean) Allow px to be converted in media queries.
},
"postcss-viewport-units":{},
"cssnano": {
preset: "advanced",
autoprefixer: false,
"postcss-zindex": false,
"postcss-reduce-idents": false
},
},
"exclude": [
path.resolve(__dirname, "node_modules/vux")
],
}