基于Vue的Material Design UI库 Vue-Carbon

ゞ浴缸里的玫瑰 2022-05-18 04:12 205阅读 0赞

Vue-Carbon 详细介绍

vue-carbon，基于 vue 开发 material design 风格的移动端 WEB UI 库, 设计资源参考 [CARBON][] [FrameWork7][]。

### 安装 ###

目前只使用 npm 安装，和使用 webpack 项目的应用

npm install vue-carbon --save

import Vue from 'vue'
    import VueCarbon from 'vue-carbon'
    Vue.use(VueCarbon)

### 简单使用 ###

例如这个 Refresh Control 组件的demo页面

<template>
    <div class="page">
      <header-bar>
        <icon-button slot="left" @click="back()" icon="arrow_back"></icon-button>
        <span>Refresh Control</span>
        <icon-button slot="right" @click="refresh()" icon="refresh"></icon-button>
      </header-bar>
      <content v-el:trigger>
        <refresh-control @refresh="refresh" :trigger="$els.trigger" :refreshing="refreshing"></refresh-control>
        <content-block>
          <p class="refresh-desc">
             按住 - 下拉 - 释放可以刷新数据
          </p>
        </content-block>
        <list>
          <item-cell v-for="item in items">
            <item-title>
              {
      {item}}
            </item-title>
          </item-cell>
        </list>
      </content>
    </div>
    </template><script>export default {  data () {    return {      items: ['1', '2', '3', '5', '6', '7', '8', '9', '10'],      end: 10,      refreshing: false    }  },  methods: {    back () {      window.history.back()    },    refresh () {      this.refreshing = true      setTimeout(() => {        this.refreshing = false        var arr = []        for (let i = this.end; i < this.end + 10; i++) {          arr.push(String(i + 1))        }        this.end += 10        this.items = arr      }, 2000)    }  }}</script><style lang="less">.refresh-desc{  text-align: center;}</style>

效果如下

![153921_x1Qs_2720166.png][]

[CARBON]: http://materialmockups.com/
[FrameWork7]: https://github.com/nolimits4web/Framework7
[153921_x1Qs_2720166.png]: /images/20220518/f091219441db4106a98180417ad9346a.png