didi / cube-ui Goto Github PK
View Code? Open in Web Editor NEW:large_orange_diamond: A fantastic mobile ui lib implement by Vue
Home Page: https://didi.github.io/cube-ui/
License: Apache License 2.0
:large_orange_diamond: A fantastic mobile ui lib implement by Vue
Home Page: https://didi.github.io/cube-ui/
License: Apache License 2.0
Bug
[Vue warn]: Invalid key "require" in validation rules object for prop "value".
No warn
value prop required
入口文件全局加载cube-ui,在页面中引用某个组件后,页面能正常渲染出组件的dom结构,但是组件相关的css样式一个都没有加载,这是什么原因?
popup
组件中 mask
点击事件中 emit 的方法名为 mask-click
picker
组件中 popup
注册的事件却是click
@click
更新为 @mask-click
后。点击 mask
遮罩部分可以正常关闭组件。<script type="text/ecmascript-6">
import apiMixin from '../../common/mixins/api'
const COMPONENT_NAME = 'cube-popup'
const EVENT_MASK_CLICK = 'mask-click'
export default {
methods: {
maskClick(e) {
this.$emit(EVENT_MASK_CLICK, e)
}
}
}
</script>
@click
<template>
<transition name="cube-picker-fade">
<cube-popup
type="picker"
:mask="true"
:center="false"
v-show="isVisible"
@touchmove.prevent
@click="cancel">
A feature
Some coupled inner logic need considered, When create cascade picker.
Use CascadePicker component to do those common cascade logic.
Bug
render error or render late.
render correctly
Tested page URL:
https://didi.github.io/cube-ui/example/#/picker
Test code
none
bug
下拉刷新时滑动列表,列表会有卡顿
版本v.1.0.2
代码:
mounted(){
this.picker = this.$createPicker({
title: '选择文章类型',
data: this.linkageData,
onChange: (i, newIndex) => {
// console.log(i, newIndex)
if (newIndex !== this.tempIndex[i]) {
for (let j = 2; j > i; j--) {
this.tempIndex.splice(j, 1, 0)
this.picker.scrollTo(j, 0)
}
this.tempIndex.splice(i, 1, newIndex)
this.picker.setData(this.linkageData, this.tempIndex)
}
}
})
}
此版本报forEach错误
版本v.1.1.0
代码:
mounted(){
this.picker = this.$createPicker({
title: '选择文章类型',
data: this.linkageData,
onChange: (i, newIndex) => {
// console.log(i, newIndex)
if (newIndex !== this.tempIndex[i]) {
for (let j = 2; j > i; j--) {
this.tempIndex.splice(j, 1, 0)
this.picker.scrollTo(j, 0)
}
this.tempIndex.splice(i, 1, newIndex)
this.linkagePicker.setData(this.linkageData, this.tempIndex)
}
}
})
}
此版本报forEach错误,联动也失效
目前解决办法(只是联动起效,forEach仍报错)将linkagePicker改为picker,另外在获取数据之后再加上
this.picker.setData(this.linkageData, this.tempIndex)
Upload
<cube-upload ...props >
...
</cube-upload>
feature
The mask animation in the Toast component is not smooth, feeling an apparently lag when changing opacity.
The fade in animation will be smoother.
Bug
IndexList component without title property may cause the position of uppercase bar unpredictable,also when tapping the fast navigation bar , for example, I should tap below the letter C to choose C.
Running as the demo shows to me.
Not declaring the title property
Tested page URL:
Test code
<cube-index-list :data="cityData" @select="selectItem" ></cube-index-list>
【当前问题】bscoller有许多配置可用,当前配置被拆分开来一个一个填使得组件十分不灵活,一大部分不能配置例如bounce等。就算把bscoller参数全部配上去,在使用组件的时候需要配置一大堆属性。
【建议修改】建议把bscoller插件的配置统一到bsOption,文档指引到bscoller的配置文档,这样组件使用会不会更方便呢?
Tested page URL:
Test code
Feature.
No slots supported.
Support slot
Featue
The property names in data, like 'text', 'value', can not be configured.
Can be configured by props. For example, you could configure 'name' as the alias of 'text', and 'id' as the alias of 'value'.
main.js:
import Vue from 'vue/dist/vue'
import router from './router'
import Cube from 'cube-ui'
import 'cube-ui/lib/style.css'
Vue.use(Cube)
new Vue({
el: '#app',
router,
})
index.vue:
<template>
<div id="index">
<cube-button @click="showDiaog" :disabled="true" icon="cubeic-right">show dialog</cube-button>
<cube-button type="submit" :active="true">submit</cube-button>
<div class="scroll-wrapper">
<cube-scroll :data="items"></cube-scroll>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [1, 2, 3, 4, 5],
}
},
methods: {
showDiaog() {
this.$createDialog({
type: 'alert',
title: 'Alert',
content: 'dialog content'
}).show()
}
}
}
</script>
您好:
我们想基于cube-ui的单个组件进行二次封装使用,但奈何技术有限,实在有点搞不懂该如何引入调用组件。
例:基于 Dialog
二次封装,提供基本的方法直接使用。
import {Dialog, createAPI} from "cube-ui";
export default {
alert: function (title, content) {
// js该如何调用对应API
Dialog({
type: 'alert',
title: 'Alert',
content: 'dialog content'
}).show()
}
}
vue官网vue-cli搭建新项目
npm install cube-ui --save 后提示stylus-loader、stylus模块未install
待把这两个modules install 后,还是报错
Radio component
<cube-radio ...props />
feature:need a cli to init the base code, and include post-compile related config.
Feature
Cannot rewrite btns
Can rewrite btns
UI & UE
None
Feature.
No dots slot.
Support dots slot.
模版:
<template>
<div @click="plus">
测试
<slot></slot>
</div>
</template>
<script>
export default {
name:"testDemo",
props: {
content: {
type: String,
default: 'Hello'
}
},
methods:{
plus(e){
this.$emit('click',e)
},
hehe(){
alert(1)
}
}
}
</script>
<style>
#foo{
color:red;
}
</style>
引入:
import testDemo from "@/components/testDemo"
// 调用
createAPI(Vue, testDemo, ['plus'], true)
使用:
showHello() {
// 直接调用
// 传入配置对象,默认传入的所有对象全都当做 props 传入组件
// 除了在调用 createAPI 的时候传入了 events,这里对应的就是
// on{event name} 会被当做事件回调处理
//$createVueComponent
const instance = this.$createTestDemo({
content: 'My Hello Content',
plus: "Hello Plus!",
onPlus(e) {
console.log(e)
console.log('Hello component clicked.')
}
}, /* renderFn */(createElement) => {
return <div id="foo" onClick={this.hehe}>Hello World!
<p></p>
</div>
})
}
报错:Invalid handler for event "click": got undefined
As the topic
bug
docs menu can not scroll
docs menu can scroll
Open docs website in firefox lateast version(firefox 57, Mac 10.12.6)
No
...
...
...
Tested page URL:
Test code
Picker component .How can I change the key & value name of data 。such as : [{name: JACK, id: 12},{name: TOM, id: 18}] .thanks
您好:
我们想基于cube-ui的单个组件进行二次封装使用,但奈何技术有限,实在有点搞不懂该如何引入调用组件。
例:基于 Dialog
二次封装,提供基本的方法直接使用。
import {Dialog, createAPI} from "cube-ui";
export default {
alert: function (title, content) {
// js该如何调用对应API
Dialog({
type: 'alert',
title: 'Alert',
content: 'dialog content'
}).show()
}
}
问题就是代码中的注释那里:js该如何调用对应API
可以能是我自己的坑,为了避免出现我这个反面教材还是说下问题吧:选项卡中使用scroll组件。如果使用v-show只有默认激活的选项卡内容可以滚动,其他都不行;如果使用v-if则都可以滚动
<template>
<div class="scroll-query-wrap">
<!-- tab item 区域 -->
<div class="tab-wrap">
<div class="tab-item" @click="onTabItem(0)" :class="{'tab-item-active': activeTabIndex == 0}">Con1</div>
<div class="tab-item" @click="onTabItem(1)" :class="{'tab-item-active': activeTabIndex == 1}">Con2</div>
<div class="tab-item" @click="onTabItem(2)" :class="{'tab-item-active': activeTabIndex == 2}">Con3</div>
</div>
<!-- tab content -->
<div class="tab-con-wrap">
<div class="con-main con1-wrap" v-if="activeTabIndex == 0">
<cube-scroll
ref="scrollCon1"
:data="list1"
:pull-up-load="true"
@pulling-up="onPullingUp(0)">
<ul class="con-list">
<li class="item"
v-for="(item, index) in list1"
:key="index">{{item}}</li>
</ul>
</cube-scroll>
</div>
<div class="con-main con2-wrap" v-if="activeTabIndex == 1">
<cube-scroll
ref="scrollCon2"
:data="list2"
:pull-up-load="true"
@pulling-up="onPullingUp(1)">
<ul class="con-list">
<li class="item"
v-for="(item, index) in list2"
:key="index">{{item}}</li>
</ul>
</cube-scroll>
</div>
<div class="con-main con3-wrap" v-if="activeTabIndex == 2">
<cube-scroll
ref="scrollCon3"
:data="list3"
:pull-up-load="true"
@pulling-up="onPullingUp(2)">
<ul class="con-list">
<li class="item"
v-for="(item, index) in list3"
:key="index">{{item}}</li>
</ul>
</cube-scroll>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'scrollQuery',
data () {
return {
activeTabIndex: 0,
list1: [1, 2, 3, 4, 5, 6],
list2: [1, 2, 3, 4, 5, 6, 7, 8],
list3: [1, 2, 3, 4, 5, 6, 8, 9]
}
},
methods: {
onTabItem (type) {
this.activeTabIndex = type
},
onPullingUp (type) {
setTimeout(() => {
if (Math.random() > 0.5) {
let itemIndex = 0
// 如果有新数据
let newPage = [
'I am line ' + type + ', ' + ++itemIndex,
'I am line ' + type + ', ' + ++itemIndex,
'I am line ' + type + ', ' + ++itemIndex,
'I am line ' + type + ', ' + ++itemIndex,
'I am line ' + type + ', ' + ++itemIndex
]
if (type === 0) this.list1 = this.list1.concat(newPage)
if (type === 1) this.list2 = this.list2.concat(newPage)
if (type === 2) this.list3 = this.list3.concat(newPage)
} else {
// 如果没有新数据
if (type === 0) this.$refs.scrollCon1.forceUpdate()
if (type === 1) this.$refs.scrollCon2.forceUpdate()
if (type === 2) this.$refs.scrollCon3.forceUpdate()
}
}, 1000)
}
}
}
</script>
<style scoped>
.tab-wrap{
display:flex;
align-items: center;
justify-content: center;
height: 35px;
width:100%;
background-color:#333;
}
.tab-item {
padding:0 10px;
margin-right:10px;
color:#fff;
}
.tab-item-active{
color:red;
}
/* con */
.tab-con-wrap{
position: relative;
height: 500px;
width:100%;
}
.con-main {
position: absolute;
left: 0;
top:0;
width:100%;
height:100%;
overflow:hidden;
}
.con-main .item {
height: 100px;
line-height: 100px;
text-align: center;
background-color:green;
color:#fff;
margin-bottom:30px;
}
.con-main .item:last-child {
margin-bottom:0;
}
</style>
Feature
Need to remove global components by beforeDestroy
Auto destroy the global components
Bug
When using indexList component, it goes well in windows, but when I published my project on server and then access my domain,there is no data shows in the page, I don't know why...
some data, I think.
publish on server.
Tested page URL:
http://rozwel.club/tby/#/list
Test code
Here is my code , I use the vConsole in my code to prove the xhr goes well, you can try to access the url above on computer and on your mobile.
<template>
...
<div v-if="cityData.length !==0">
<cube-index-list :data="cityData" @select="selectItem" :title="'列表'"></cube-index-list>
</div>
...
</template>
<script>
import { getDoc } from "@/api/document/document.js";
import { formatDocs } from "@/common/js/index.js";
export default {
data() {
return {
cityData: []
};
},
methods: {
created() {
getDoc().then(res => {
this.cityData = formatDocs(res.data);
//I try to convert the structure of data, I think there is no mistake in formatDocs function because it shows data on computer.
})
}
};
</script>
reporting a bug
[Vue warn]: Invalid key "require" in validation rules object for prop "value"
看了一下错误的原因, 应该是
https://github.com/didi/cube-ui/blob/dev/lib/checkbox-group/index.js
这里面的 props 的问题 还是用了 require 的原因
value: {
type: [Boolean, String],
require: true
},
no warn
value prop required
Tested page URL:
Test code
实际使用:
//maIn.js
import Vue from 'vue'
import App from './App'
import router from "./router"
import 'cube-ui/lib/style.css'
import { createAPI } from 'cube-ui'
const MyComponent = Vue.extend({
name: 'hello',
props: {
content: {
type: String,
default: 'Hello'
}
},
template: '<div @click="clickHandler">{{content}}<slot name="other"></slot></div>',
methods: {
clickHandler(e) {
this.$emit('click', e)
}
}
})
// 调用
createAPI(Vue, MyComponent, ['click'], true)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
router,
render: h => h(App)
}).$mount('#app-box')
<template>
<div>
<button @click="showHello">Show Hello</button>
</div>
</template>
<script>
export default {
name: 'demo',
methods: {
showHello() {
// 直接调用
// 传入配置对象,默认传入的所有对象全都当做 props 传入组件
// 除了在调用 createAPI 的时候传入了 events,这里对应的就是
// on{event name} 会被当做事件回调处理
// console.log(this)
const instance = this.$createHello({
content: 'My Hello Content',
onClick(e) {
console.log('Hello component clicked.')
}
}, /* renderFn */(createElement) => {
return [
createElement('p', {
slot: 'other'
}, 'other content')
]
})
// 通过 Vue 组件的 $on 也是可以监听的,看使用场景
instance.$on('click', (e) => {
console.log('on click', e)
})
// 移除销毁
instance.remove()
}
}
}
</script>
报错: this.$createHello is not a function
改变成this.$createVueComponent 生效
showHello() {
// 直接调用
// 传入配置对象,默认传入的所有对象全都当做 props 传入组件
// 除了在调用 createAPI 的时候传入了 events,这里对应的就是
// on{event name} 会被当做事件回调处理
// console.log(this)
const instance = this.$createVueComponent({
content: 'My Hello Content',
onClick(e) {
console.log('Hello component clicked.')
}
}, /* renderFn */(createElement) => {
return [
createElement('p', {
slot: 'other'
}, 'other content')
]
})
// 通过 Vue 组件的 $on 也是可以监听的,看使用场景
instance.$on('click', (e) => {
console.log('on click', e)
})
}
这个不是issue, 我想问下cube-content不使用流式布局是因为什么, 目前使用的是固定宽高通过overflow: scroll;
让内部滚动. 业务使用会不会有局限性啊?
feature
Official web pages haven't adopt mobile device.
adopt mobile device:
滚动列表里面有文本域 怎么让文本域的超出内容局部滚动
indexList中,当最后一个list的高度(数据较少时)少于屏幕的高度时,点击最后一个list时的currentIndex时没有落到lastIndex的,这个可否作出优化的处理?
有以下两点问题:
timepicker只能显示和设置当前时间之后的时间,而不能设置当前时间之前的时间。这极大的限制了timepicker的应用场景。建议增加属性,以支持设置当前时间之前的时间。
对于时间的显示,建议可以直接显示时间 ,而不是默认显示【今天】
上拉加载或者下拉刷新的时候 会有回弹的抖动啊
部分苹果7的版本
Feature
If used postcss-px2rem, some components or behaviors will be not perfect.
Support rem.
场景:
1、按照cube-ui文档的后编译四个步骤安装
2、不同之处在于.babelrc文件的plugin是这么配置的,保留了默认的transform-runtime(不知道使用了babel-polyfill之后这么配置是否多此一举)
"plugins": ["transform-runtime", ["transform-modules", {
"cube-ui": {
// 注意: 这里的路径需要修改到 src/modules 下
"transform": "cube-ui/src/modules/${member}",
"kebabCase": true
}
}]]
3、执行npm run dev
现状:
项目可以正常启动,但是编译的过程中会报错,找了很久没有找到解决方法,请指教
{ Error: Cannot find module '/Users/pengyong/Des/package.json'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at loadPkg (/Users/pengyong/Desktop/svn/projectPath/node_modules/[email protected]@webpack-post-compile-plugin/lib/util.js:68:11)
at /Users/pengyong/Desktop/svn/projectPath/node_modules/[email protected]@webpack-post-compile-plugin/lib/util.js:16:17
at Array.forEach (native)
at Object.collectDependencies (/Users/pengyong/Desktop/svn/projectPath/node_modules/[email protected]@webpack-post-compile-plugin/lib/util.js:13:9)
at PostCompilePlugin._collectCompileDependencies (/Users/pengyong/Desktop/svn/projectPath/node_modules/[email protected]@webpack-post-compile-plugin/lib/index.js:47:8)
at Compiler.<anonymous> (/Users/pengyong/Desktop/svn/projectPath/node_modules/[email protected]@webpack-post-compile-plugin/lib/index.js:20:29)
at Compiler.applyPluginsAsyncSeries (/Users/pengyong/Desktop/svn/projectPath/node_modules/[email protected]@tapable/lib/Tapable.js:206:13)
at Watching._go (/Users/pengyong/Desktop/svn/projectPath/node_modules/[email protected]@webpack/lib/Compiler.js:47:17)
at Watching.invalidate (/Users/pengyong/Desktop/svn/projectPath/node_modules/[email protected]@webpack/lib/Compiler.js:141:9)
at watcher.compiler.watchFileSystem.watch (/Users/pengyong/Desktop/svn/projectPath/node_modules/[email protected]@webpack/lib/Compiler.js:122:9)
at EventEmitter.watcher.once (/Users/pengyong/Desktop/svn/projectPath/node_modules/[email protected]@webpack/lib/node/NodeWatchFileSystem.js:45:4)
at EventEmitter.g (events.js:292:16) code: 'MODULE_NOT_FOUND' }
feature
cancelTxt
and confirmTxt
can not be configured.
can config them using props as picker does.
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.