https://github.com/yeseason/paco-ui-vue
https://github.com/yeseason/paco-ui-vue
Last synced: 14 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/yeseason/paco-ui-vue
- Owner: yeseason
- License: mit
- Created: 2016-11-03T02:55:44.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-01-12T02:37:28.000Z (over 8 years ago)
- Last Synced: 2024-11-03T01:32:13.354Z (5 months ago)
- Language: Vue
- Homepage: https://yeseason.github.io/paco-ui-vue/
- Size: 1.43 MB
- Stars: 13
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-vue - paco-ui-vue - PACOUI的vue组件 (UI组件)
- awesome-github-vue - paco-ui-vue - PACOUI的vue组件 (UI组件)
- awesome - paco-ui-vue - PACOUI的vue组件 (UI组件)
- awesome-vue - paco-ui-vue - ui-vue?style=social) - PACOUI的vue组件 (UI组件)
README
# paco-ui-vue
Vue Components for PACO-UI
## 使用说明
- 引入CSS
```html
```
- 引入fastclick
```html
```
- 引入`paco-ui-vue`库
```bash
npm i --save paco-ui-vue@VERSION
```
> 注：`VERSION`为要使用版本
Import all components.
```javascript
import Vue from 'vue'
import Paco from 'paco-ui-vue';
Vue.use(paco)
```
## 组件说明
- Ad
```html
开车能赚钱，买车全网最低开车能赚钱，买车全网最低
src 小图标图片地址
show 是否显示图标
baksrc 背景图片地址
link 连接地址
```
- Announcement
```html
您的爱车暂无违章记录，请继续保持
```
- Button
```html
主按钮
次按钮
不可点击按钮
按钮
三字钮
四字按钮
五个字按钮
警示按钮
底部按钮
警示按钮不可点
```
- Illustration
```html
说明文本说明文本说明文本
说明文本
src 图片地址
show 是否显示按钮
text 按钮文字
```
- Input
```html
提示标签
五个字标签
提示标签
提示标签
校验码
```
- Search
```html
```
- CheckBox
```html
同意
```
- Mask
```html
```
- Line
```html
```
- Loading
```html
```
- Share
```html
```
- Switch
```html
```
- Tab
```html
hello word
hello andrond
hello ios
```
- Toast
```html
success
fail
opps
```
```javascript
openToast(){
Toast("成功提醒");
},
openToastfail(){
Toast({
message:"失败提醒",
duration:1000,
type:"fail"
});
},
openToastopps(){
Toast({
message:"网络无法连接",
duration:5000,
type:"opps"
});
}
```
- Agreeme
```html
同意《平安好车主服务协议》
```
- Agreement
```html
内容
```
- Card
```html
标题
2016-08-08
内容内容内容内容内容内容内容内容内容内容内容内容内容内容
```
- alert
```javascript
Alert({
title:"温馨提示",
message:"你确定这么做"
},function (action) {
console.log(action);
}
title 标题
message 内容
showCancelButton 是否显示取消按钮
```
- Model
```javascript
Model({
message:"
说明方案终极辅助说明方案",
btn:"主按钮"
},function(action){
console.log(action);
})
```
- actionsheet
```javascript
Actionsheet({
},function(action){
console.log(action);
})
```
- Result
```javascript
description 描述
title 支付名称
btn 按钮名字
type 状态 success 成功 failure 失败 warning 警告 waiting 等待 tips 提示
v-on:handleActions=“fun” 按钮回调
```