If `label` is setted, and when the checkbox is selected, the value of `checked` is `'labelValue'`. When not selected, the value is `false`; Therefore, in circumstances of single checkbox, better not set `label`.
If `label` is setted, and when the checkbox is selected, the value of `checked` is `'labelValue'`. When not selected, the value is `false`; Therefore, in circumstances of single checkbox, better not set `label`.
@@ -20,96 +20,96 @@ This module exports a function called `createAPI` with which you can invoke the
- Example:
First we create Hello.vue component：
```html
<template>
<div@click="clickHandler">
{{content}}
<slotname="other"></slot>
</div>
</template>
<script type="text/ecmascript-6">
exportdefault{
name:'hello',
props:{
content:{
type:String,
default:'Hello'
}
},
methods:{
clickHandler(e){
this.$emit('click',e)
First we create Hello.vue component：
```html
<template>
<div@click="clickHandler">
{{content}}
<slotname="other"></slot>
</div>
</template>
<script type="text/ecmascript-6">
exportdefault{
name:'hello',
props:{
content:{
type:String,
default:'Hello'
}
},
methods:{
clickHandler(e){
this.$emit('click',e)
}
}
}
}
</script>
```
Then we make Hello.vue to an API style component by calling the `createAPI` method.
```js
importVuefrom'vue'
importHellofrom'./Hello.vue'
// import Style to load the base style
import{
/* eslint-disable no-unused-vars */
Style,
Dialog,
createAPI
}from'cube-ui'
Vue.use(Dialog)
// create this.$createHello API
createAPI(Vue,Hello,['click'],true)
// init Vue
newVue({
el:'#app',
render:function(h){
returnh('button',{
on:{
click:this.showHello
}
},['Show Hello'])
},
methods:{
showHello(){
/* The first parameter of `$createHello` will be passed to the component as its props except the events in `events`(It will transform by default, eg: If `events` has value `['click']`, then the prop `onClick` will be treated as component's event and not component's props) */
constinstance=this.$createHello({
content:'My Hello Content',
onClick(e){
console.log('Hello component clicked.')
</script>
```
Then we make Hello.vue to an API style component by calling the `createAPI` method.
```js
importVuefrom'vue'
importHellofrom'./Hello.vue'
// import Style to load the base style
import{
/* eslint-disable no-unused-vars */
Style,
Dialog,
createAPI
}from'cube-ui'
Vue.use(Dialog)
// create this.$createHello API
createAPI(Vue,Hello,['click'],true)
// init Vue
newVue({
el:'#app',
render:function(h){
returnh('button',{
on:{
click:this.showHello
}
},/* renderFn */(createElement)=>{
return[
createElement('p',{
slot:'other'
},'other content')
]
})
// Also, the event hanlder can be registered by instance's `$on` method
instance.$on('click',(e)=>{
const$dialog=this.$createDialog({
type:'confirm',
content:'click confirm to remove current instance',
icon:'cubeic-alert'
},['Show Hello'])
},
methods:{
showHello(){
/* The first parameter of `$createHello` will be passed to the component as its props except the events in `events`(It will transform by default, eg: If `events` has value `['click']`, then the prop `onClick` will be treated as component's event and not component's props) */
constinstance=this.$createHello({
content:'My Hello Content',
onClick(e){
console.log('Hello component clicked.')
}
},/* renderFn */(createElement)=>{
return[
createElement('p',{
slot:'other'
},'other content')
]
})
$dialog.show()
$dialog.$on('confirm',()=>{
// remove instance
instance.remove()
}).$on('cancel',()=>{
console.log('cancel')
// Also, the event hanlder can be registered by instance's `$on` method
instance.$on('click',(e)=>{
const$dialog=this.$createDialog({
type:'confirm',
content:'click confirm to remove current instance',
icon:'cubeic-alert'
})
$dialog.show()
$dialog.$on('confirm',()=>{
// remove instance
instance.remove()
}).$on('cancel',()=>{
console.log('cancel')
})
})
})
}
}
}
})
```
In this example, we create a component `Hello` which needs to be invoked in api form and we invoke it in another component.The focus is what `showHello()` does: invoking method `this.$createHello(config, renderFn)` to instantiate `Hello`.
})
```
In this example, we create a component `Hello` which needs to be invoked in api form and we invoke it in another component.The focus is what `showHello()` does: invoking method `this.$createHello(config, renderFn)` to instantiate `Hello`.
@@ -6,11 +6,11 @@ cube-ui is an elegant mobile component library based on Vue.js.
-**Quality**
Extracted from DiDi interior component library and has been put to business test for more than one year. Every component has full unit tests to provide assurance for continuous integration.
Extracted from DiDi interior component library and has been put to business test for more than one year. Every component has full unit tests to provide assurance for continuous integration.
-**Experience**
Make quick response, fluent animation and close to native components as the goal, and pursue the perfection of the interactive experience.
Make quick response, fluent animation and close to native components as the goal, and pursue the perfection of the interactive experience.
By monitoring the `change` event triggered by each roller and invoke `setData` method to dynamicly set values of associated rollers to accomplish linkage selectors.
By monitoring the `change` event triggered by each roller and invoke `setData` method to dynamicly set values of associated rollers to accomplish linkage selectors.
Instance method `setData` accepts two parameters, both of whom are arrays. The first is data that the roller displays and the second is indexs of selected values.
Instance method `setData` accepts two parameters, both of whom are arrays. The first is data that the roller displays and the second is indexs of selected values.
@@ -8,118 +8,119 @@ All of the built-in popup type components are implemented based on this componen
- Basic usage
```html
<cube-popuptype="my-popup"ref="myPopup">
My Popup Content 1
</cube-popup>
<cube-button@click="showPopup('myPopup')">
Show Popup
</cube-button>
```
Specifying `type` will help control class according to the type. In the example above, `cube-my-popup` will be added to the classList of the root element.
```js
exportdefault{
methods:{
showPopup(refId){
constcomponent=this.$refs[refId]
component.show()
setTimeout(()=>{
component.hide()
},1000)
```html
<cube-popuptype="my-popup"ref="myPopup">
My Popup Content 1
</cube-popup>
<cube-button@click="showPopup('myPopup')">
Show Popup
</cube-button>
```
Specifying `type` will help control class according to the type. In the example above, `cube-my-popup` will be added to the classList of the root element.
```js
exportdefault{
methods:{
showPopup(refId){
constcomponent=this.$refs[refId]
component.show()
setTimeout(()=>{
component.hide()
},1000)
}
}
}
}
```
```
The component is hidden by default and won't show up unless invoking the `show()` method of the instance of the component. And of course, invoking the `hide()` method of the instance of the component will hide itself. That's what `showPopup()` does in the example above (first show and hide in one second).
The component is hidden by default and won't show up unless invoking the `show()` method of the instance of the component. And of course, invoking the `hide()` method of the instance of the component will hide itself. That's what `showPopup()` does in the example above (first show and hide in one second).
Considering that in mobile secnes, popup is in center or bottom most of the time (covered in horizontal direction when setted to bottom). So if setting `center` to `false`, you'll set the component to bottom.
Considering that in mobile secnes, popup is in center or bottom most of the time (covered in horizontal direction when setted to bottom). So if setting `center` to `false`, you'll set the component to bottom.
An upper layer encapsulated CubeExtendPopup component with some styles is implemented. It supports passing the content on, has default slot and can be hidden if clicking the content. You can use it in this way (need to be registers globally or partially):
An upper layer encapsulated CubeExtendPopup component with some styles is implemented. It supports passing the content on, has default slot and can be hidden if clicking the content. You can use it in this way (need to be registers globally or partially):
There is no pull-down-to-refresh function by default. Configuring `pull-down-refresh` can turn on the dispatching of the event `pulling-down` and the animation of pulling down. You can listen to `pulling-down` event to update data.
```html
<!-- turn on the pull-down-to-refresh function and use default configuration -->
<cube-scroll
ref="scroll"
:data="items"
:pull-down-refresh="true"
@pulling-down="onPullingDown"></cube-scroll>
<!-- turn on the pull-down-to-refresh function and use custom configuration -->
<cube-scroll
ref="scroll"
:data="items"
:pull-down-refresh="pullDownRefresh"
@pulling-down="onPullingDown"></cube-scroll>
```
```javascript
exportdefault{
data(){
return{
items:[1,2,3,4,5],
pullDownRefresh:{
threshold:90,
stop:40,
txt:'Refresh success'
}
}
},
methods:{
onPullingDown(){
// simulate updating data
setTimeout(()=>{
if(Math.random()>0.5){
// if new data
this.items.unshift('I am new data: '++newDate())
}else{
// if no new data
this.$refs.scroll.forceUpdate()
There is no pull-down-to-refresh function by default. Configuring `pull-down-refresh` can turn on the dispatching of the event `pulling-down` and the animation of pulling down. You can listen to `pulling-down` event to update data.
```html
<!-- turn on the pull-down-to-refresh function and use default configuration -->
<cube-scroll
ref="scroll"
:data="items"
:pull-down-refresh="true"
@pulling-down="onPullingDown"></cube-scroll>
<!-- turn on the pull-down-to-refresh function and use custom configuration -->
<cube-scroll
ref="scroll"
:data="items"
:pull-down-refresh="pullDownRefresh"
@pulling-down="onPullingDown"></cube-scroll>
```
```javascript
exportdefault{
data(){
return{
items:[1,2,3,4,5],
pullDownRefresh:{
threshold:90,
stop:40,
txt:'Refresh success'
}
},1000)
}
},
methods:{
onPullingDown(){
// simulate updating data
setTimeout(()=>{
if(Math.random()>0.5){
// if new data
this.items.unshift('I am new data: '++newDate())
}else{
// if no new data
this.$refs.scroll.forceUpdate()
}
},1000)
}
}
}
}
```
```
- Pulling up to load
There is no pull-up-to-load function by default. Configuring `pull-up-load` can turn on the dispatching of the event `pulling-up` and the animation of pulling up. You can listen to `pulling-up` event to update data.
```html
<!-- turn on the pull-up-to-load function and use default configuration -->
<cube-scroll
ref="scroll"
:data="items"
:pull-up-load="true"
@pulling-up="onPullingUp"></cube-scroll>
<!-- turn on the pull-up-to-load function and use custom configuration -->
<cube-scroll
ref="scroll"
:data="items"
:pull-up-load="pullUpLoad"
@pulling-up="onPullingUp"></cube-scroll>
```
```javascript
exportdefault{
data(){
return{
items:[1,2,3,4,5],
itemIndex:5,
pullUpLoad:{
threshold:0,
txt:{
more:'Load more',
noMore:'No more data'
There is no pull-up-to-load function by default. Configuring `pull-up-load` can turn on the dispatching of the event `pulling-up` and the animation of pulling up. You can listen to `pulling-up` event to update data.
```html
<!-- turn on the pull-up-to-load function and use default configuration -->
<cube-scroll
ref="scroll"
:data="items"
:pull-up-load="true"
@pulling-up="onPullingUp"></cube-scroll>
<!-- turn on the pull-up-to-load function and use custom configuration -->
<cube-scroll
ref="scroll"
:data="items"
:pull-up-load="pullUpLoad"
@pulling-up="onPullingUp"></cube-scroll>
```
```javascript
exportdefault{
data(){
return{
items:[1,2,3,4,5],
itemIndex:5,
pullUpLoad:{
threshold:0,
txt:{
more:'Load more',
noMore:'No more data'
}
}
}
}
},
methods:{
onPullingUp(){
// simulate updating data
setTimeout(()=>{
if(Math.random()>0.5){
// if new data
letnewPage=[
'I am line '+++this.itemIndex,
'I am line '+++this.itemIndex,
'I am line '+++this.itemIndex,
'I am line '+++this.itemIndex,
'I am line '+++this.itemIndex
]
this.items=this.items.concat(newPage)
}else{
// if no new data
this.$refs.scroll.forceUpdate()
}
},1000)
},
methods:{
onPullingUp(){
// simulate updating data
setTimeout(()=>{
if(Math.random()>0.5){
// if new data
letnewPage=[
'I am line '+++this.itemIndex,
'I am line '+++this.itemIndex,
'I am line '+++this.itemIndex,
'I am line '+++this.itemIndex,
'I am line '+++this.itemIndex
]
this.items=this.items.concat(newPage)
}else{
// if no new data
this.$refs.scroll.forceUpdate()
}
},1000)
}
}
}
}
```
```
- Customize the animation of pulling down refreshing and pulling up loading
If you don't like the built-in slots of pulling down refreshing and pulling up loading, you can use [scoped slots](https://vuejs.org/v2/guide/components.html#Scoped-Slots) to customize animation. The example below uses scoped slots to customize animation of pulling down refreshing, while pulling up loading keeps default built-in animation.
```html
<cube-scroll
ref="scroll"
:data="items"
:pull-down-refresh="pullDownRefresh"
:pull-up-load="pullUpLoad"
@pulling-down="onPullingDown"
@pulling-up="onPullingUp">
<templateslot="pulldown"slot-scope="props">
<div
v-if="props.pullDownRefresh"
class="cube-pulldown-wrapper"
:style="props.pullDownStyle">
If you don't like the built-in slots of pulling down refreshing and pulling up loading, you can use [scoped slots](https://vuejs.org/v2/guide/components.html#Scoped-Slots) to customize animation. The example below uses scoped slots to customize animation of pulling down refreshing, while pulling up loading keeps default built-in animation.
With the parameters that scoped slots provide, you can control the process of animation according to the change of the state. Detailed scope parameters and their meaning are shown below in 'Slots'.
</template>
</cube-scroll>
```
With the parameters that scoped slots provide, you can control the process of animation according to the change of the state. Detailed scope parameters and their meaning are shown below in 'Slots'.
| probeType | the dispatching time of scroll event <br>1. non-real-time dispatching; <br>2. real-time dispatching during the scrolling; <br>3. real-time dispatching during the entire scrolling including inertial stage | Number | 1, 2, 3 | 0 |
| probeType | the dispatching time of scroll event <br>1. non-real-time dispatching; <br>2. real-time dispatching during the scrolling; <br>3. real-time dispatching during the entire scrolling including inertial stage | Number | 1, 2, 3 | 0 |
| pulldown | located above the list and shown when pulling down refreshing | pullDownRefresh: whether to turn on pulling-down-refreshing function<br>pullDownStyle: the style of showing and fading<br>beforePullDown: whether in pulling down operation<br>isPullingDown: whether in the process of pulling in data<br>bubbleY: the distance of pulling down currently - 50 |
| pullup | located below the list and shown when pulling up loading | pullUpLoad: whether to turn on pulling-up-loading function<br>isPullUpLoad: whether the data is being loaded |
| pullup | located below the list and shown when pulling up loading | pullUpLoad: whether to turn on pulling-up-loading function<br>isPullUpLoad: whether the data is being loaded |
`showNow` is uesed to control whether the time "now" is displayed. `minuteStep` is used to control the step of the minute. `delay` represents the time that postponed backwards from now, which determines the minimal optional time.
`showNow` is uesed to control whether the time "now" is displayed. `minuteStep` is used to control the step of the minute. `delay` represents the time that postponed backwards from now, which determines the minimal optional time.
- Configuration of date options
```html
<cube-button@click="showTimePicker">TimePicker - day options</cube-button>
```
```js
exportdefault{
methods:{
showTimePicker(){
this.$createTimePicker({
showNow:true,
minuteStep:10,
delay:10,
day:{
len:5,
filter:['Today','Tomorrow'],
format:'M year d day'
},
onSelect(selectedTime,selectedText){
console.log(selectedTime,selectedText)
},
onSelect:(selectedTime,selectedText)=>{
this.$createDialog({
type:'warn',
title:`selected timestamp ${selectedTime}`,
content:`selected content ${selectedText}`,
icon:'cubeic-alert'
}).show()
},
onCancel:()=>{
this.$createToast({
type:'correct',
txt:'Clicked cancel button',
time:1000
}).show()
}
}).show()
```html
<cube-button@click="showTimePicker">TimePicker - day options</cube-button>
```
```js
exportdefault{
methods:{
showTimePicker(){
this.$createTimePicker({
showNow:true,
minuteStep:10,
delay:10,
day:{
len:5,
filter:['Today','Tomorrow'],
format:'M year d day'
},
onSelect(selectedTime,selectedText){
console.log(selectedTime,selectedText)
},
onSelect:(selectedTime,selectedText)=>{
this.$createDialog({
type:'warn',
title:`selected timestamp ${selectedTime}`,
content:`selected content ${selectedText}`,
icon:'cubeic-alert'
}).show()
},
onCancel:()=>{
this.$createToast({
type:'correct',
txt:'Clicked cancel button',
time:1000
}).show()
}
}).show()
}
}
}
}
```
```
`len` attribute in `day` can set the length of date displayed in the first column.
`len` attribute in `day` can set the length of date displayed in the first column.
`filter` attribute can set the text of the date displayed in the first column.
`filter` attribute can set the text of the date displayed in the first column.
`format` attribute can set the text in `M year d day` format when the `len` is greater than the length of `filter` array.
`format` attribute can set the text in `M year d day` format when the `len` is greater than the length of `filter` array.
filter:['Today','Tomorrow','The day after tomorrow'],
format:'M year d day'
},
onSelect:(selectedTime,selectedText)=>{
this.$createDialog({
type:'warn',
title:`selected timestamp: ${selectedTime}`,
content:`selected content ${selectedText}`,
icon:'cubeic-alert'
}).show()
},
onCancel:()=>{
this.$createToast({
type:'correct',
txt:'Clicked cancel button',
time:1000
}).show()
}
})
timePicker.setTime(time)
timePicker.show()
}
}
}
}
```
```
`timePicker` instance exports `setTime` methos to set time manually with the time stamp as time format. When the time stamp is lower than current time stamp, `timePicker` displays current time by default.
`timePicker` instance exports `setTime` methos to set time manually with the time stamp as time format. When the time stamp is lower than current time stamp, `timePicker` displays current time by default.
By adding `ref` to `Tip`, you can get the reference to the component and invoke `show` or `hide` methods which are exposed by `Tip` to control the show or hide state of the component.
By adding `ref` to `Tip`, you can get the reference to the component and invoke `show` or `hide` methods which are exposed by `Tip` to control the show or hide state of the component.
```html
<divclass="tip"@click="showTip">
<cube-tipref="tip"></cube-tip>
</div>
```
```javascript
exportdefault{
methods:{
showTip(){
this.$refs.tip.show()
```html
<divclass="tip"@click="showTip">
<cube-tipref="tip"></cube-tip>
</div>
```
```javascript
exportdefault{
methods:{
showTip(){
this.$refs.tip.show()
}
}
}
}
```
```
- The position of the small triangle and the bubble box
You can configure the direction of the small triangle by `direction` and configure the position of the bubble box by `style`. Normally, the direction of the small triangle is opposite to the position of the bubble box.
You can configure the direction of the small triangle by `direction` and configure the position of the bubble box by `style`. Normally, the direction of the small triangle is opposite to the position of the bubble box.
