sxw-ui
v1.0.39
Published
``` npm install sxw-ui --save
Downloads
3
Readme
sxw-ui
安装
npm install sxw-ui --save
area
安装
import Area from 'sxw-ui/area/index.js';
<area v-model="value"></area>
options
参数 参数名 类型 默认值
value 选中的省市区id Array []
width 单个select宽度 Number 100
space 单个select间隔 Number 10
borderRadius 圆角 Number 4
height 高度 Number 32
names 省市地区name Array ['provinceId', 'cityId', 'areaId']
dropdown
安装
import GdbDropdown from 'sxw-ui/dropdown/index.js';
<gdb-dropdown :options="options">账户设置</gdb-dropdown>
options: [{
text: '基础信息',
type: 'base'
}, {
text: '安全中心',
type: 'safe'
}, {
text: '收货地址',
type: 'address'
}, {
text: '发票信息',
type: 'invoice'
}]options
参数 参数名 类型 可选值 默认值
titleColor 标题颜色 String #12b484
trigger 显示触发方式 String click、hover click
options 下拉数据 Array text必填 --
events
事件名称 说明 回调参数
click 点击下拉 options中的itemfixedbottom
安装
import FixedBottom from 'sxw-ui/fixedbottom/index.js';
<fixed-bottom>悬浮内容</fixed-bottom>
options
参数 参数名 类型 默认值
parentTop 外部父级定位到顶部的高度 Number 0
marginLeft fixed后向左偏移量 Number -600
carousel
安装
import Carousel from 'sxw-ui/carousel/index.js';
import CarouselItem from 'sxw-ui/carouselitem/index.js';
<carousel>
<carousel-item>
// 需定义宽和高
<div style="width: 200px; height: 200px;">1</div>
</carousel-item>
<carousel-item>
// 需定义宽和高
<div style="width: 200px; height: 200px;">2</div>
</carousel-item>
</carousel>
options
参数 参数名 类型 可选值 默认值
initialIndex 初始显示的块的缩印 Number 0
interval 自动切换的时间间隔 Number 3000
autoplay 是否开启自动切换 Boolean true
loop 是否循环显示 Boolean true
arrow 切换箭头的显示时机 String always/hover/never hover
isArrowOut 切换箭头是否移出区域 Boolean true
butWidth 箭头宽度 Number 30
butHeight 箭头高度 Number 30
color 箭头颜色 String #fff
bgColor 箭头背景颜色 String #000
butSize 箭头大小 String 30px
infinite-scroll
安装
import InfiniteScroll from 'sxw-ui/infiniteScroll/index.js';
<infinite-scroll>
<div class="scroll-list">
<div class="scroll-list__item" v-for="item in list" :key="item">{{ item }}</div>
</div>
</infinite-scroll>
options
参数 参数名 类型 可选值 默认值
height 高度 Number 500
speed 速度 Number 30
checkbox
安装
import Checkbox from 'sxw-ui/checkbox/index.js';
<checkbox v-model="value">多选框</checkbox>
options
参数 参数名 类型 默认值
value 是否选中 Boolean false
color 选中的颜色 String #12b484
fontSize 字体大小 Number 12
fontColor 字体颜色 String #666
disabled 禁止点击 Boolean false
events
事件名称 说明 回调参数
change 多选框选中状态改变时 是否选中 popover
安装
import Popover from 'sxw-ui/popover/index.js';
<GdbPopover position="bottom">
<span slot="reference">内容</span>
<div>显示内容</div>
</GdbPopover>
options
参数 参数名 类型 可选值 默认值
trigger 触发方式 String hover，click hover
position 显示位置 String right，bottom，top rightevents
事件名称 说明 回调参数
show 显示时触发 --
hide 隐藏时触发 -- datepicker
安装
import Datepicker from 'sxw-ui/datepicker/index.js';
<datepicker v-model="value"></datepicker>
options
参数 参数名 类型 默认值
value 时间 String ''
format 时间格式 String YYYY-MM-DD
inputWidth 输入框宽度 Number 140
inputBorderColor 输入框边框颜色 String '#DCDCDC'
inputHeight 输入框高度 Number 32
checkedColor 日期选中颜色 String '#12b484'
placeholder 提示文字 String ''
isClear 是否开启清空 Boolean true
events
事件名称 说明 回调参数
change 时间改变 选中时间help
参考vue-datepickerdialog
安装
// 消息提示用法
import dialog from 'sxw-ui/message/index.js';
dialog.message(options);
// 对话框用法
import Dialog from 'sxw-ui/dialog/index.js';
<dialog :visible.sync="visible" title="地址">
<div>对话框内容</div>
</dialog>
message options
参数 参数名 类型 默认值
width 宽度 Number 120
text 内容 String 消息
duration 持续时间 Number 1000
dialog options
参数 参数名 类型 默认值
visible 是否显示 Boolean false
mainWidth 主区域宽度 Number 700
title 标题 String 消息
isValidator 确认前验证 Function return true
confirmText 确认按钮文字 String 确认
cancelText 取消按钮文字 String 取消
isShowConfirm 是否显示确认按钮 Boolean true
isShowCancel 是否显示取消按钮 Boolean true
buttonHeight 按钮高度 Number 22
hideClose 隐藏x按钮 Boolean false
hideTitle 隐藏标题 Boolean false
position 主内容定位方式 String fixed
events
事件名 说明 回调参数
confirm 确认 --
inputnumber
安装
import Inputnumber from 'sxw-ui/inputnumber/index.js';
<inputnumber v-model="value"></inputnumber>
options
参数 参数名 类型 默认值
value 计数器的值 Number 1
height 高度 Number 26
buttonWidth 按钮宽度 Number 26
inputWidth 输入框宽度 Number 48
orderQuantity 起订量 Number 1
batchQuantity 批量 Number 1
isChange 是否开启change函数 Boolean false
fontSize 按钮字体大小 Number 20
max 最大值 Number --
events
事件名称 说明 回调参数
change isChange为true时，改变数量时触发 当前的value
pagination
安装
import Pagination from 'sxw-ui/pagination/index.js';
<pagination></pagination>
options
参数 参数名 类型 默认值
borderColor 边框颜色 String #e6e6e6
currentPage 当前页 Number 1
pageSize 每页显示多少条 Number 10
total 总条数 Number 100
pageCount 显示几个页码 Number 5
height 高度 Number 26
events
事件名称 说明 回调参数
currentChange currentPage改变时触发 page
scrollbar
安装
import Scrollbar from 'sxw-ui/scrollbar/index.js';
<scrollbar></scrollbar>
options
参数 参数名 类型 默认值
autoCreate 创建自定义滚动条 Boolean true
autoshow 是否hover显示滚动条 Boolean true
select
安装
import Select from 'sxw-ui/select/index.js';
<select :options="options" v-model="value"></select>
options
参数 参数名 类型 默认值
value 选中的值 ｛｝ ''
options 下拉选项 Array --
props 配置选项（如下） Object
height 高度 Number 32
width 宽度 Number,String 100%
optionsHeight 下拉选项框的高度 Number 200
borderColor 选中时边框颜色 String #12b484
borderWidth 边框宽度 Number 1
checkedColor 选中时字体颜色 String #12b484
isDisabled 是否禁用 Boolean false
borderRadius 圆角 Number 4
isClear 开启清除 Boolean false
props options
参数 参数名 类型 默认值
label 下拉选项名 String label
value 下拉值 String value
name name值 String ''
slide
安装
import Slide from 'sxw-ui/slide/index.js';
<slide></slide>
options
参数 参数名 类型 默认值
data 图片数据 Array []
duration 切换间隔 Number 3000
pointWidth 底部小点的宽度 Number 40
pointHeight 底部小点的高度 Number 4
props 配置选项（如下） Object
props
参数 参数名 类型 默认值
url 图片的路径 String 'url'
target 跳转的路径 String 'target'
slideshow
安装
import Slideshow from 'sxw-ui/slideshow/index.js';
<slideshow>添加需要悬浮的东西</slideshow>
options
参数 参数名 类型 默认值
pageWidth 中间主区域的宽度 Number 1200
posPage 悬浮层与主区域的间距 Number 20
refName 从哪块元素开始显示滑块 String --
posPageTop 此块元素离顶部多少时显示滑块 Number 100
posTop 滑块距离顶部的距离 Number 150
upload
安装
import Upload from 'sxw-ui/upload/index.js';
<upload></upload>
options
参数 参数名 类型 默认值
value 选中的路径 String ''
butWidth 宽度 Number 100
butHeight 高度 Number 100
isShowOperation 是否显示删除 Boolean true
name name值 String upload
accept 允许上传的格式 Array [] 可选类似png，jpg，jpeg...
validator
安装
import Form from 'sxw-ui/form/index.js';
import FormItem from 'sxw-ui/formitem/index.js';
<form :model="formItem" :rules="rules" ref="fromRule">
<form-item prop="mobile" ref="mobile">
<input type="text" v-model="formItem.mobile" @blur="handleMobile">
</form-item>
</form>
<div @click="submit">提交</div>
data() {
return {
formItem: {
mobile: ''
},
rules: {
mobile: [{
required: true,
message: '电话不能为空'
}, {
message: '电话格式不正确',
type: 'mobile'
}]
}
};
},
methods: {
handleMobile() {
this.$refs.mobile.validate();
},
submit() {
this.$refs.fromRule.validate((valid) => {
console.log(valid);
}, {});
}
}
form options
参数 参数名 类型 默认值
model 表单数据对象 Object --
rules 表单验证规则 Object --
formItem options
参数 参数名 类型 默认值
prop 表单model字段 String ''
height 错误提示文字高度 Number 32
position 错误提示文字位置 right/bottom right
top bottom时顶部距离 Number 32
rules options
参数 参数名 类型 可选值 默认值
required 必填 Boolean -- false
type 类型 String mobile,deepArray --
min 最小长度 Number -- --
max 最大长度 Number -- --
sameKey 与哪个值必须相同 String -- --
message 错误消息 String -- --