@ecolovo/uniapp-components

Ecolovo UniApp 组件库

Installation

使用 npm / yarn 安装

  npm install @ecolovo/uniapp-components

同时需要使用 uni-pages-hot-modules 用来动态配置

  npm install uni-pages-hot-modules --save-dev

Usage

1. 配置 vue.config.js 文件

// vue.config.js

module.exports = {
  // configs...
  transpileDependencies: ['@ecolovo/uniapp-components'],
  // other configs...
}

2. 在 src/main.js 文件中初始化组件库

// src/main.js

import init from '@ecolovo/uniapp-components/init';

init({
  // 配置组件前缀
  // 在使用时加上前缀，如 button 组件，使用 <ui-button>
  componentPrefix: 'ui',
});

3. 配置 src/pages.js 文件，

// src/pages.js

const mergeWith = require('lodash/mergeWith');
const { hot } = require('uni-pages-hot-modules');
const componentEasyCom = require('@ecolovo/uniapp-components/easyCom');

module.exports = hot((pagesJson) => {
  const pagesConfig = require('./pagesDef');

  return mergeWith(
    // pages.json 中的配置
    pagesJson,
    pagesConfig,
    componentEasyCom('ui'), // 填入和步骤 2 中同样的前缀
    function (objValue, srcValue) {
      if (Array.isArray(objValue)) {
        return objValue.concat(srcValue);
      }
    }
  );
});

4. 配置样式

全局样式

<!-- App.vue -->

<style lang="scss">
@use '@ecolovo/uniapp-components/styles/global';
</style>

自定义组件配置

/* src/styles/prepend.scss */

@forward '@ecolovo/uniapp-components/styles/var/theme' with (
  $themes: (
    primary: #d92e20,
  )
);

@forward '@ecolovo/uniapp-components/styles';

// vue.config.js

const sass = require('sass');

module.exports = {
  // configs...
  css: {
    loaderOptions: {
      scss: {
        prependData: '@use "@/styles/prepend" as *;'
      },
    },
  },
  // other configs...
};

Components

Aspect

属性

• ratio: string | number 纵横比，默认为 1 ，即宽高相等