简介

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 |