qveui v0.8.9

quick-vue-ui

quick-vue-ui for Vue 3.0

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

• 组件文档

• qveui 3.x

• vue 3.x 变化

• vue 3.x api

• JSX(TSX)风格

• vue 3.x github

• vue-router github
• vite 配置文档
• 自定义元素：在 HTML 中定义新元素

更新说明

• 各版本更新说明

0.8.9

2023/2/15

• Select 修正 value绑定显示问题
• Tabs 修正左右滑动条按钮宽度

0.8.8

2023/2/14

• vite:4.1.1
• rollup:3.15.0
• @rollup/plugin-terser:0.4.0
• @babel/core:7.20.12
• d3 引入绘图支持
• DrawLine 基于 d3 的曲线图表组件
• paged 支持多国语
• Select 修正 value绑定显示问题
• DatePanel 修正年选择减 1 的问题

0.8.7 里程碑

2023/2/7

• Select 修正 vue 版本语法变更引起 bug
• Radio 修正 vue 版本语法变更引起 bug
• table.th 修正拖拽调整宽度编译后的 bug，无表头也支持拖动调整宽度
• table 新增单元格合并，多表头组合显示，无表头可配置勾选与序号显示、行显示规则定义待处理拖拽单元格宽度

0.8.6

2022/12/28 大版本更新

• vue:3.2.45
• vue-router:4.1.6
• @vitejs/plugin-vue:4.0.0
• quick.lib:0.4.7
• vite:4.0.3
• @babel/core:7.20.7
• table.columns 数组为空不显示表头
• text 增加双向绑定显示
• TextXml 新增显示组件,支持高亮

0.8.5 里程碑

2022/8/18

• vite:3.0.8
• rollup:2.78.0
• @vitejs/plugin-vue:3.0.3
• Tabs 调整框线主题样式
• Select 修正无绑定值，onEvent.value 值为空

0.8.4

2022/8/12

• vite:3.0.6
• less:4.1.3
• rollup:2.77.3
• vue:3.2.37
• @vue/compiler-sfc:3.2.37
• vue-router:4.1.3
• @babel/core:7.18.10
• async-validator:4.2.5
• @rollup/plugin-node-resolve:13.3.0
• Table
  • foots 底部字段绑定方法回调新增(当前行数据，当前字段名,当前顺序) 比如求和方法(data,key,index)
• modal 对话框新增关闭遮罩属性 masked

0.8.3 里程碑

2022/4/12

• notice 组件优化高度样式
• form 表单组件优化 radio 样式
• form 表单组件支持必填以外的验证规则

0.8.2

2022/4/1

• vite 2.9.1
• @vitejs/plugin-vue 2.3.1
• vue-router 4.0.14

0.8.1

2022/3/30

• css 全局样式 新增 qmt-025,qpt-025,qwr
• loadScript新增加载 js 脚本
• TextUbb 格式format 支持 ASCII码格式转为ubb
• message 组件优化样式,新增动画支持,type 新增 mark
• notice 组件参数 id 统一为 named ，去掉 show 调整为方法控制 close
• Tag 新增样式 mark text
• LoadingBar 新增样式 mark text

0.8.0

2022/3/20

• vite 2.8.6
• rollup 2.70.1
• @rollup/plugin-node-resolve 13.1.3
• @vitejs/plugin-vue 2.2.4
• @babel/core 7.17.8
• copyValue 原生 js 方式复制内容
• bindForm 绑定原生表单值并默认提交
• ButtonGroup 优化组合样式 Select
• DateBar 新增bind事件
• DatePicker 新增onEvent事件触发关闭close
• TimePicker 新增onEvent事件触发关闭close
• Table
  • Title 表头支持 html
  • 修正拖拽调序与宽度拖拽调整的 bug

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

依赖

• 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

• vite 清除缓存目录，解决热更新问题

/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