https://github.com/akface/eeui-components
eeui-app 常用组件封装
https://github.com/akface/eeui-components
color-picker components eeui eeui-plugin weex weex-color weex-ui
Last synced: 4 months ago
JSON representation
eeui-app 常用组件封装
- Host: GitHub
- URL: https://github.com/akface/eeui-components
- Owner: akFace
- Created: 2019-06-26T11:33:00.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-06-26T12:43:37.000Z (almost 7 years ago)
- Last Synced: 2025-10-11T02:42:49.208Z (8 months ago)
- Topics: color-picker, components, eeui, eeui-plugin, weex, weex-color, weex-ui
- Language: Vue
- Size: 5.29 MB
- Stars: 1
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#### 常用组件封装,部分迁移[weex-ui](https://github.com/alibaba/weex-ui)和[bui](https://github.com/bingo-oss/bui-weex)组件，并做了适配用于eeui，以及视觉优化调整
### 1、颜色选择器
#### gif演示
``` vue
// 使用
import ColorPicker from "../components/ColorPicker.vue"
export default {
components: { ColorPicker },
data() {
return {
show_color_picker: true,
}
},
mounted() {},
created() {
},
methods: {
confirm(result) {
// result 返回值
/**
{
R: 14,
G: 157,
B: 144,
A: 1,
rgbaColor: 'rgba(14,157,144,1)',
hexColor: '#119d90'
}
**/
this.show_color_picker = false;
},
cancel() {
this.show_color_picker = false;
},
},
};
```
### API
```
// 初始化颜色
defaultConfig: {
valueR: 14,
valueG: 157,
valueB: 144,
valueA: 100,
validColorR: '#119d90',
validColorG: '#119d90',
validColorB: '#119d90',
validColorA: '#119d90',
invalidColorR: '#E0E0E0',
invalidColorG: '#E0E0E0',
invalidColorB: '#E0E0E0',
invalidColorA: '#E0E0E0',
}
```
| Prop | Type |Required | Default | Description |
|-------------|------------|--------|--------|-----|
| show | `Bool` | `N`| `false` |显示与隐藏|
| config | `Object` | `N`| `{}` | 会替换掉默认的defaultConfig |
| colorBoxStyle | `Object` | `N`| `{}` | 大圆形的样式 |
| hasOpacity | `Bool` | `N`| `false`| 是否需要透明度 |
| title | `String` | `N`|`颜色选择器` | 标题 |
| cancelText | `String` |`N`| `取消` | 取消按钮 |
| confirmText | `String` | `N`| `确定` | 确定按钮 |
| mainBtnColor | `String` | `N`| `#119d90` | 确定按钮颜色 |
| secondBtnColor | `String` | `N`| `#119d90` | 取消按钮颜色|
| thirdText | `String` |`N`| `自定义` | 自定义按钮文本 |
| thirdBtnColor | `String` |`N`| `#119d90` | 自定义按钮颜色 |
### Event
```
//`@confirm="confirm"`
//`@cancel="cancel"`
```
### 2、popup
#### gif演示
[使用说明](https://github.com/alibaba/weex-ui/tree/master/packages/wxc-popup)
### 3、Popover
#### gif演示
[使用说明](https://github.com/alibaba/weex-ui/tree/master/packages/wxc-popover)
### 4、 sliderbar 进度条
[使用说明](https://github.com/alibaba/weex-ui/tree/master/packages/wxc-slider-bar)
### 5、 Overlay 蒙层
[使用说明](https://github.com/alibaba/weex-ui/tree/master/packages/wxc-overlay)
### 6、 Radio 单选
[使用说明](http://dev.bingocc.com/buiweex/docs/reference/bui-radio.html)
### 7、 StatusBar 状态栏
使用说明：
| Prop | Type |Required | Default | Description |
|-------------|------------|--------|--------|-----|
| customStyle | `Object` | `N`| `{}` | 状态栏颜色样式 |
### 8、 Tabbar
[使用说明](http://dev.bingocc.com/buiweex/docs/reference/bui-tabbar.html)
### 9、 Cellitem
[使用说明](http://dev.bingocc.com/buiweex/docs/reference/bui-cell.html)
### 10、弹框组件
### dialog
[使用说明](https://github.com/alibaba/weex-ui/tree/master/packages/wxc-dialog)