效果演示

初始化vue项目: vue create demo
安装组件库: npm install olvue-ui
由于该组件库是使用sass编写的，因此还需要安装:npm install sass sass-loader
导入方式有两种选择：
1. 全局导入：在main.js写下以下内容：

import Vue from 'vue'
import OlUI from 'olvue-ui'
Vue.use(OlUI)

以上代码已经完成了olvue-ui的导入。 2. 组件按需导入：若你只是希望引入部分组件，比如Button和Input，那么只需要在main.js中写下以下内容：

import Vue from 'vue'
import { OlButton, OlInput } from 'olvue-ui'
Vue.use(OlButton)
Vue.use(OlInput)

目录说明

components: olvue-ui组件库的自定义的组件
examples/main.js: 项目的主入口
examples/views: 所有自定义组件的demo
package: 发布到npm包的内容
.babelrc: 组件按需导入需要配置的文件
vue.config.js: 发布到npm修改webpack配置的文件

ol组件库

仿element ui组件库。实现的组件有ol-button ol-checkbox ol-checkbox-group ol-dialog ol-form ol-form-item ol-input ol-radio ol-radio-group ol-switch ol-row ol-col

布局

Attributes

参数	说明	类型	可选值	默认值
gutter	栅栏间隔	number	—	0
span	栅栏占据的列数	number	—	24
offset	栅格左侧的间隔格数	number	—	0
type	布局模式，可选flex	string	—	—
justify	flex 布局下的水平排列方式	string	start/end/center/space-around/space-between	start

基本结构

基础布局
分栏间隔
混合布局
分栏偏移
flex布局

button组件

Attributes

参数	说明	类型	可选值	默认值
type	类型	string	primary / success / warning / danger / info / text	default
plain	是否朴素按钮	boolean	—	false
round	是否圆角按钮	boolean	—	false
circle	是否圆形按钮	boolean	—	false
disabled	是否禁用状态	boolean	—	false
icon	图标类型	string	—	—

事件

事件名	事件描述
click	点击事件

基本结构

<ol-button @click="fn">默认</ol-button>
<ol-button type="primary">主要</ol-button>
<ol-button type="success">成功</ol-button>
<ol-button type="warning">警告</ol-button>
<ol-button type="danger">危险</ol-button>
<ol-button type="info">信息</ol-button>
<ol-button type="default">信息</ol-button>

dialog组件

Attributes

参数	说明	类型	默认值
title	对话框标题	string	提示
width	对话框宽度	string	50%
top	与顶部的距离	string	15vh
visable	是否显示dialog(支持sync修饰符)	boolean	false

事件

事件名	事件描述
opened	模态框显示
closed	模态框关闭

插槽说明

插槽名称	插槽描述
title	模态框标题
default	模态框内容
footer	模态框的底部操作区

基本结构

<ol-button type="primary" @click="visible=true">点击显示对话框</ol-button>
<ol-dialog width="20%" top="100px" :visible.sync="visible">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <template v-slot:footer>
    <ol-button type="primary" @click="visible=false">确认</ol-button>
    <ol-button @click="visible=false">取消</ol-button>
  </template>
</ol-dialog>

input组件和textarea组件

Attributes

参数	说明	类型	可选值	默认值
type	类型	string	text / password / textarea	text
name	name属性	string	—	—
placeholder	占位符	string	—	—
clearable	是否显示清空按钮	boolean	—	false
show-password	是否显示密码切换按钮	boolean	—	false
disabled	是否禁用状态	boolean	—	false

Attributes--TextArea

参数	说明	类型	可选值	默认值
type	类型	string	textarea	text
name	name属性	string	—	—
placeholder	占位符	string	—	—
disabled	是否禁用状态	boolean	—	false
rows	原生textarea属性	string	—	1
autosize	可自适应文本高度的textarea	boolean	—	false

事件

事件名	事件描述
focus	获取焦点事件
blur	失去焦点事件
change	内容改变事件

基本结构

<ol-input type="text" name="username" placeholder="请输入姓名" v-model="username" />

<ol-input type="textarea" name="username" placeholder="请输入姓名" rows=3 />

<ol-input type="textarea" name="username" placeholder="请输入姓名" autosize />

switch组件

Attributes

参数	说明	类型	默认值
v-model	双向绑定	boolean	false
name	name属性	string	text
activeColor	自定义激活的颜色	string	-
inactiveColor	自定义不激活的颜色	string	-

事件

事件名	事件描述
change	change时触发的事件

基本结构

<ol-switch v-model="active" name="name" active-color="yellow" inactive-color="red" />

radio组件

Attributes

参数	说明	类型	默认值
v-model	双向绑定	string / number / boolean	-
name	name属性	string	-
label	Radio的value值	string / number / boolean	-

radiogroup组件

Attributes

参数	说明	类型	默认值
v-model	双向绑定	-	-

基本结构

<!-- radio组件 -->
<ol-radio label="1" v-model="gender">男</ol-radio>
<ol-radio label="0" v-model="gender">女</ol-radio>
<ol-radio label="1" v-model="gender"></ol-radio>
<ol-radio label="0" v-model="gender"></ol-radio>

<!-- radioGroup组件 -->
<ol-radio-group v-model="gender">
  <ol-radio label="1">男</ol-radio>
  <ol-radio label="0">女</ol-radio>
</ol-radio-group>

checkbox组件

Attributes

参数	说明	类型	默认值
value	单个checkbox的绑定	boolean	false
name	name属性	string	-
label	checkbox的value值	string / number / boolean	-

checkboxgroup组件

Attributes

参数	说明	类型	默认值
v-model	双向绑定	-	-

基本结构

<ol-checkbox v-model="active">是否选中</ol-checkbox>
<ol-checkbox v-model="active"></ol-checkbox>

<ol-checkbox-group v-model="fruit">
  <ol-checkbox label="苹果"></ol-checkbox>
  <ol-checkbox label="香蕉"></ol-checkbox>
  <ol-checkbox label="橙子"></ol-checkbox>
</ol-checkbox-group>

form组件

Attributes

参数	说明	类型	默认值
model	表单数据对象	object	-
labelWidth	表单域标签的宽度	string	-

form-item组件

Attributes

参数	说明	类型	默认值
label	标签文本	string	-

基本结构

<!-- form组件 -->
<ol-form :model="formData" label-width="100px" :rules="rules">
  <ol-form-item label="用户名" prop="name">
    <ol-input placeholder="请输入用户名" v-model="model.username"></ol-input>
  </ol-form-item>
  <ol-form-item label="邮箱" prop="email">
    <ol-input placeholder="请输入邮箱" v-model="model.email"></ol-input>
  </ol-form-item>
  <ol-form-item label="性别">
    <ol-radio-group v-model="gender">
      <ol-radio label="1">男</ol-radio>
      <ol-radio label="0">女</ol-radio>
    </ol-radio-group>
  </ol-form-item>
</ol-form>

Aiyoweioo/olvue-ui

效果演示

目录说明

ol组件库

布局

Attributes

基本结构

button组件

Attributes

事件

基本结构

dialog组件

Attributes

事件

插槽说明

基本结构

input组件和textarea组件

Attributes

Attributes--TextArea

事件

基本结构

switch组件

Attributes

事件

基本结构

radio组件

Attributes

radiogroup组件

Attributes

基本结构

checkbox组件

Attributes

checkboxgroup组件

Attributes

基本结构

form组件

Attributes

form-item组件

Attributes

基本结构