更新记录
1.0.2(2024-03-12) 下载此版本
页面走查优化
1.0.1(2024-01-20) 下载此版本
文档更新
1.0.0(2024-01-20) 下载此版本
初始化
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.1.0 app-vue | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | × | √ | √ | √ |
lx-ui
插件市场地址: 点击前往
快速上手之Vue2.0
即使是 Vue2
版本,同样比原版 灵犀UI1.0
做了一些优化,如(车牌号键盘点击1次中文后会自动切英文,倒计时支持毫秒等等)
支持:H5、App(vue)、微信小程序、支付宝小程序(其他小程序未测试)
- 1、main.js 引入 lx-ui
import lxUI from './uni_modules/lx-ui';
Vue.use(lxUI);
- 2、App.vue 引入基础样式(注意style标签需声明scss属性支持)
<style lang="scss">
@import "./uni_modules/lx-ui/index.scss";
</style>
- 3、uni.scss 引入全局 scss 变量文件
@import "@/uni_modules/lx-ui/theme.scss";
快速上手之Vue3.0
不建议把老项目 升级到 Vue3.0 (升级非常麻烦,建议新项目才考虑是否使用Vue3.0)
支持:H5、App(vue)、微信小程序(其他小程序未测试)
目前 发现Vue3 H5版本一个重大bug(与此UI框架无关),调试开发没问题,发布到前端托管时样式会错乱,已确定是HBX的问题,等待HBX修复此问题。(hbx3.3.0版本已修复此问题)
-
1、前置步骤:修改
manifest.json
内的vue
版本为vue3
-
2、项目根目录新增
index.html
文件,文件代码为<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> <title></title> <!--preload-links--> <!--app-context--> <!-- 配置H5的 web图标static/logo.png --> <link rel="icon" href="./static/logo.png" /> </head> <body> <div id="app"> <!--app-html--> </div> <script type="module" src="/main.js"></script> </body> </html>
-
3、main.js 引入 lx-ui
// 引入 灵犀UI UI
import lxUI from './uni_modules/lx-ui';
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
// 使用 灵犀UI UI
app.use(lxUI)
return { app }
}
- 4、App.vue 引入基础样式(注意style标签需声明scss属性支持)
<style lang="scss">
@import "./uni_modules/lx-ui/index.scss";
</style>
- 5、uni.scss 引入全局 scss 变量文件
@import "@/uni_modules/lx-ui/theme.scss";