浅谈基于Vue.js的移动组件库cube-ui

浅谈基于Vue.js的移动组件库cube-ui

介绍

cube-ui是一个基于 Vue.js 的移动端组件库。它提供了很多常用的移动端 UI 组件，可以快速构建高质量的移动应用。cube-ui 在使用上都使用单文件组件，非常适合 Vue.js 开发者。它是由滴滴出行开源的。

安装

先使用npm安装vue-cli，再使用vue-cli构建项目

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install

安装 cube-ui：

$ npm install cube-ui --save-dev

使用

在 main.js 中引用 CubeUI 和 CubeUI 样式：

import Vue from 'vue';
import CubeUI from 'cube-ui';
import 'cube-ui/lib/cubui.css';

Vue.use(CubeUI);

在模板中使用 CubeUI 组件：

<template>
  <div>
    <cube-button @click="handleClick">点击我</cube-button>
  </div>
</template>

示例

1. 弹出框组件 cube-dialog

<template>
  <div>
    <cube-button @click="showDialog">弹出框</cube-button>
    <cube-dialog :z-index="99" title="提示"
      v-model="isShowDialog">
      <p>这是一个弹出框</p>
      <p>点击确定按钮，此对话框才会关闭</p>
      <template slot="footer">
        <cube-button @click="isShowDialog = false">取消</cube-button>
        <cube-button type="primary"
          @click="isShowDialog = false">确定</cube-button>
      </template>
    </cube-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShowDialog: false
    }
  },
  methods: {
    showDialog () {
      this.isShowDialog = true;
    }
  }
};
</script>

2. 滚动组件 cube-scroll

<template>
  <div>
    <cube-scroll :pull-up-load="pullUpLoad"
      :pull-down-load="pullDownLoad"
      :data="data"
      :no-data-text="'暂无数据'"
      :direction="direction"
      class="wrapper">
      <ul>
        <li v-for="(item, index) of data" :key="index">{{item}}</li>
      </ul>
    </cube-scroll>
  </div>
</template>

<script>
export default {
  data () {
    return {
      data: [],
      direction: 'up'
    }
  },
  mounted () {
    this.loadData();
  },
  methods: {
    loadData () {
      const newData = Array.from({ length: 10 },
                                 (_, i) => `第${i + 1}条数据`);
      setTimeout(() => {
        this.data = [...this.data, ...newData];
        console.log('加载数据完成');
      }, 2000);
    },
    pullUpLoad () {
      this.loadData();
    },
    pullDownLoad () {
      this.loadData();
    }
  }
}
</script>

<style>
.wrapper {
  height: 400px;
}
</style>

以上两个示例为 cube-dialog 和 cube-scroll 的使用方法，这两个组件是 cube-ui 非常常用的组件，更多组件的使用方法详见 CubeUI官网。