Skip to content

Commit

Permalink
[merge] Merge branch 'dev'
Browse files Browse the repository at this point in the history
  • Loading branch information
jin5354 committed Aug 22, 2017
2 parents f30e2d2 + 57a1052 commit aca2cfc
Show file tree
Hide file tree
Showing 19 changed files with 157 additions and 37 deletions.
50 changes: 27 additions & 23 deletions docs/zh-cn/ActionSheet.md
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ ActionSheet({
title: '请选择排序方式',
content: {
type: 'radio',
maxDisplay: 5,
items: [
{ title: '名称字母排序' },
{ title: '总交易额' },
Expand Down Expand Up @@ -117,29 +118,32 @@ ActionSheet({

## 配置项

| 参数 | 描述 | 类型 | 默认值 | 备注 |
|--------------------- |---------------------------- |---------- |---------- |--------------------------------------------------------------------------------- |
| title | 标题文字 | String | / | |
| isShowTitle | 是否展示标题 | Boolean | true | |
| textAlign | 对齐方式 | String | left | 单选/多选时必须为left |
| content | 正文显示配置 | Object | / | content 配置项见下表 |
| confirmText | 主操作文字 | String | 确定 | |
| cancelText | 辅操作文字 | String | 取消 | |
| isShowConfirmButton | 是否展示主操作按钮 | Boolean | true | 无确定按钮,则选择后自动关闭操作表。单列建议不显示(因为没有选项标记)多选必须存在 |
| maskColor | 蒙版颜色 | String | #000 | |
| maskOpacity | 蒙版透明度 | Number | 0.5 | |
| transition | 设置弹出与关闭时的动画效果 | String | fade | 可选值:fade |
| onItemClick | 执行点击操作项的回调函数 | Function | 关闭窗体 | 传入参数:instance(实例) 和 data(选择项数据) |
| onConfirm | 确认选择时的回调函数 | Function | 关闭窗体 | 传入参数:instance(实例) 和 data(选择项数据) |
| onCancel | 执行辅操作时的回调函数 | Function | 关闭窗体 | |
| onShow | 窗体出现后的回调函数 | Function | | |
| onHide | 窗体隐藏后的回调函数 | Function | | |
| onMaskClick | 点击 Mask 时的回调函数 | Function | | |
| 参数 | 描述 | 类型 | 默认值 | 备注 |
| ------------------- | -------------- | -------- | ---- | ---------------------------------------- |
| title | 标题文字 | String | / | |
| isShowTitle | 是否展示标题 | Boolean | true | |
| textAlign | 对齐方式 | String | left | 单选/多选时必须为left |
| content | 正文显示配置 | Object | / | content 配置项见下表 |
| maxDisplay | 最大显示条数 | Number | 7 | |
| confirmText | 主操作文字 | String | 确定 | |
| cancelText | 辅操作文字 | String | 取消 | |
| isShowConfirmButton | 是否展示主操作按钮 | Boolean | true | 无确定按钮,则选择后自动关闭操作表。单列建议不显示(因为没有选项标记)多选必须存在 |
| maskColor | 蒙版颜色 | String | #000 | |
| maskOpacity | 蒙版透明度 | Number | 0.5 | |
| transition | 设置弹出与关闭时的动画效果 | String | fade | 可选值:fade |
| onItemClick | 执行点击操作项的回调函数 | Function | 关闭窗体 | 传入参数:instance(实例) 和 data(选择项数据) |
| onConfirm | 确认选择时的回调函数 | Function | 关闭窗体 | 传入参数:instance(实例) 和 data(选择项数据) |
| onCancel | 执行辅操作时的回调函数 | Function | 关闭窗体 | |
| onShow | 窗体出现后的回调函数 | Function | | |
| onHide | 窗体隐藏后的回调函数 | Function | | |
| onMaskClick | 点击 Mask 时的回调函数 | Function | | |



## content 配置项

| 参数 | 描述 | 类型 | 默认值 | 备注 |
|-------------- |--------------------------- |-------- |-------- |----------------------------------------------------------------------------------------------------- |
| type | 类型 | String | single | 可选值: radio/checklist |
| items | 操作项名称 | Array | / | 单列: 按此形式传入数据, [{'title':''},...]双列: 按此形式传入数据, [{'title':'','subtitle':''},...] |
| defaultValue | 单选/多选默认选中项的下标 | Array | / | 每次加载组件前修改该值即可改变默认选中项,若不改变则以首次传入值为准(每次选中项的下标会以_index返回) |
| 参数 | 描述 | 类型 | 默认值 | 备注 |
| ------------ | ------------- | ------ | ------ | ---------------------------------------- |
| type | 类型 | String | single | 可选值: radio/checklist |
| items | 操作项名称 | Array | / | 单列: 按此形式传入数据, [{'title':''},...]双列: 按此形式传入数据, [{'title':'','subtitle':''},...] |
| defaultValue | 单选/多选默认选中项的下标 | Array | / | 每次加载组件前修改该值即可改变默认选中项,若不改变则以首次传入值为准(每次选中项的下标会以_index返回) |
1 change: 1 addition & 0 deletions docs/zh-cn/Scroller.md
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,7 @@ export default {
| loadText | 上拉加载文案 | String | 加载更多数据 | |
| loadingText | 正在加载文案 | String | 正在加载 | |
| noDataText | 无数据文案 | String | 没有更多数据了 | |
| noDataLoadLock | 上拉加载无数据时锁住 | Boolean | true | |

## 可供调用的实例方法

Expand Down
1 change: 1 addition & 0 deletions example/components/Example/ActionSheet.vue
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export default {
showActionSheet2: function() {
this.$ActionSheet({
title: '请选择排序方式',
maxDisplay: 5,
content: {
type: 'radio',
items: [
Expand Down
2 changes: 1 addition & 1 deletion lib/action-sheet.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion lib/checkbox-group.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion lib/index.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion lib/radio-group.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion lib/scroller.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "wdui",
"version": "0.6.8",
"version": "0.6.9",
"description": "Mobile UI Components Library based on Vue 2.0",
"main": "lib/index.js",
"repository": {
Expand Down
1 change: 1 addition & 0 deletions packages/ActionSheet/src/ActionSheet.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ const init = (propsData) => {
const ActionSheet = (options = {}) => {
const instance = init({
title: options.title,
maxDisplay: options.maxDisplay,
isShowTitle: options.isShowTitle,
content: options.content,
textAlign: options.textAlign,
Expand Down
16 changes: 12 additions & 4 deletions packages/ActionSheet/src/ActionSheet.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
<transition :name="actionsheetTransition" @after-enter="onShow()" @after-leave="onHide()">
<div :class="{'wd-actionsheet-theme-left': textAlign === 'left','wd-actionsheet-theme-center': textAlign === 'center'}" class="wd-actionsheet" ref="popup" v-if="visible" :style="{'z-index': zIndex}">
<header v-if="isShowTitle" class="wd-actionsheet-header">{{ title }}</header>
<div class="wd-actionsheet-content">
<wd-actionsheet-slot @getData="getData" :items="content.items" :type="content.type" :defaultValue="content.defaultValue"></wd-actionsheet-slot>
<div class="wd-actionsheet-content" :style="`max-height: ${maxDisplay * itemHeight}px;`">
<wd-actionsheet-slot @getItemHeight="setItemHeight" @getData="getData" :items="content.items" :type="content.type" :defaultValue="content.defaultValue"></wd-actionsheet-slot>
</div>
<footer class="wd-actionsheet-footer">
<span @click="onCancel">{{ cancelText }}</span>
Expand Down Expand Up @@ -31,6 +31,10 @@
type: [String, Number],
default: ''
},
maxDisplay: {
type: Number,
default: 7
},
isShowTitle: {
type: Boolean,
default: true
Expand Down Expand Up @@ -90,7 +94,8 @@
data() {
return {
visible: false,
datas: {}
datas: {},
itemHeight: 0
}
},
computed: {
Expand All @@ -113,6 +118,9 @@
},
maskClick() {
this.onMaskClick()
},
setItemHeight(height) {
this.itemHeight = height
}
}
}
Expand All @@ -123,7 +131,6 @@
$header-line-height: 88px;
$content-text-color: #222;
$content-text-size: 32px;
$content-line-height: 104px;
$border-color: #ddd;
$button-background-color: #f7f7f7;
.wd-actionsheet {
Expand All @@ -142,6 +149,7 @@
}
.wd-actionsheet-content {
padding: 0 0 0 40px;
overflow-y: auto;
}
.wd-actionsheet-footer {
display: flex;
Expand Down
8 changes: 7 additions & 1 deletion packages/ActionSheet/src/ActionSheetSlot.vue
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,8 @@ export default {
return {
selected: '',
currentCheck: [],
indexList: []
indexList: [],
itemHeight: 0
}
},
mounted() {
Expand All @@ -68,6 +69,7 @@ export default {
this.$emit('getData', {'_index': list, 'value': this.currentCheck})
}
}
this.getSize()
},
methods: {
defaultValueValidator() {
Expand Down Expand Up @@ -110,6 +112,10 @@ export default {
}
this.$emit('getData', {'_index': this.indexList, 'value': this.currentCheck})
},
getSize() {
this.itemHeight = this.$el.querySelector('.wd-actionsheet-listitem').offsetHeight
this.$emit('getItemHeight', this.itemHeight)
},
}
}
</script>
Expand Down
3 changes: 3 additions & 0 deletions packages/CheckboxGroup/src/CheckboxGroup.vue
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,9 @@ export default {
}
},
watch: {
value(val){
this.currentCheck = val
},
currentCheck(val){
this.$emit('input', val)
}
Expand Down
3 changes: 3 additions & 0 deletions packages/RadioGroup/src/RadioGroup.vue
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,9 @@ export default {
}
},
watch: {
value(val){
this.currentValue = val
},
currentValue(val){
this.$emit('input', val)
}
Expand Down
13 changes: 11 additions & 2 deletions packages/Scroller/src/Scroller.vue
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,10 @@ export default {
type: String,
default: '没有更多数据了'
},
noDataLoadLock: {
type: Boolean,
default: true
},
animating: {
type: Boolean,
default: true
Expand Down Expand Up @@ -109,7 +113,8 @@ export default {
infiniteLoadingState: 0,
tipHeight: 0,
contentHeight: 0,
containerHeight: 0
containerHeight: 0,
noDataLoadLocker: false
}
},
components: {
Expand Down Expand Up @@ -251,6 +256,9 @@ export default {
if (this.infiniteLoadingState) {
return
}
if (this.noDataLoadLocker) {
return
}
this.noLoad = false
this.infiniteLoadingState = 1
Expand Down Expand Up @@ -330,7 +338,7 @@ export default {
let contentHeight = this.$refs.slotWrapper.getBoundingClientRect().height
if(this.containerHeight + transformY > contentHeight) {
this.showLoadingState = false
this.scroller.scrollTo(0, contentHeight - this.containerHeight, true)
this.scroller.scrollTo(0, contentHeight - this.containerHeight + this.tipHeight, true)
setTimeout(() => {
this.showLoadingState = true
}, this.animationDuration)
Expand All @@ -346,6 +354,7 @@ export default {
noMoreInfiniteLoading() {
this.finishInfiniteLoading()
this.noLoad = true
this.noDataLoadLocker = true
}
}
}
Expand Down
4 changes: 3 additions & 1 deletion src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}

const version = '0.6.8'
const version = '0.6.9'

export {
install,
Expand All @@ -76,6 +76,8 @@ export {
MessageBox,
Search,
Switch,
Swipe,
SwipeItem,
Picker,
Toast,
Popup,
Expand Down
29 changes: 29 additions & 0 deletions test/unit/ActionSheet.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -510,4 +510,33 @@ describe('ActionSheet', () => {
}, 200)
})

it('actionsheet maxDisplay 最大显示条数', done => {
vm = ActionSheet({
title: '测试标题',
isShowTitle: false,
maxDisplay: 5,
content: {
items: [
{title: '测试正文条目1'},
{title: '测试正文条目2'},
{title: '测试正文条目3'},
{title: '测试正文条目4'},
{title: '测试正文条目5'},
{title: '测试正文条目6'},
{title: '测试正文条目7'},
{title: '测试正文条目8'}
]
}
})
Vue.nextTick(() => {
const $contentHeight = document.querySelector('.wd-actionsheet-content').offsetHeight
const $itemHeight = document.querySelector('.wd-actionsheet-listitem').offsetHeight
expect(vm.maxDisplay).to.equal(5)
expect($itemHeight * 5).to.equal($contentHeight)
vm.value = false
setTimeout(() => {
done()
}, 500)
})
})
})
26 changes: 26 additions & 0 deletions test/unit/CheckGroup.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,32 @@ describe('CheckboxGroup', () => {
done()
})
})
it('CheckboxGroup 选中值改变', done => {
vm = createVueInstance({
template: `
<wd-checkboxgroup :listData="lists" :name="'group1'" ref="checkgroup" v-model="value1"></wd-checkboxgroup>
`,
data() {
return {
lists: ['选项1', '选项2', '选项3', '选项4'],
value1: ['选项2']
}
}
})
Vue.nextTick(() => {
let dafaultValue = vm.$refs.checkgroup._data.currentCheck
expect(dafaultValue).to.equal(vm._data.value1)
setTimeout(()=>{
vm.value1 = ['选项1', '选项2']
setTimeout(()=>{
let changedValue = vm.$refs.checkgroup.currentCheck
expect(changedValue).to.equal(vm.value1)
destroyVM(vm)
done()
}, 300)
}, 500)
})
})
it('CheckboxGroup 被禁用', done => {
vm = createVueInstance({
template: `
Expand Down
27 changes: 27 additions & 0 deletions test/unit/RadioGroup.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,33 @@ describe('RadioGroup', () => {
done()
})
})
it('RadioGroup 选中值改变', done => {
vm = createVueInstance({
template: `
<wd-radiogroup :listData="lists" :name="'group1'" ref="radiogroup" v-model="value1"></wd-radiogroup>
`,
data() {
return {
lists: ['选项1', '选项2', '选项3', '选项4'],
value1: '选项2'
}
}
})
Vue.nextTick(() => {
let dafaultValue = vm.$refs.radiogroup._data.currentValue
expect(dafaultValue).to.equal(vm._data.value1)
setTimeout(()=>{
vm.value1 = '选项1'
setTimeout(()=>{
let changedValue = vm.$refs.radiogroup.currentValue
expect(changedValue).to.equal('选项1')
destroyVM(vm)
done()
}, 300)
}, 500)
})
})

it('RadioGroup 被禁用', done => {
vm = createVueInstance({
template: `
Expand Down

0 comments on commit aca2cfc

Please sign in to comment.