Seeroad-ui NPM

Seeroad Ui Library

npm npm

基于 Vue2.x 打造的 UI 框架，由 Seeroad(Boss)Team 打造

Seeroad Ui Library
- Install
- Usage
END

Install

    npm install seeroad-ui --save

Usage

引用

   import Vue from 'vue'
   // 全局引用
   import SeeroadUi from 'seeroad-ui'
   // 引入样式
   import 'seeroad-ui/dist/packages/bossUI.min.css'
   // 注入插件  
   Vue.use(Seeroad-ui)
   // 单文件引用
   import { badge } from 'seeroad-ui/packages'
   Vue.component(badge.name badge)

国际化
目前只支持简中（zh-CN） & 英语（en-US）
由于内部依赖vue-i18n插件,如果你的项目也在使用此插件那么用法如下

    import Vue from 'vue'
    import VueI18n from 'vue-i18n'
    import seeroadLocale from 'seeroad-ui/dist/lib/locales'
    import srEnLocale from 'seeroad-ui/dist/lib/locales/langs/enUS'
    import srCNLocale from 'seeroad-ui/dist/lib/locales/langs/zhCN'
    /* 调用之前需要保证你自身Vue注册了VueI18n */
    Vue.use(VueI18n)
    seeroadLocale.use(Vue)
    // ....
    const messages = {
        enUs: {
            // 你自身的资源文件
            ...srEnLocale
        },
        zhCN: {
            // 你自身的资源文件
            ...srCNLocale
        }
    }
    const i18n = new VueI18n({ // 这里是i18n的正常初始化
        locale: 'zh-CN' // dafault
        messages
    })
    new Vue({ i18n }).$mount('#app')

如果你的项目没有使用vue-i18n插件，那么用法如下

    import Vue from 'vue'
    import seeroadLocale from 'seeroad-ui/dist/lib/locales'
    // 这里不需要合并到你自身的资源文件,组件内部会使用组件自身的resource
    // import srEnLocale from 'seeroad-ui/dist/lib/locales/langs/enUS'
    // import srCNLocale from 'seeroad-ui/dist/lib/locales/langs/zhCN'
    seeroadLocale.use(Vue)
    // ...

现已拥有组件

    sr-card
    sr-milestone
    sr-input
    sr-button
    sr-dialog

sr-input

参数	说明	类型	可选值	默认值
type	类型	string	text/number/password	text
size	大小	string	M/L	L
disabled	是否禁用	boolean	-	false
border	是否有边框	boolean	-	true
clearable	是否需要清除按钮	boolean	-	true
suffixIcon	输入框尾部图标	string	-	-
focus	在 Input 失去焦点时触发	function	-	-
blur	在 Input 获得焦点时触发	function	-	-
change	在 Input 值改变时触发	function	-	-
clear	在点击由 clearable 属性生成的清空按钮时触发	function	-	-
prepend	输入框前置内容	slots	-	-
suffix	输入框尾部内容	slots	-	-

sr-button

参数	说明	类型	可选值	默认值
type	类型	string	primary/secondary/danger/dangerSecondary/text	primary
size	大小	string	M/S/XS	S
disabled	是否禁用	boolean	-	false
loading	是否加载	boolean	-	false
click	点击事件	function	-	-

sr-dialog

参数	说明	类型	可选值	默认值
title	标题	string
size	大小	string	S/M/ L/XL	M
visible.sync	是否显示	boolean	-	false
closeOnModal	背景阴影是否能点击	boolean	-	true
showClose	是否显示关闭按钮	boolean	-	true
showGoBack	是否显示返回按钮	boolean	-	false
goBack	返回按钮点击回调函数	function	-
close	弹窗关闭动画结束回调函数	function	-
typeIsBasic	true-简易版 false-复合型	boolean	-	true
leftList	左边选框列表(复合型下有用)	array	-
value	左边选框列表当前选中的template(复合型下有用)	string	-
itemClick	左边列表点击事件(复合型下有用)	function	-

sr-Notifiy

挂载在vue实例上
调用

this.$srNotifiy(options:srNotificaiton) :void

options类型

export enum commonType {
  info = 'info',
  error = 'error',
  warning = 'warning',
  success = 'success'
}

export interface srNotificaiton {
  visible: boolean, // 是否显示
  messages: string, // 显示信息
  type: commonType, // 显示类型
  isConfirm: Boolean // 是否为confirm模式
  autoClose: boolean, // 是否自动关闭
  showClose: boolean,  // 是否显示关闭按钮
  dutamin: number, // 关闭时间 (ms)
  cancelText?: String, // 自定义取消按钮文本
  confirmText?: String, // 自定义确认按钮文本
  onCancel?: Function, // 自定义取消按钮事件
  onConfirm?: Function, // 自定义确认按钮事件
  onClose?: Function // 自定义关闭事件
  optionBtnText?: String, // 操作按钮名
  position?: notificationPosition // 布局位置
  onOptionBtnClick?: Function // 操作按钮事件
}

调用一次则唤起一个实例