更新记录

1.2.4（2024-04-11）

修改uni引用，优化BUG

1.2.3（2024-04-09）

重写parse-url.js 修复若干BUG

1.2.2（2024-04-03）

1. q-page优化，自动切换portrait，landscape样式
2. 新赠q-dialog-plus组件。 参数 title 标题 page-mode 页面模式，头尾固定

插槽 heder navigation footer

<q-dialog-plus v-model="visib" title="弹窗标题">
弹窗内容
</q-dialog-plus>

平台兼容性

kv-qui

基于Quasar重构的UniAPP UI解决方案。

国内可以访问gitee: https://gitee.com/kevinui/qui-demo

安装配置

在根目录新建配置文件 qui.config.js 文件名不要修改，组件内有引用。放在与main.js同一目录。

// 引入插件，按需安装
import LocalStorage from '@/uni_modules/kv-qui/plugins/LocalStorage.js'
/*
* dayjs插件，用于日期选择、日历等插件
* 如果项目已经npm安装，可以改为自己安装的，防止重复引用
*/
import dayjs from '@/uni_modules/kv-qui/plugins/dayjs/index.js';
import zhCn from '@/uni_modules/kv-qui/plugins/dayjs/locale/zh-cn';
dayjs.locale(zhCn);

// 配置内容
export default {
    // UI 
    config: {
        // 系统主题，不设置则获取
        dark: false,
        // 默认 web-view 路径，$uni.openUrl({href:''})
        webViewPath: '/pages/index/broswer'
    },
    // plugins 插件
    plugins: [
        LocalStorage,
    ],
    // 第三方插件
    external: {
        dayjs
    }
}

编辑main.js主文件，安装UI组件

// 第一步：引入Qui、配置文件、图标文件(根据需求)
import Qui from '@/uni_modules/kv-qui/index.js'
import QuiConfig from './qui.config.js'
// 引入图标文件，在extras目录中有多个图标文件，根据需求引入
import '@/uni_modules/kv-qui/extras/material-icons/material-icons.css'

// 第二步：安装组件（在createApp函数中），大约在18行下面
app.use(Qui, QuiConfig)

编辑App.vue，引入CSS样式

/* #ifdef MP */
@import './uni_modules/kv-qui/css/index.sass';
/* #endif */

基础说明

1. Layout 框架布局
2. Grid Gutter 网格间距
3. Grid Row 布局网格

持续更新中。。。

组件应用

1. Avatar 头像
2. Icon 图标
3. Image 图片
4. Button 按扭
5. Badge 徽标
6. Chip 碎片
7. Card 卡片
8. List & Item 列表
9. Links 连接
10. Linar Progress 进度条
11. Input & Field 输入框
12. Form 表单
13. Checkbox & Radio 单复选框
14. Date & Picker 选择器
15. Tabs 选项卡
16. Swiper 滑动切换

插件应用

1. UniApp 界面封装
2. LocalStorage 缓存