# qg-pc-plugin

**Repository Path**: chen_gang1231/qg-pc-plugin

## Basic Information

- **Project Name**: qg-pc-plugin
- **Description**: pc端通用插件
- **Primary Language**: Unknown
- **License**: ISC
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2022-12-05
- **Last Updated**: 2023-06-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# qg-pc-plugin

#### 介绍

这是 pc 端通用的插件。有方法过滤器自定义指令 ui 组件

#### 软件架构

软件架构说明

#### 安装教程

1.  npm i qg-pc-plugin

#### 使用说明

1.  支持组件，自定义指令按需引入。组件全局配置例如
    ```/
    color = "green";
    Vue.use(huayu-pc-qg-pulgin,{
        components:["qg-btn","qg-row"],
        directives: ["dialogDrag", "permission"],
        btnStyle: {//这是按钮组件的全局配置
            color: color,
            borderColor: color,
            backColor: color,
        },
        lineColor: color,//这是分割线组件件的全局配置
        checkColor: color,//这是勾选框的全局配置
    })
    ```
2.  关于配置优先级
    1：Vue.use 时只注册不传入配置项的话默认全部组件及指令注册
    2：组件配置优先级遵循 组件传参配置 > 全局配置 > 默认配置
3.  建议使用 rem 单位 这个单位是响应式的，用于适应不同分辨率的屏幕。
4.  如果要使用路径过滤补全过滤器，需要在根路径创建一个 config.js 文件写入接口地址 例如

    ```/
    export default {
        baseUrl:'http://xxxxx',
    }
    ...

    ```

5.  如果要使用 qg-is-show 组件 需要在 vuex 中写入
    ```/
        state:{
            userInfo:{
                userType:值为number类型
            }
        }
    ```
6.  如果要使用 v-permission 指令 需要在浏览器缓存中写入
    ```/
     localStorage.setItem("role",['',''])
    ```
7.  各组件的使用

    ```/
    <qg-border-box color="#333">111</qg-border-box>
    <qg-btn mode="bg" color="green">测试背景按钮</qg-btn>
    <qg-btn max height="50rem" color="green">测试按钮</qg-btn>
    <qg-btn max height="50rem" mode="bg" color="green">测试背景按钮</qg-btn>
    <qg-check v-model="check"></qg-check>
    <qg-hint></qg-hint>
    <qg-is-show :auths="[1]" v-slot="slotData" api="/Organization/GetTenantList">//auths为要显示的权限数组 api可以传递一个调用接口的方法
        <div v-for="(item, i) in slotData" :key="item.id">{{ item.name }}</div>
    </qg-is-show>
    <qg-line color="green"></qg-line>
    <qg-row gridGap="10rem" :number="2"> gridGap 默认10rem number 默认全部放一行 number=2 指一行放两个
        <qg-phone-input v-model="phone"></qg-phone-input> 这是有提示手机号是否合法的组件
        <qg-input v-model="inputValue" @input="change" @focus="focus"></qg-input> 用法与inoput一致 个别方法参数有调整
    </qg-row>
    <qg-image lazy :src="require('@/assets/1500.jpg')" mode="fit" borderRadius="4rem" width="100rem" height="100rem"></qg-image>//lazy：开启懒加载，isAnalyse：开启倍数图，mode：目前只有fit模式
    <qg-select
    <qg-loding :size="20" /> size：设置大小 默认20
    :list="[ { name: 11, id: 1 }, { name: 22, id: 2 }, ]" //传入你的数组options
    range_key="name" range_value="id" //根据不同的数组对象key，value传入不同的key ，value
    v-model="val"
    :immediate="false" //是否立即执行
    @change="change" //change事件回调参数为this.list[this.range_value]
    ></qg-select>//还要很多配置参数自己去探索吧
    ```

    8.  自定义指令的使用
        ```/
        <div v-permission="['Personnel', 'Finance']">测试自定义指令控制权限</div>
        <el-dialog v-dialogDrag title="测试自定义拖拽指令" :visible.sync="visible">
                <div>使用插件形式注册的指令</div>
        </el-dialog>
        <img src="@/assets/1500.jpg" :data-src="require('@/assets/logo.png')" alt="" style="width:500rem; height:500rem" v-lazy/> // data-src 为加载时的图片路径不传则使用默认loding样式
        ```
    9.  过滤器的使用

        ```/
        /**
        * 时间格式化
        * @param {object,string} date = 时间
        * @param {string} format = 'yyyy-MM-dd'
        */
        export const dateFilter = (date, format = "yyyy-MM-dd")=>{...}
        <div>{{des | dateFilter('yyyy-MM-dd hh:mm:ss')}}</div>

        /**
        * 路径过滤补全
        * @param {string} url = '字符串'
        */
        export const imgFilter = (url)=>{...}
        <img :src="imgUrl | imgFilter"></img>

        /**
        * 手机号脱敏处理，保留前三后四
        * @param {string} value = 传入手机号
        */
        export const  phoneHide = (value) =>{...}
        <div>{{phone | phoneHide}}</div>

        /**
        * 姓名截取
        * @param {string} name 姓名
        */
        export function compellationCut(name) {...}
        <div>{{name | compellationCut}}</div>

        /**
        * 身份证号截取
        * @param {string} card 身份证号
        */
        export function idCardCut(card) {...}
        <div>{{identityCard | idCardCut}}</div>

        /**
        * 数字转大写
        * @param {string,number} temp = '字符串'
        */
        export const numFormatter = (temp) =>{...}
        <div>{{'123' | numFormatter}}</div>
        /**
        * 过滤出剩余的秒数 当前时间加上要往后延长的小时数减去记录的时间
        * @param {string,Date} time = 时间
        * @param {number} hour = 小时数 默认0
        * @param {string,Date} currDate = 当前时间最好使用后端服务器的时间 默认js的 new Date()
        */
        export const timestamp = (time, hour = 0, currDate= new Date()) =>{...}
        <div>{{date | timestamp(2)}}</div>
        /**
        * 过滤超额省略加上单位
        * @param {number} Num = '源数值'
        */
        export const matchingNnit = (Num) => {...}
        <div>{{124541| matchingNnit}}</div>
        过滤器也可以在script中引入使用，最好是引入时改个名字例如：
        import {imgFilter as imageFilter} from 'qg-pc-plugin/lib/ways/filter.js'
        let a = imageFilter(string)
        ```

    10. 全局方法的使用
        在方法名前面都有一个\$符

        ```/
        /**
        * 获取开始结束时间参数
        * @param {number,string} id = 前几天 本月 上月 本季 本年
        */
        export const getDateParams = (id) => {...}

        /**
        * ovse 交叉观察器 用于监听某个节点元素出现在屏幕时执行
        * @param {object} observer 实例对象
        * @param {object} node 节点元素
        * @param {object} params 接口参数
        * @param {function} callback 回调函数
        */
        export function ovse(observer, node, params, callback) {...}

        /**
        * 取消触底执行函数的监听
        */
        export function offObserve(observer) {...}

        /**
        * 防抖原理：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数
        *
        * @param {Function} func 要执行的回调函数
        * @param {Number} wait 延时的时间
        * @param {Boolean} immediate 是否立即执行
        * @return null
        */
        export function debounce(func, wait = 500, immediate = true) {...}
        ```