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) {...}