XCUI 是基于Vue和 Bootstrap.css 的桌面端组件库。
- 满足桌面端页面大部分基础组件需求。
- 快速开发基于
vue构建的项目。 - 保持小体积, 无其他js库依赖(不依赖
jquery,Boostrap.js), 仅使用Boostrap.css。 - 简洁优雅。
XCUI目前支持vue 1.x版本；推荐使用vue 1.0.26及以上版本。后续XCUI会增加支持vue 2.x的版本，敬请期待。
XCUI需要在页面中引入
bootstrap.css。
通过npm安装，或在这里下载打包好的版本：
npm install xcuixcui使用umd方式打包，支持各种模块加载器。
在页面根实例中引入：
import Vue from 'vue'
import xcui from 'xcui'
import 'xcui/dist/xcui.css'
Vue.use(xcui);或者：
var Vue = require('vue');
var xcui = require('xcui');
Vue.use(xcui);在页面中声明标签，即可使用。举例：
<xcui-tag :closeable="true" text="'关闭'"></xcui-tag>除了使用npm进行安装外，还可直接将xcui的js和css文件使用标签形式引入，举例：
<!DOCTYPE html>
<html>
<head>
<title>Hello XCUI</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="xcui.css">
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="xcui.js"></script>
</head>
<body>
<div id="app">
<xcui-tag :closeable="true" :text="'关闭'"></xcui-tag>
</div>
<script type="text/javascript">
Vue.use(xcui);
new Vue({
el: '#app',
ready: function (){
this.$alert('Hello XCUI!')
}
})
</script>
</body>
</html>说明 XCUI在使用
Vue.use(xcui)后，会默认以xcui-前缀注册所有组件，在Vue实例中可直接使用而不用在components中声明。如：
<xcui-tag></xcui-tag>当然，您也可以按以下方式使用xcui组件：
import {Tag, Select} from xcui;
export default {
components: {Tag, Select}
}xcui把一些使用频率高的操作挂载到Vue的根实例，便于调用。如, 在一个components组件中可以这样调用 ( 且不用在页面中显式地声明html标签 )：
this.$alert('alert message') // 警告提示
this.$confirm('是否确认?', content, onOk, onCancel) // 确认提示
this.$toaster('toaster message') // 信息提示
this.$Modal.show(options) // 模态框具体请见modal 中的说明。
$ git clone [email protected]:wmfe/xcui.git
$ npm i
$ npm run dev
$ npm run build
在使用过程中有问题，请在这里给我们提交issue。
代码有问题？请在这里给我们提交pull request。
加入wmfe团队，一起开发通用组件，交流vue组件开发的心得~