molong/colorui-doc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mjz update

Browse Source
This commit is contained in:
mjz
2023-06-07 23:32:56 +08:00
parent 1e24f6a9d3
commit 75314726b8
12 changed files with 996 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/10.文档/30.交互组件/10.操作条/10.底部操作条.md
+227
View File
@@ -17,3 +17,230 @@ article: false
2. `pages.json` 文件中的 `pages` 数组中第一项表示应用首页，如果项目有引导页，则根据项目的逻辑来做调整。
3. 示例中通过变量 `PageCur` 来切换不同 `tabBar` 页面，控制 `tabBar` 图标文字的样式切换，同时也控制需要显示对应 `tabBar` 的页面（组件引入）。
::: details 点此查看官方示例
```vue
<template>
<view>
<!-- 这三个是对应的页面 -->
<basics v-if="PageCur=='basics'"></basics>
<components v-if="PageCur=='component'"></components>
<plugin v-if="PageCur=='plugin'"></plugin>
<!-- 底部操作条 -->
<view class="cu-bar tabbar bg-white shadow foot">
<view class="action" @click="NavChange" data-cur="basics">
<view class='cuIcon-cu-image'>
<image :src="'/static/tabbar/basics' + [PageCur=='basics'?'_cur':''] + '.png'"></image>
</view>
<view :class="PageCur=='basics'?'text-green':'text-gray'">元素</view>
</view>
<view class="action" @click="NavChange" data-cur="component">
<view class='cuIcon-cu-image'>
<image :src="'/static/tabbar/component' + [PageCur == 'component'?'_cur':''] + '.png'"></image>
</view>
<view :class="PageCur=='component'?'text-green':'text-gray'">组件</view>
</view>
<view class="action" @click="NavChange" data-cur="plugin">
<view class='cuIcon-cu-image'>
<image :src="'/static/tabbar/plugin' + [PageCur == 'plugin'?'_cur':''] + '.png'"></image>
</view>
<view :class="PageCur=='plugin'?'text-green':'text-gray'">扩展</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
PageCur: 'basics'
}
},
methods: {
NavChange: function(e) {
this.PageCur = e.currentTarget.dataset.cur
}
}
}
</script>
```
:::
### tab 操作条实现
1. 操作条的父容器需求加上 class 类名 `cu-bar 和 tabbar`，同时可以加上 `bg-white|...` `shadow|...` 等样式来优化操作条。
2. **固定底部**：需要操作条固定在底部加上 class 类名 `foot` 即可。
3. 每一个 tab 的元素需要加上 class 类名 `action`，该 tab 里面则放置对应的图标和文字。
4. 展示不同的页面，以及 tab 需要用一个变量 `PageCur` 来进行控制。（官方示例 tab 图标是采用的图片，自定义也可以用图标）。
5. **数字标签**：对应的 tab 元素里可以加上 数字标签 `<view class="cu-tag badge">99+</view>`，**红色圆点**：数字标签里没有内容。
6. **中间的添加按钮**：`action` 同级加上 class 类名 `add-action`，其里面的图标换成 `button` 即可。
> **演示代码（可直接复制使用）**
```vue
<template>
<view>
<!-- 这里是对应的页面 -->
<homePage v-if="PageCur=='home'"></homePage>
<!-- 底部操作条：背景颜色、对应图标、字体颜色，可自定义 -->
<view class="cu-bar tabbar bg-white foot">
<!-- 首页 -->
<view class="action" :class="PageCur=='home'?'text-green':'text-gray'"
data-cur="home" @click="NavChange">
<view class="cuIcon-homefill"></view> 首页
</view>
<!-- 分类 -->
<view class="action" :class="PageCur=='similar'?'text-green':'text-gray'"
data-cur="similar" @click="NavChange">
<view class="cuIcon-similar"></view> 分类
</view>
<!-- 中间发布按钮 -->
<view class="action add-action" :class="PageCur=='sub'?'text-green':'text-gray'"
data-cur="sub" @click="NavChange">
<button class="cu-btn cuIcon-add bg-green shadow"></button>
发布
</view>
<!-- 购物车、右上角有数字角标 -->
<view class="action" :class="PageCur=='cart'?'text-green':'text-gray'"
data-cur="cart" @click="NavChange">
<view class="cuIcon-cart">
<!-- 数字角标 -->
<view class="cu-tag badge">99</view>
</view>
购物车
</view>
<!-- 我的、左上角红色圆点 -->
<view class="action" :class="PageCur=='mine'?'text-green':'text-gray'"
data-cur="mine" @click="NavChange">
<view class="cuIcon-my">
<!-- 红色圆点（数字角标） -->
<view class="cu-tag badge"></view>
</view>
我的
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
PageCur: 'home'
}
},
methods: {
NavChange: function(e) {
this.PageCur = e.currentTarget.dataset.cur
}
}
}
</script>
```
### 购物车底部操作条
1. 操作条的父容器需求加上 class 类名 `cu-bar 和 tabbar`，还有一个 `shop`，同时可以加上 `bg-white|...` `shadow|...` 等样式来优化操作条。
2. **固定底部**：需要操作条固定在底部加上 class 类名 `foot` 即可。
3. 每一个需要操作的元素需要加上 class 类名 `action`，该 `action` 元素里面则放置对应的图标和文字以及按钮。
4. **数字标签**：对应的 `action` 元素里可以加上 数字标签 `<view class="cu-tag badge">99+</view>`，**红色圆点**：数字标签里没有内容。
5. **立即订购**：和 `action` 元素同级的 view 加上 class 类名 `submit bg-red|...`，该元素会默认占据剩余的宽度，从右侧预览图知道，可以是三个 `action` 元素加上一个 `submit` 元素，也可以是两个 `action` 元素加上两个 `submit` 元素。
6. **立即订购的第二种样式**：上面一种是默认撑宽的元素，第二种则是再该元素里放置一个自定义的按钮，实现为 `action` 同级元素加上 class 类名 `btn-group`，相当于把第五条 `submit` 换成 `btn-group`；然后 `btn-group` 里再放置自定义按钮。
> **演示代码（可直接复制使用）**
```vue
<!-- 右侧预览图，第一个购物车示例 -->
<view class="cu-bar bg-white tabbar border shop foot">
<button class="action" open-type="contact">
<view class="cuIcon-service text-green">
<view class="cu-tag badge"></view>
</view>
客服
</button>
<view class="action text-orange">
<view class="cuIcon-favorfill"></view> 已收藏
</view>
<view class="action">
<view class="cuIcon-cart">
<view class="cu-tag badge">99</view>
</view>
购物车
</view>
<view class="bg-red submit">立即订购</view>
</view>
<!-- 右侧预览图，第二个购物车示例 -->
<view class="cu-bar bg-white tabbar border shop foot">
<button class="action" open-type="contact">
<view class="cuIcon-service text-green">
<view class="cu-tag badge"></view>
</view>
客服
</button>
<view class="action">
<view class="cuIcon-cart">
<view class="cu-tag badge">99</view>
</view>
购物车
</view>
<view class="bg-orange submit">加入购物车</view>
<view class="bg-red submit">立即订购</view>
</view>
<!-- 右侧预览图，第三个购物车示例 -->
<view class="cu-bar bg-white tabbar border shop foot">
<button class="action" open-type="contact">
<view class="cuIcon-service text-green">
<view class="cu-tag badge"></view>
</view>
客服
</button>
<view class="action">
<view class=" cuIcon-shop"></view> 店铺
</view>
<view class="action">
<view class="cuIcon-cart">
<view class="cu-tag badge">99</view>
</view>
购物车
</view>
<view class="btn-group">
<button class="cu-btn bg-red round shadow-blur">立即订购</button>
</view>
</view>
<!-- 右侧预览图，第四个购物车示例 -->
<view class="cu-bar bg-white tabbar border shop foot">
<button class="action" open-type="contact">
<view class="cuIcon-service text-green">
<view class="cu-tag badge"></view>
</view> 客服
</button>
<view class="action">
<view class="cuIcon-cart">
<view class="cu-tag badge">99</view>
</view>
购物车
</view>
<view class="btn-group">
<button class="cu-btn bg-orange round shadow-blur">加入购物车</button>
<button class="cu-btn bg-red round shadow-blur">立即订购</button>
</view>
</view>
```
docs/10.文档/30.交互组件/10.操作条/20.标题操作条.md
+63 -1
View File
@@ -1,5 +1,67 @@
---
title: 标题操作条
date: 2023-06-02 23:21:17
permalink: /pages/43ebee/
permalink: /pages/component/bar/title
article: false
---
标题操作条就是纯粹的样式，右侧预览图滑到标题操作条，直接复制对应代码到项目对应的位置即可
演示代码里有代码注释，一条对应一条，复制即可
### 演示代码
```vue
<view class="box">
// 第一、二种都是标题和类似边框的组合样式，添加 border-title 类名
// 底部样式是 text 标签的 last-child 选择器设置的，可以自定义颜色和长度
<view class="cu-bar bg-white">
<view class="action border-title">
<text class="text-xl text-bold">关于我们</text>
<text class="bg-grey" style="width:2rem"></text>
</view>
</view>
<view class="cu-bar bg-white">
<view class="action border-title">
<text class="text-xl text-bold text-blue">关于我们</text>
<text class="bg-gradual-blue" style="width:3rem"></text>
</view>
</view>
// 第三、四这两种和上面的原理相同，添加的是 sub-title 类名，底部可以设置文字
<view class="cu-bar bg-white">
<view class="action sub-title">
<text class="text-xl text-bold text-green">关于我们</text>
<text class="bg-green"></text>
</view>
</view>
<view class="cu-bar bg-white">
<view class="action sub-title">
<text class="text-xl text-bold text-blue">关于我们</text>
<text class="text-ABC text-blue">about</text>
</view>
</view>
// 第五种主要是类名 self-end，设置了最后一行字的位置，就是 css 属性 align-self: flex-end （详情可以去看看 flex 布局）
<view class="cu-bar bg-white">
<view class="action">
<text class="text-xl text-bold">关于我们</text>
<text class="text-Abc text-gray self-end margin-left-sm">about</text>
</view>
</view>
// 最后这两种就是简单的添加了两个图标，没什么好说的
<view class="cu-bar bg-white">
<view class="action">
<text class="cuIcon-title text-green"></text>
<text class="text-xl text-bold">关于我们</text>
</view>
</view>
<view class="cu-bar bg-white">
<view class="action">
<text class="cuIcon-titles text-green"></text>
<text class="text-xl text-bold">关于我们</text>
</view>
</view>
</view>
```
docs/10.文档/30.交互组件/10.操作条/30.顶部操作条.md
+147 -1
View File
@@ -1,5 +1,151 @@
---
title: 顶部操作条
date: 2023-06-02 23:21:33
permalink: /pages/733677/
permalink: /pages/component/bar/top
article: false
---
顶部操作条设置属于自定义导航栏，接下来会给大家讲解配置。
## 自定义操作条（导航栏）
1. 导航栏作为常用组件 `color-ui` 里有做简单封装，你也可以直接复制代码结构自己修改，达到个性化目的。
2. `App.vue` 获得系统信息
```js
onLaunch: function() {
uni.getSystemInfo({
success: function(e) {
// #ifndef MP
Vue.prototype.StatusBar = e.statusBarHeight;
if (e.platform == 'android') {
Vue.prototype.CustomBar = e.statusBarHeight + 50;
} else {
Vue.prototype.CustomBar = e.statusBarHeight + 45;
};
// #endif
// #ifdef MP-WEIXIN
Vue.prototype.StatusBar = e.statusBarHeight;
let custom = wx.getMenuButtonBoundingClientRect();
Vue.prototype.Custom = custom;
Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
// #endif
// #ifdef MP-ALIPAY
Vue.prototype.StatusBar = e.statusBarHeight;
Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
// #endif
}
})
},
```
3. 需要设置导航栏的页面配置 `pages.json` 配置取消系统导航栏，如下配置：
```js
"globalStyle": {
"navigationStyle": "custom"
},
```
4. 复制 `color-ui` 代码结构可以直接使用，注意全局变量的获取。
5. 使用封装，在 main.js 引入 cu-custom 组件，cu-custom 组件里可以根据自己的需求来自定义。
```vue
import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)
```
6. 对应的页面 index.vue 可以直接调用即可。
```vue
<cu-custom bgColor="bg-gradual-blue" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">导航栏</block>
</cu-custom>
```
7. 以下是对应属性参数，自定义也可基于官方封装好的。
| 参数 | 作用 | 类型 | 默认值 |
| -------- | ---------------- | ------- | ------ |
| bgColor | 背景颜色类名 | String | '' |
| isBack | 是否开启返回 | Boolean | false |
| isCustom | 是否开启左侧胶囊 | Boolean | false |
| bgImage | 背景图片路径 | String | '' |
| slot块 | 作用 |
| -------- | ---------------------------------- |
| backText | 返回时的文字 |
| content | 中间区域 |
| right | 右侧区域(小程序端可使用范围很窄！) |
## 使用原生小程序开发
### 从现有项目开始
下载源码解压获得`/demo`，复制目录下的 `/colorui` 文件夹到你的项目根目录
```
App.wxss` 引入关键Css `main.wxss` `icon.wxss
@import "colorui/main.wxss";
@import "colorui/icon.wxss";
@import "app.css"; /* 你的项目css */
....
```
### 从新项目开始
下载源码解压获得`/template`，复制`/template`并重命名为你的项目，导入到小程序开发工具既可以开始你的新项目了
### 使用自定义导航栏
导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。
`App.js` 获得系统信息
```
onLaunch: function() {
wx.getSystemInfo({
success: e => {
this.globalData.StatusBar = e.statusBarHeight;
let custom = wx.getMenuButtonBoundingClientRect();
this.globalData.Custom = custom;
this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
}
})
},
```
`App.json` 配置取消系统导航栏,并全局引入组件
```
"window": {
"navigationStyle": "custom"
},
"usingComponents": {
"cu-custom":"/colorui/components/cu-custom"
}
```
`page.wxml` 页面可以直接调用了
```
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
<view slot="backText">返回</view>
<view slot="content">导航栏</view>
</cu-custom>
```
| 参数 | 作用 | 类型 | 默认值 |
| -------- | ---------------- | ------- | ------ |
| bgColor | 背景颜色类名 | String | '' |
| isBack | 是否开启返回 | Boolean | false |
| isCustom | 是否开启左侧胶囊 | Boolean | false |
| bgImage | 背景图片路径 | String | '' |
| slot块 | 作用 |
| -------- | ---------------------------------- |
| backText | 返回时的文字 |
| content | 中间区域 |
| right | 右侧区域(小程序端可使用范围很窄！) |
docs/10.文档/30.交互组件/10.操作条/40.搜索&按钮组&输入操作条.md
+140
View File
@@ -0,0 +1,140 @@
---
title: 搜索&按钮组&输入操作条
date: 2023-06-02 23:22:10
permalink: /pages/component/bar/search
article: false
---
## 搜索操作条
搜索操作条主要就是search-form，配合 round 和 radius 设置 input 框的样式，然后再用 fixed 固定到顶部即可。
> 演示代码
```html
<!-- 第一个：搜索按钮在右边 -->
<view class="cu-bar search bg-white">
<view class="search-form round">
<text class="cuIcon-search"></text>
<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索图片、文章、视频"
confirm-type="search"></input>
</view>
<view class="action">
<button class="cu-btn bg-green shadow-blur round">搜索</button>
</view>
</view>
<!-- 第二个：右边是广州选择位置 -->
<view class="cu-bar search bg-white">
<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big11010.jpg"></view>
<view class="search-form round">
<text class="cuIcon-search"></text>
<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索图片、文章、视频"
confirm-type="search"></input>
</view>
<view class="action">
<text>广州</text>
<text class="cuIcon-triangledownfill"></text>
</view>
</view>
<!-- 第三个：右边是广州选择位置（红色背景） -->
<view class="cu-bar bg-red search">
<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big114004.jpg);"></view>
<view class="search-form radius">
<text class="cuIcon-search"></text>
<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索图片、文章、视频"
confirm-type="search"></input>
</view>
<view class="action">
<text>广州</text>
<text class="cuIcon-triangledownfill"></text>
</view>
</view>
<!-- 第四个：右边是取消 -->
<view class="cu-bar bg-cyan search">
<view class="search-form radius">
<text class="cuIcon-search"></text>
<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索图片、文章、视频"
confirm-type="search"></input>
</view>
<view class="action">
<text class="cuIcon-close"></text>
<text>取消</text>
</view>
</view>
<!-- data -->
return {
InputBottom: 0
};
<!-- js -->
InputFocus(e) {
this.InputBottom = e.detail.height
},
InputBlur(e) {
this.InputBottom = 0
}
```
## 按钮组操作条
就是几个按钮，cu-bar 操作条类名就是为这个按钮组设置了平铺的样式
```html
<view class="cu-bar btn-group">
<button class="cu-btn bg-green shadow-blur round lg">保存</button>
</view>
<view class="btn-group">
<button class="cu-btn bg-green shadow-blur">保存</button>
<button class="cu-btn text-green line-green shadow">上传</button>
</view>
<view class="cu-bar btn-group">
<button class="cu-btn bg-green shadow-blur round">保存</button>
<button class="cu-btn bg-blue shadow-blur round">提交</button>
</view>
```
## 输入操作条
主要由cu-bar和input设置出大体样式，内部填充自定义，
```html
<view class="cu-bar input">
<view class="action">
<text class="cuIcon-sound text-grey"></text>
</view>
<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" class="solid-bottom" :focus="false" maxlength="300" cursor-spacing="10"></input>
<view class="action">
<text class="cuIcon-emojifill text-grey"></text>
</view>
<button class="cu-btn bg-green shadow-blur">发送</button>
</view>
<view class="cu-bar input">
<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg);"></view>
<view class="action">
<text class="cuIcon-roundaddfill text-grey"></text>
</view>
<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" class="solid-bottom" maxlength="300" cursor-spacing="10"></input>
<view class="action">
<text class="cuIcon-emojifill text-grey"></text>
</view>
<button class="cu-btn bg-green shadow-blur">发送</button>
</view>
<!-- data -->
return {
InputBottom: 0
};
<!-- js -->
InputFocus(e) {
this.InputBottom = e.detail.height
},
InputBlur(e) {
this.InputBottom = 0
}
```
docs/10.文档/30.交互组件/10.操作条/40.搜索操作条.md
-5
View File
@@ -1,5 +0,0 @@
---
title: 搜索操作条
date: 2023-06-02 23:22:10
permalink: /pages/f2dfd8/
---