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>
效果如下
-
一、UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 UI 库 vuetify - 为移
-
carbon ui 碳组分值 (carbon-components-vue) Carvue is a UI components library which is based on Carbon-Design and VueJS with heart and Proud to be a vue-awesome Carvue是一个UI组件库，它基于Carbon-Design和VueJS，并以其为人所
-
目录 前言 一、Vue.js UI组件 二、Vue.js开发框架 三、Vue.js实用库 四、Vue.js服务端 五、Vue.js辅助工具 六、Vue.js应用实例 七、Vue.js Demo示例 八、详细分类 01、UI组件及框架 02、滚动scroll组件 03、slider组件 04、编辑器 05、图表 06、日历 07、地址选择 08、地图 09、播放器 10、文件上传 11、图片处理 1
-
www.cnblogs.com/libo0125ok/…
-
博观而约取，厚积而薄发。 课程来源于mooc网：https://www.imooc.com/ 课程地址：https://coding.imooc.com/learn/list/74.html 感谢老师提供的学习机会 目标： 学会普通前端项目的环境搭建 学会简单需求的适配网站开发 学会比较流行的框架使用 系统掌握Js Css的语法，特性，为以后的前端开发做好技术沉淀 一 准备工作 Nod
-
upload上传使用： 采用手动触发上传的方式 action,data参数的动态绑定需要定义vue的变量实现 上传时没文件，执行上传会报错，所以需要确定是否有上传文件，一个方法是定义一个变量uploadfiles，并在上传的增删修改时，同步等于filelist，确保准确。 上传多个文件是多个post提交，需要定义一个变量，每次上传成功后加1，直到最后一个文件，执行关闭弹出层和刷新表格操作。 thi
-
//main.ts import { createApp } from 'vue' import App from './App.vue' import router from './router' import { createPinia } from 'pinia' import Antd from 'ant-design-vue' import * as antIcons from '@a
-
本文向大家介绍Vue基于NUXT的SSR详解，包括了Vue基于NUXT的SSR详解的使用技巧和注意事项，需要的朋友参考一下 本文介绍了Vue基于NUXT的SSR，分享给大家，也给自己留个笔记。 SSR 首先说下 SSR，最近很热的词，意为 Server Side Rendering（服务端渲染），目的是为了解决单页面应用的 SEO 的问题，对于一般网站影响不大，但是对于论坛类，内容类网站来说是致命
-
如果您在声明组件时更喜欢基于类的 API，则可以使用官方维护的vue-class-component装饰器： import Vue from 'vue' import Component from 'vue-class-component' // @Component 修饰符注明了此类为一个 Vue 组件 @Component({ // 所有的组件选项都可以放在这里 template:
-
建立新项目 $ vue init webpack my_blog 安装所有的第三方包 $ npm install 在本地运行 $ npm run dev 部署 $ npm run build
-
本文向大家介绍基于Vue实现拖拽功能，包括了基于Vue实现拖拽功能的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Vue实现拖拽功能的具体代码，供大家参考，具体内容如下 效果图： HTML代码： JS代码： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍基于Vue实现拖拽效果，包括了基于Vue实现拖拽效果的使用技巧和注意事项，需要的朋友参考一下 效果图 demo1.gif 分清clientY pageY screenY layerY offsetY的区别 在我们想要做出拖拽这个效果的时候，我们需要分清这几个属性的区别，这几个属性都是计算鼠标点击的偏移值，我们需要对其进行了解才可以继续实现我们的拖拽效果 clientY 指的是距离
-
本文向大家介绍vue基于element的区间选择组件，包括了vue基于element的区间选择组件的使用技巧和注意事项，需要的朋友参考一下 公司的系统中，产品经理在设计时经常要求对某个字段进行区间阈值设置或者作为筛选条件。但是苦于element中没有非常契合的组件（slider组件并不支持两端均能设定），于是自己动手造了一个。 成果 最终的展示效果如下： 需求 这里以项目的需求为例，基本的需求如下