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,17 +20,17 @@ This module exports a function called `createAPI` with which you can invoke the
- Example:
First we create Hello.vue component：
First we create Hello.vue component：
```html
<template>
```html
<template>
<div@click="clickHandler">
{{content}}
<slotname="other"></slot>
</div>
</template>
</template>
<script type="text/ecmascript-6">
<script type="text/ecmascript-6">
exportdefault{
name:'hello',
props:{
...
...
@@ -45,12 +45,12 @@ First we create Hello.vue component：
}
}
}
</script>
```
</script>
```
Then we make Hello.vue to an API style component by calling the `createAPI` method.
Then we make Hello.vue to an API style component by calling the `createAPI` method.
```js
```js
importVuefrom'vue'
importHellofrom'./Hello.vue'
...
...
@@ -111,5 +111,5 @@ Then we make Hello.vue to an API style component by calling the `createAPI` meth
}
}
})
```
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`.
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,19 +8,19 @@ All of the built-in popup type components are implemented based on this componen
- Basic usage
```html
<cube-popuptype="my-popup"ref="myPopup">
```html
<cube-popuptype="my-popup"ref="myPopup">
My Popup Content 1
</cube-popup>
<cube-button@click="showPopup('myPopup')">
</cube-popup>
<cube-button@click="showPopup('myPopup')">
Show Popup
</cube-button>
```
</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.
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{
```js
exportdefault{
methods:{
showPopup(refId){
constcomponent=this.$refs[refId]
...
...
@@ -30,60 +30,61 @@ export default {
},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.
@@ -102,24 +103,24 @@ Considering that in mobile secnes, popup is in center or bottom most of the time
}
}
}
</script>
<style lang="stylus"rel="stylesheet/stylus">
</script>
<style lang="stylus"rel="stylesheet/stylus">
.cube-extend-popup
.cube-extend-popup-content
padding:20px
color:#fff
background-color:rgba(0,0,0,.8)
</style>
```
</style>
```
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.
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
```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
<!-- 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{
```
```javascript
exportdefault{
data(){
return{
items:[1,2,3,4,5],
...
...
@@ -81,30 +81,29 @@ export default {
},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.
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
```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
<!-- 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{
```
```javascript
exportdefault{
data(){
return{
items:[1,2,3,4,5],
...
...
@@ -140,15 +139,15 @@ export default {
},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.
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
```html
<cube-scroll
ref="scroll"
:data="items"
:pull-down-refresh="pullDownRefresh"
...
...
@@ -174,16 +173,15 @@ If you don't like the built-in slots of pulling down refreshing and pulling up l
</div>
</div>
</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'.
</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'.
| 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 |
`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>
```
```html
<cube-button@click="showTimePicker">TimePicker - day options</cube-button>
```
```js
exportdefault{
```js
exportdefault{
methods:{
showTimePicker(){
this.$createTimePicker({
...
...
@@ -81,23 +81,23 @@ export default {
}).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.
`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">
```html
<divclass="tip"@click="showTip">
<cube-tipref="tip"></cube-tip>
</div>
```
```javascript
exportdefault{
</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.
```html
<pclass="tip-eg">
```html
<pclass="tip-eg">
<span>CubeUI</span>
<cube-tip
ref="tip"
...
...
@@ -39,14 +39,14 @@ You can configure the direction of the small triangle by `direction` and configu
