qveui

v0.8.9

Published

2 years ago

Quick vue 3.x UI components styled

Downloads

0High
0Medium
0Low

appcn

quick vue vue3.x ui

quick-vue-ui

quick-vue-ui for Vue 3.0

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

更新说明

各版本更新说明

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

/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