kb-app-ui v0.2.5

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

安装

npm i kb-app-ui

Project setup

npm install

npm run dev

### 打包组件

npm run lib

### 打包组件

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
<tq-header rightText='查询' @rightOnClick='rightOnClick'></tq-header>

// 顶部导航栏组件
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")
  ],
}