Need help with radon-ui?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

luojilab
908 Stars 130 Forks 475 Commits 12 Opened issues

Description

一个用于快速开发产品的简洁、优雅、高效的 Vue 组件库

Services available

!
?

Need anything else?

Contributors list

# 8,364
CSS
JavaScr...
Vue.js
Shell
391 commits
# 52,335
CSS
HTML
vue-rou...
vue-com...
25 commits
# 469,665
CSS
HTML
15 commits
# 3,140
JavaScr...
Vue.js
vuejs
swagger
1 commit

Radon UI

一个帮助你快速开发产品的Vue组件库,简洁好用,效率高,让你摆脱各种定制化的烦恼。

特性

  • 基于 Vue 开发的高质量UI组件
  • 基于 npm + webpack + ES6 + postcss开发
  • 数据驱动,简单易使用

安装

使用 npm 安装

推荐使用 npm 的方式进行开发,不仅可在开发环境轻松调试,也可放心地在生产环境打包部署使用,享受整个生态圈和工具链带来的诸多好处。 可以通过 npm 直接安装到项目中,使用 import 或 require 进行引用。

npm install radon-ui

使用

RadonUI 在线文档

基本组件的使用

引入

rdDatepicker
日历组件并局部注册并定义日历组件的数据对象及配置
import { rdDatepicker } from 'radon-ui'

export default { data () { return { datePicker: { value: '', options: { quickClose: true, format: 'YYYY/MM/DD' } } } }, components: { rdDatepicker } }

在模板中任意位置放置日历组件并使用

v-bind
语法将数据动态绑定
date
属性上。

全局组件的使用

先在项目的入口文件中引入 RadonUI 的全局组件安装方法。

// main.js
import Vue from 'vue'
import { RadonInstall } from 'radon-ui'

Vue.use(RadonInstall)

推荐在 Vue 的根实例中放置全局组件的位置


可以在任何组件中调用相应的全局组件的实例方法

// any vue components
methods: {
    someAction () {
        // 生成系统通知
        this.$Notification.success('编辑成功', '', 5000)
    },
    open () {
        // 确认弹窗
        this.$Modal.create(
            '这里是标题',
            '这里应该说点什么',
            () => {
                // confirm callback
            },
            () => {
                // cancel callback
            }
        )
    }
}

版本

V 0.3.0

浏览器支持

Chrome Safari

如何贡献

我们欢迎任何形式的贡献,有任何建议或意见您可以进行 Pull Request,或者给我们提问

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.