myronliu347 / vue-carbon Goto Github PK
View Code? Open in Web Editor NEW此项目已停止维护,建议迁移到 https://github.com/museui/muse-ui/
此项目已停止维护,建议迁移到 https://github.com/museui/muse-ui/
比如这样的微信打开浏览器引导?
图片素材https://raw.githubusercontent.com/kujian/weixinTip/master/live_weixin.png
我应该怎么组合这个组件呢?如何把内容放在遮罩上?我看源码遮罩并没有插槽,其他应用遮罩的组件,也没看到怎么引用的这个组件...
npm install 一个新的Vue项目,
按照文档安装,组件都是报错的。
是否大神这个是老版本的Vue才支持呀?
直接贴代码啦
<content-block >
<h3>介绍</h3>
<img src='/upload/image/20170213/1486968394492062.png' class='pic-row'>
<p>指挥官竞赛是什么……</p>
</content-block>
<style lang="css">
body {
background: url(/static/vue/bg.png) center 0px no-repeat;
background-position: center 0px;
background-color: #000d20 !important;
color: #FFF;
}
</style>
求指教,希望遍历*.vue
文件里面的html
和css
,把图片打包到某一目录,最好还可以替换源码的引用!
提个建议
1.样式的class最好加个前缀, 例如cb-modal, cb-button, 目前的写法与原本的项目样式冲突了,导致需要全局修改
2.组件名不要使用HTML原生标签, 例如button, content等, 原因同上
version 0.5.1
vue.js?3de6:2611
[Vue warn]: Do not use built-in or reserved HTML elements as component id: button
vue.js?3de6:2611
[Vue warn]: Do not use built-in or reserved HTML elements as component id: switch
挺好,继续关注
var _vueCarbon = webpack_require(!(function webpackMissingModule() { var e = new Error("Cannot find module "vue-carbon""); e.code = 'MODULE_NOT_FOUND'; throw e; }()));
安装的是0.5.0的版本,前端小白,求指点。谢谢。
用了button组件,但不支持表单的type="submit",无法做默认的表单提交
使用scroll-view
,当list > item-cell
的个数很多的时候(大概20个),Android滚动体验,效果非常差!会出现一片空白,然后再缓慢加载出来的样子。
<scroll-view v-ref:scroller>
<list>
<item-cell link v-link="menu.link" v-for="menu in group.children">
<item-title>{{menu.title}}</item-title>
</item-cell>
</list>
</scroll-view>
网上查了一下据说是以下CSS3属性设置在Android上的表现不佳引起
-webkit-overflow-scrolling: touch;
测试环境
1、请问如果我使用vue-carbon现在的版本 那么等 vue2 正式版发布了 迁移成本大么?
2、如果等待vue-carbon vue2的版本发布 时间会不会太久?
1.list可以显示滚动条吗?感觉应该要有个滚动条,如果电脑用户访问的话,有个滚动条会方便很多,最好能有个可选,是否显示
2.lazyload图片,这个功能很多UI框架都有,而且移动端需求很大,可不可以做一个这样的组件?或者如果自己想做的话应该怎么做?
3如何自定义item,比如无限加载LIST中,我想要做电商那种一行两个item这种,有没有什么建议规范?图片大小高度是怎么控制的,是否能用栅格自己随意搞item 还是一定要有一套规范?可不可以内置一个这样的
这样的需求应该也很多的
4底部tabbar,已经有顶部tabbar了,再设置个底部tabbar 吧,不然就是重复造轮子了..如下图这样的
5,我提出issue,在一个里面跟帖好,还是新建issue好?
rt
可能因为 chrome 本身有下滑的操作?
vue 2.0 has been officially released for 4 days~
什么时候可以出来了
高端机没有,暂未测试~
最近想用 cordova 开发一个手机app, 技术路线是 webpack + vue(.vue单文件) + es6 。 然后想请教下 @myronliu347 , cordova 是否可以把单页面应用打包成 apk ? @F-loat
比如:
有一些v-el:trigger指令在vuejs 2.0下出错。
使用的 vue-cli 基于 webpack template创建的项目
可以直接导入dist里的js和css使用吗,改怎么用,现在项目没有用webpack,全部修改来不及了
使用起来跟其他组件有点不匹配
import VueCarbon from 'vue-carbon'
Vue.use(VueCarbon)
还是会报错:
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
我有个需求在微信端复制文字.....,必须要有这个功能呢....这个要怎么开?
还有,这个UI有没有内置判断移动端还是桌面浏览器的API?
我在里面下载了个包,里面有个文档如下,英文,我英文不好,大概看了说是好像如果要用的话必须 provide credit. 这是什么意思呀?做项目可以免费用吗?另外觉得这个做的不错,有没有QQ交流群什么的?还有我刚学的VUE,这个可以实现热加载吗?应该怎么实现?
CARBON - Material Wireframe Kit
We may use this Kit as you want, in personal or commercial projects!
You may not redistribute it thought and if you include it in freebies links, collections etc. you must provide credit.
Finally, if you want, you may follow me on Dribbble and Twitter!
Enjoy!
URL:https://myronliu347.github.io/vue-carbon/#!/dateSelect
<date-select label="选择时间" type="min" format="YYYY年MM月DD日 HH分mm秒" placeholder="选择时间"></date-select>
HH分mm秒
单位分别应该是时、分
顺便建议添加一个清空选择的功能?
uc浏览器中按住屏幕,circle的白色加载背景就会显示出来;如果我只是点击内容区,并非想做滑动动作,这个就不友好,希望做一个下拉的判断。
vue 2.0 没有了v-el的指令,那么该如何实现呢?
<content v-el:scroller>
<!--加载下拉刷新数据-->
<refresh-control @refresh="refresh" :trigger="$els.scroller" :refreshing="refreshing"></refresh-control>
<!--渲染数据-->
<list >
<item-cell v-for="item in list" ripple>
<item-content>
<item-title-row>
<item-title>{{item.examName}}</item-title>
<item-title-after>{{item.examCode}}</item-title-after>
</item-title-row>
<item-sub-title>
<span v-if="item.status=='已确认'" class="examine-tag" v-link="'examine/answer/'+item.id">{{item.status}}</span>
<span v-if="item.status=='待确认'" class="examine-tag examine-tag-wait" v-link="'examine/answer/'+item.id">答案{{item.status}}</span>
<span v-if="item.status=='未上传'" class="examine-tag examine-tag-none">{{item.status}}</span>
<span v-if="item.status=='计算中'" class="examine-tag examine-tag-progress">{{item.status}}</span>
</item-sub-title>
<item-text>
{{item.gradeName}} {{item.subjectName}} {{item.nickName}}
</item-text>
</item-content>
</item-cell>
</list>
<infinite-scroll :trigger="$els.scroller" @load="loadMore" :loading="loading"></infinite-scroll>
</content>```
非常期待
muse-ui 已经开发完成,增加了许多新的组件,修复了vue-carbon 之前提出的问题,大家可以使用 muse-ui
的 carbon
主题。
[Vue warn]: Property or method "$els" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
found in
--->
at E:\web\vueapp\src\view\home.vue
at E:\web\vueapp\src\App.vue
我已经import VueCarbon from 'vue-carbon'
import 'vue-carbon/dist/vue-carbon.css' // 加载css文件
Vue.use(VueCarbon)但出现这个错误,还有一个是想问,api文档里面为什么没有bottom-Nav的说明
你好,能告知这个问题是怎么解决的吗?
我是想用vue-router的钩子来实现,无奈不知道为什么没起作用....
beforeRouteLeave (to, from, next) {
console.log("beforeRouteLeave");
from.setBottomNav(false);//隐藏bottomNav
}
非常喜欢material风格,效果非常棒,期待文档补全,别外主题订制方面侧重说一下。持续关注……
1,中间间距超大,看源码是加了16px margin,为啥要这样?这种2栏布局普遍的,应该考虑到这个需求,我想自定义,但是不知道该如何操作?如果要自定义的话,应该怎么弄?我要在源码上修改的话,你以后要是一升级我就头大了:
我尝试直接定义CSS结果代码不响应了,直接变成两列了.常识在组件CSS标签下加LESS标签,结果没反应...webpack根本不会...无奈只能提问了
2按钮在一般分辨率下突出严重,除了iPhone6p分辨率正常,其他分辨率都有突出情况,用的是button-row
<div v-el:scroller class="my-content">
<content-block>
<p class="refresh-desc">
向下滑动可以加载更多的数据
</p>
</content-block>
<grid-row gutter >
<grid-col width="50" tablet="15" v-for="item in items">
<card>
<my-Item-Media >
<a isconvert=1 biz-itemid="{{item.szItemId}}" href="https://item.taobao.com/item.htm?&id={{item.szItemId}}" target="_black" style="display: flex;justify-content:center;"><img v-lazy="item.imgURL+'_260x260.jpg'"/></a>
</my-Item-Media>
<item-content style="justify-content: flex-start;">
<item-title-row>
<item-title>{{item.title}}</item-title>
<item-title-after>2014-12-23</item-title-after>
</item-title-row>
<item-sub-title>
{{item.promotionTxt}}
</item-sub-title>
<item-text style="color:red">
{{item.fThirdPrice}}
</item-text>
<button-row style="width: 100%;">
<button fill raised color="" style="background-color: #CA86D2;flex:1 1" text="优惠券">紫色</button>
<button fill raised color="blue" style="flex:1 1" text="">蓝色</button>
</button-row>
</item-content>
</card>
</grid-col>
</grid-row>
<infinite-scroll :trigger="$els.scroller" @load="loadMore" :loading="loading"></infinite-scroll>
<!-- </content> -->
</div>
首先,感谢大家一直以来的支持,最近正在全力开发 vue-carbon 针对 vue2 的升级版 muse-ui , 主要解决 *vue-carbon * 的现有问题如下:
由于个人精力有限,在最近 1个多月内,vue-carbon 的更新进度会延缓,但是让然会第一时间完成bug修复, 大家可以放心提bug
如题,可以增加图片选择器吗?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.