octopus-ui v0.9.8
简介
Octopus UI
是一套基于 Vue.js 2.6
的移动端 UI 组件,旨在提高 移动端H5页面
开发效率。
安装
同时支持 npm
安装与 <script>
方式引入,推荐使用 npm
的方式安装,它能更好地和 webpack
打包工具配合使用。
npm 安装
npm i octopus-ui -S
引入 OC-UI
可以引入整个 OC-UI,或是根据需要仅引入部分组件。
完整引入
在 main.js 中写入以下内容:
import Vue from 'vue';
import OcUI from 'octopus-ui';
import App from './App.vue';
Vue.use(OcUI);
new Vue({
el: '#app',
render: (h) => h(App)
});
按需引入
1、引入方式
import Vue from 'vue';
import {OcDialog, OcToast} from 'octopus-ui';
import App from './App.vue';
Vue.use(OcDialog).use(OcToast);
new Vue({
el: '#app',
render: (h) => h(App)
});
2、必须配置项:babel.config.js或者babelrc中需要添加如下内容
plugins: [
[
'component',
{
libraryName: 'octopus-ui',
styleLibrary: {
name: 'style',
base: false,
},
camel2Dash: false,
},
],
]
支持环境
- Android 4.4+
- iOS 9+
命名规范(约定)
- 组件名需再前面须拼上 'Oc', 如: 'OcToast';
- 组件参数的命名应使用英文单词,如多个单词则使用小驼峰式命名法(camelCase),如: 'confirmText' ;
- 所有函数命名前面须拼上 'on' ,如:'onClose';
值是 Boolean 类型的参数前面可以拼上动词,如'hasMask'、'hasClose';
动词 含义 can 判断是否可执行某个动作 has 判断是否含义某个值 is 判断是否为某个值 如遇到不好拿捏的可以参考其他知名 UI 组件库的命名;
部分示例
参数 | 说明 | 类型 |
---|---|---|
type | 类型 | String |
title | 提示标题 | String |
text | 提示文本 | String |
customClass | 自定义类名 | String |
duration | 显示时间 | Number |
position | 定位位置 | String |
hasMask | 显示遮罩层 | Boolean |
onClose | 函数名前面加「on」 | Function |
3 months ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago