基于 vue 開發 material design 風格的移動端 WEB UI 庫, 設計資源參考?CARBON?FrameWork7

在線訪問地址?vue-carbon demos

安裝

目前只使用與 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 = truesetTimeout(() => {this.refreshing = falsevar arr = []for (let i = this.end; i < this.end + 10; i++) {arr.push(String(i + 1))}this.end += 10this.items = arr}, 2000)}} } </script><style lang="less"> .refresh-desc{text-align: center; } </style>

效果如下：

總結

以上是生活随笔為你收集整理的vue-carbon移动端框架的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。