vue-stone
A components library for vue2.x. 一个基于 vue2.x 的组件库
安装
npm install --save vue-stone
使用
本项目版本号规定
在本项目发布 1.0.0 版本之前,第二位版本号的更新将不向下兼容,第三位版本号向下兼容,通常为优化或 BUG 修复更新。
因此请注意这里:将 package.json 中 dependencies 字段下 "vue-stone": "^0.4.0"
版本号前面的 "^" 更改为 "~",暨 "vue-stone": "~0.4.0"
。这样再执行 npm install 时,将只会安装第三位版本号的最新版。
使用前注意
本项目采用了 rem 布局方案,因此在引入该组件库前请在 HTML 文件 head 标签內添加下面一段 script:
<script>
(function() {
var baseFontSize = 100;
var baseWidth = 375;
var set = function() {
var clientWidth = document.documentElement.clientWidth || window.innerWidth;
var rem = 100;
if (clientWidth != baseWidth) {
rem = Math.floor(clientWidth / baseWidth * baseFontSize);
}
document.querySelector('html').style.fontSize = rem + 'px';
}
set();
window.addEventListener('resize', set);
}());
</script>
开始使用
Import vue-stone and register components
import Stone from 'vue-stone';
import 'vue-stone/dist/vue-stone.css';
// 如果你需要使用组件库中字体图标,请单独引入字体图标的 CSS 文件
// import 'vue-stone/dist/iconfonts.css';
import Vue from 'vue';
Vue.use(Stone); // register components
按需打包组件
受 webpack 打包策略所限,我们目前并没有将按需打包做的很简练,但至少目前还是做到了,具体步骤请查阅 按需加载组件
如果你有更好的 idea,欢迎你为 vue-stone 贡献出一份力量。
文档
vue-stone 组件库提供了下述组件,每个组件都带有详细的文档,组件展示可参考 example
- Action-box
- Action-sheet
- Alert
- Button
- Button-group
- Button-switch
- Checkboard
- Confirm
- Counter
- Dayspicker
- Dialog
- Input
- Loading
- Mask
- Modes
- Panel
- Picker-loop
- Picker
- Range
- Slide
- Switch
- Timepicker
- Toast
- Control-center
- Search
- Textarea
- icon
Contribute
贡献代码请遵循代码贡献规范