myronliu347 / vue-carbon Goto Github PK

View Code? Open in Web Editor NEW

862.0 862.0 139.0 8.51 MB

此项目已停止维护，建议迁移到 https://github.com/museui/muse-ui/

JavaScript 36.47% Vue 60.40% CSS 3.14%

vue-carbon's People

Stargazers

Watchers

Forkers

studyforfun jerroldlee flatman89 zhang-xiao liangzhiyuanxxx rockjava jekywong xshiyun dream-seeker jango2015 yyxzz jzxyouok yinrongping robinpeng l1183479157 pronebel andygoo hbyufan sailai thk9 taosher skakruk fnet123 alpfish virtoolswebplayer roymina yilisong yeatslu davidmr001 bzksx2 allin09 geanlinzh movmo xulong2005 zhanghua3450 issmile zxyling delktsai wujiy daihere1993 sidfeng looknd billydotzhang zhouxun3 bergxu windancer wwmin ibeizhu nebelpro lingtal-fork vieyahn zy841336855 harryyoo varrant bensonzhow gittz archer-christ guanmeiqi anke1460 maurojr wjhappy devsnippet huangzhenxian midday o0teamo0o rayncc didilinkin xialinlin blackbutton phamay bukaa fxh615 g0ld3lux pr-chen eastwinter artdong heruijun flowbywind chubby886 cocoon-into-butterfly knghlp508 linkyfish resvue yunhor okusnadi yangbinji onc4hy sinper0212 linyasa bianfeiniao benny1311 zvmail jschina gaoxuru02 imoacs wyj18761874284 jiaqiq sunshineling dut3062796s shenhx

vue-carbon's Issues

完全按照文档来的，无限加载，无法触发loadMore方法

<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>```

目前准备基于vue-carbon编写app的一些问题？

1、请问如果我使用vue-carbon现在的版本那么等 vue2 正式版发布了迁移成本大么？
2、如果等待vue-carbon vue2的版本发布时间会不会太久？

[Vue warn]: Unknown custom element

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.

Uncaught TypeError: Cannot read property 'contains' of null

当有下拉选择时，控制台莫名其妙一直有这个报错，而且只要有点击事件，这个错误数字成倍叠加

问题代码在这里

this.windowListener = (e) => {
      if (!this.$els.select.contains(e.target)) {
        this.hideSelect()
      }
    }

点击其他地方 this.$els.select 未null

如何使用overlay 做一个引导页?

比如这样的微信打开浏览器引导?

图片素材https://raw.githubusercontent.com/kujian/weixinTip/master/live_weixin.png
我应该怎么组合这个组件呢?如何把内容放在遮罩上?我看源码遮罩并没有插槽,其他应用遮罩的组件,也没看到怎么引用的这个组件...

vue2.0 support?

vue 2.0 has been officially released for 4 days~

样式,标签冲突

提个建议
1.样式的class最好加个前缀, 例如cb-modal, cb-button, 目前的写法与原本的项目样式冲突了,导致需要全局修改
2.组件名不要使用HTML原生标签, 例如button, content等, 原因同上

关于适配 Vue2.0

muse-ui 已经开发完成，增加了许多新的组件，修复了vue-carbon 之前提出的问题，大家可以使用 muse-ui 的 carbon 主题。

日历限制选择月份时，非该月会默认提交“当前月今天”。

如题，说得有点拗口，，看下图（仅选择七月那一个日期组件），，如图当前3月并不能选择日期，因为是灰色的，但确定后依然会提交日期上去。

看这个是基于某前端什么英文的网站,这个是可以免费使用吗?

我在里面下载了个包,里面有个文档如下,英文,我英文不好,大概看了说是好像如果要用的话必须 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!

我把项目移植到新的carbon版本,然后好像出错,貌似是什么语法格式错误检查的,这个要怎么关掉?

我把项目移植到新的carbon版本,然后好像出错,貌似是什么语法格式错误检查的,这个要怎么关掉?
错误如下图所示:

*.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，把图片打包到某一目录，最好还可以替换源码的引用！

用的栅格布局,电脑和平板正常,手机显示有些BUG.

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>

几个问题集合,1滚动条问题?2lazyload组件3自定义item4底部tabbar

1.list可以显示滚动条吗?感觉应该要有个滚动条,如果电脑用户访问的话,有个滚动条会方便很多,最好能有个可选,是否显示
2.lazyload图片,这个功能很多UI框架都有,而且移动端需求很大,可不可以做一个这样的组件?或者如果自己想做的话应该怎么做?
3如何自定义item,比如无限加载LIST中,我想要做电商那种一行两个item这种,有没有什么建议规范?图片大小高度是怎么控制的,是否能用栅格自己随意搞item 还是一定要有一套规范?可不可以内置一个这样的

这样的需求应该也很多的
4底部tabbar,已经有顶部tabbar了,再设置个底部tabbar 吧,不然就是重复造轮子了..如下图这样的

5,我提出issue,在一个里面跟帖好,还是新建issue好?

如何在每次进入home的时候显示bottomNav,在进入另一个路由的时候隐藏bottomNav?

我是想用vue-router的钩子来实现,无奈不知道为什么没起作用....

beforeRouteLeave (to, from, next) {
console.log("beforeRouteLeave");
from.setBottomNav(false);//隐藏bottomNav
}

滚动条的兼容问题

使用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;

测试环境

Android 6.0
vue-carbon 0.5.2

不是问题，纯点赞 good job

非常喜欢material风格，效果非常棒，期待文档补全，别外主题订制方面侧重说一下。持续关注……

大神呀，好像都报错呀

npm install 一个新的Vue项目，
按照文档安装，组件都是报错的。
是否大神这个是老版本的Vue才支持呀？

目前我只需要使用 refreshControl 组件，我该怎么调用呢? 在本地环境下（非vue-cli）

demo上Date Select“选择时间”单位错误

URL:https://myronliu347.github.io/vue-carbon/#!/dateSelect

<date-select label="选择时间" type="min" format="YYYY年MM月DD日 HH分mm秒" placeholder="选择时间"></date-select>

HH分mm秒单位分别应该是时、分

顺便建议添加一个清空选择的功能？

Refresh Control组件上滑bug

uc浏览器中按住屏幕，circle的白色加载背景就会显示出来；如果我只是点击内容区，并非想做滑动动作，这个就不友好，希望做一个下拉的判断。

第200个star

挺好，继续关注

请问支持vue2吗？

demo Picker 例子在 chrome android 上面无法滑动

rt
可能因为 chrome 本身有下滑的操作?

提示 fonts/icomoon.91ee5ec.woff 404错误

使用的 vue-cli 基于 webpack template创建的项目

使用组件报错

[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的说明

表单提交

用了button组件,但不支持表单的type="submit",无法做默认的表单提交

出现一个莫名其妙的问题

npm run dev 下是这样的

npm run build 后这样了,是什么鬼?

我好长时间没跟新版本了,和版本有关系吗?我要怎么升级版本?

你好，请问下组件命名与Html原生的命名冲突该如何解决

npm install了，webpack报无法找到vue-carbon

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的版本，前端小白，求指点。谢谢。