README

quick-vue-ui

quick-vue-ui for Vue 3.0

基于 vue3.0 的组合式 API，重构每一个组件

更新说明

各版本更新说明

0.7.3

2022/2/19

vue 升级3.2.31
vite 升级2.8.4
confirm 支持双向绑定 modelValue

0.7.2 [纪念版]

2022/1/11

DateTime 修正多语言 bug

0.7.1

2022/1/11

lang 多国语言
Table
- exportTo 修正文件名输出错误
Input 优化样式,新增 size.small
Button 优化样式
ButtonGroup 优化样式

0.7.0 [里程碑]

2022/1/9

vue 升级3.2.26
vue-router 升级4.0.12
vite 升级2.7.10
quick.lib 升级0.4.4 更新了日期时间差方法 lib.date
tabs
- 新增拖放标签页列表排序
- 新增item.key 自定义解决拖放与删除插槽更新 vue splite更新 dom 问题
- 新增item.byIndex 标签事件来源索引号
Table
- 新增拖放表头排序
- 更新排序方法
- exportTo 新增下载方法
Frames 更新窗体内部排序参数
global 新增表格导出 tableExportToCSV
Select 支持绑定值为 null
confirm 修正多事件并发动画导致节点错误
Modal 修正过渡动画效果
Row Col 更新 Grid 样式处理
Upload 修正样式与参数 multiple 默认不允许多选上传
DatePicker 更新日期输出格式 yyyy/MM/dd
Button 新增配置 type.mark

0.6.9

2021/12/14

Table 修正排序后勾选的 check.value 值绑定错误

0.6.8

2021/12/14

Table 表格勾选新增 check.data,check.eventKey 绑定值,修正无表头内容绑定
global 新增日期标题bindDateHead,生成表格排序方法bindDataSort

0.6.7

2021/12/4

TextJson 指令,onEvent.cmd 新增内容更新：change,格式化format
Frames 调整来源窗口命名 onEvent.byNamed
confirm 新增来源窗口命名 onEvent.byNamed
qv-date 修正样式z-index

0.6.6

2021/12/2

quick.lib 升级0.4.3 调整命名lib.base64

0.6.5

2021/12/2

quick.lib 升级0.4.2 解决base64不兼容c#中文编码问题
Tooltip 新增属性 clicked 是否关闭点击触发
Form 更新样式 Tooltip
Table 调整样式

0.6.4 [里程碑]

2021/11/25

quick.lib 升级 0.4.1
app.use('qveui',{register}) 组件引入命名规则
modal 组件模式调整支持注册组件名
confirm 新增关闭通知closed
Input 新增Icon自定义点击命令参数cmd
Tree 修正显示样式,事件 onEvent 新增参数主键 primary,多选checks
Checkbox 新增参数 index

0.6.3

2021/11/23

Table 调整样式，新增列锁定参数 lock
Select 修正值绑定，
Paged 分页参数绑定
Tag 新增参数 index

0.6.2

2021/11/21

quick.lib 升级 0.4.0 代码压缩 bug

0.6.1

2021/11/20

Text 新增文本显示组件
Form 优化样式配合 Text 组件使用
新增基础样式全局定义

依赖

quick.lib
[iconfont.css] 阿里图标需要注释里面 .iconfont>font-size 默认大小

开发环境

developer

安装

## 安装
yarn

# npm 安装
npm i qveui

# 调试vue
npm run dev

# 调试发布项目
npm run web

# 项目发布
npm run release

# 打包库
npm run lib

/node_modules/.vite_opt_cache

全局配置

项目组件库引用 components/index.js

/** 组件库 */
import qveui from 'qveui';
import 'qveui/fonts/iconfont.css';

/** 网络请求库 */
import { request, fail } from './utils/request';

/** 原生方法 */
import * as $vue from './vue.api';

/** 项目自定义组件*/
const components = {};

const install = function (app, opts) {
  // 判断是否安装
  if (install.installed) return;

  Object.keys(components).forEach((key) => {
    app.component(key, components[key]);
  });

  app.use(qvui, {
    ...opts,
    config: {
      app: {
        // 当前应用key '170001',
        key: '2020',
        // 应用Key 对应的授权验证码，默认为ap
        secret: 'u37e'
      },
      http: {
        setting: {
          // 跨域时是否发送cookie
          withCredentials: true,
          // 服务器地址
          baseURL: url.host.base
        },
        // 请求库
        request,
        // 请求失败处理
        fail
      }
    },
    // 外挂
    plus: {
      // 挂载的名称
      key: '$plus',
      // 绑定到window原生对象
      window: true,
      // 添加的组件
      add: {
        url,
        router: $router
      }
    }
  });

  /** 全局绑定调用 */
  app.config.globalProperties.$config = qvui.config;
};

// 导出该组件
export default {
  install
};

App.vue 样式库

<template>
  <!-- 注入到index.html>div>#appTopBody -->
  <teleport to="#appTopBody">
    <loading-bar />
    <Message />
  </teleport>
  <router-view></router-view>
  <teleport to="#endOfBody">
    <Frames />
  </teleport>
</template>
<script>
export default {
  name: 'App',
  setup(props, {}) {
    // 原生扩展
    const $plus = window.$plus;

    // vue 3.0 上下文引用
    // const { ctx } = window.$plus.vue.getCurrentInstance();
    // const $plus = ctx.$plus;

    $plus.message.info('请求服务器');

    // 当前组件版本
    console.log($plus.qveui.version);
  }
};
</script>
<style lang="less">
@import 'qveui/styles/index.less';
</style>

局部使用

import { qveui } from 'qveui';

// 全局加载进度条
qveui.loading.start();

// 全局消息错误提示
qveui.message.error('请求服务器响应超时');

最后

如果感觉对您有用，欢迎 star

Usage no npm install needed!