rj-component-vue-example

rainjoy font-end component library based on vue.js

| 英文 | 中文 | 0 - 未开发 1 - 试验性 2 - 稳定 | 文档 | |:---|:---|:---|:---| | General | 基础组件 | ⚡️ | ⚡️ | | button | 按钮 | 1 | ✅ | | cell | 单元格 | 1 | ？| | icon | 字体图标 | 1 | ✅ | | loadingicon | 加载图标 | 1 | ✅ | | mask | 蒙层 | 1 | ✅ | | row | flex布局 | 1 | ? | | Form | 表单组件 | ⚡️ | ⚡️ | | checklist | 多选按钮 | 1 | ? | | radio | 单选按钮 | 1 | ? | | star | 星星打分评级 | 1 | ✅ | | switcher | 开关切换 | 1 | ✅ | | upload | 上传按钮 | 1 | ✅ | | Display | 视图组件 | ⚡️ | ⚡️ | | actionsheet | 操作表 | 1 | ✅ | | avatar | 头像 | 1 | ✅ | | bandge | 徽章切换(竖型tab) | 1 | ✅ | | card | 卡片 | 1 | ✅ | | image | 图片 | 1 | ✅ | | imagepreview | 图片预览 | 1 | ✅ | | mapper | 地图 | 1 | ✅ | | pagelist | 上滑滚动分页加载 | 1 | ? | | swiper | 轮播 | 1 | ✅ | | tab | 标签切换 | 1 | ✅ | | uploader | 上传照片 | 1 | ✅ | | Feedback | 反馈组件 | ⚡️ | ⚡️ | | loading | 加载界面 | 1 | ✅ | | loadingdirective | 加载指令 | 1 | ✅ | | loadingmethod | 加载方法 | 1 | ✅ | | msgbox | 消息弹出框 | 1 | ✅ | | popup | 模态弹窗 | 1 | ✅ | | toast | 消息提示框 | 1 | ✅ | | JS API | JS 组件 | ⚡️ | ⚡️ | | asyncload | 异步加载JS | 1 | ✅ | | avatarview | 万像优图+过滤协议+webp+默认头像 | 1 | ✅ | | dateformate | 时间格式化 | 1 | ✅ | | fetch | 发送请求或者获取资源（同构） | 1 | ✅ | | imageoptimizer | 万像优图 | 1 | ✅ | | imageview | 万像优图+过滤协议+webp | 1 | ✅ | | issupportwebp | 是否支持webp | 1 | ✅ | | lazyloading | 懒加载 | 1 | ✅ | | log | 当开启调试模式，页面链接带有rj_debug=on或cookie里面包含rj_debug=on，控制台输出 | 1 | ✅ | | map | 高德地图SDK | 1 | ✅ | | protocol | 过滤协议 | 1 | ✅ | | scroll | 滚动指令 | 1 | ✅ | | title | 修改页面标题 | 1 | ✅ | | xhtml | 富文本处理 | 1 | ✅ |

USE

Install

npm install === yarn add

npm install -S rj-component-vue

npm install git+https://github.com/zhouyu1993/rj-component-vue.git

或者

npm install git+ssh://[email protected]:zhouyu1993/rj-component-vue.git

Import all components

import Vue from 'vue'
import rjcv from 'rj-component-vue'

Vue.use(rjcv)

Import specific component

import Vue from 'vue'
import Test from 'rj-component-vue/lib/Test'

import 'rj-component-vue/lib/Test/style.css'

Vue.component(Test.name, Test)

⚠️Use babel-plugin-component

• Auto import css file
• Modular import component

Install babel-plugin-component

npm install -D babel-plugin-component

Set the configuration of babel-plugin-component in .babelrc

{
  "plugins": [
    [
      "component",
      [
        {
          "libraryName": "rj-component-vue",
          "style": true
        }
      ]
    ]
  ]
}

Then import rj-component-vue

import Vue from 'vue'
import { Test } from 'rj-component-vue'

Vue.component(Test.name, Test)