Skip to content

H
hls-easy-ui
Commit 780f4fe9 authored by JingChao's avatar JingChao
Browse files
Options

selectFiled and dateFiled

parent 0a456284
Hide whitespace changes
Inline Side-by-side
Showing with 60 additions and 120 deletions
packages/components/DateFiled/index.vue
View file @ 780f4fe9
......@@ -9,10 +9,13 @@
<section :class="{'required':required}" :style="{'flex':proportion[0] }" class="name">{{ label }}</section>
<section :style="{'flex':proportion[1] }" class="date-content">
<input
v-model="value" :disabled="disabled" type="text" readonly
v-model="value" :disabled="disabled" :placeholder="dataPlaceholder" type="text"
readonly
@click="showDate">
<!--<slot name="icon"/>-->
<img v-if="showIcon" :src="selectIcon" class="icon" >
<i v-if="showClean" class="icon ion-close-circled" @click="cleanValue"/>
<!--<slot name="icon"/>-->
<img v-if="!showClean" :src="selectIcon" class="icon" >
</section>
</section>
</section>
......@@ -26,6 +29,14 @@ export default {
default: null,
type: String | Date,
},
placeholder: {
type: String,
default: null,
},
clearable: {
type: Boolean,
default: false,
},
format: {
default: 'YYYY-MM-DD',
type: String,
......@@ -89,8 +100,24 @@ export default {
selectIcon () {
return this.rightIcon ? this.rightIcon : this.Icon
},
dataPlaceholder () {
return this.placeholder ? this.placeholder : '请输入' + this.label
},
showClean () {
let vm = this
if (vm.clearable && vm.value) {
return true
} else {
return !vm.showIcon
}
},
},
methods: {
cleanValue () {
this.$emit('input', null)
this.$emit('clean', null)
},
showDate () {
let vm = this
if (!vm.disabled) {
......
packages/components/HContent/index.vue
View file @ 780f4fe9
......@@ -4,9 +4,7 @@
*/
<template>
<div
class="content" @touchstart.capture="touchStart"
@touchend.capture="touchEnd">
<div class="content">
<slot/>
</div>
</template>
......@@ -20,117 +18,20 @@ export default {
type: Boolean,
default: true,
},
tapDelay: {
type: Number,
default: 200,
},
tapTimeout: {
type: Number,
default: 700,
},
},
data () {
return {
fontSize: Number(window.document.documentElement.style.fontSize.replace('px', '')),
winHeight: window.innerHeight,
winWidth: window.innerWidth,
height: 0,
firstClickTime: 0,
lastClickTime: 0,
startY: 0, // 触摸位置
endY: 0, // 结束位置
distance: 0, // android应该滚动距离
docmHeight: 0, // 默认屏幕高度
showHeight: 0, // 实时屏幕高度
topHeight: 0, // content距离顶部的高度
contentsHeight: 0, // 内容区域本来高度
isResize: false, // 默认屏幕高度是否已获取
}
},
watch: {
'showHeight': function () {
if (detectOS() !== 'ios') {
if (this.docmHeight >= this.showHeight) {
// 软键盘弹出的事件处理
let activeElement = document.activeElement
let offsetTop = activeElement.offsetTop
let offsetParent = activeElement.offsetParent
let viewTop = offsetParent.clientHeight
this.topHeight = this.$el.offsetTop
if (activeElement === document.body) {
return
}
while (offsetParent !== document.body) {
offsetTop += offsetParent.offsetTop
offsetParent = offsetParent.offsetParent
}
offsetTop = this.docmHeight - offsetTop - viewTop < 0 ? offsetTop - this.topHeight - viewTop : 0
if (offsetTop > 0) {
this.$el.style.transition = 'all .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
this.$el.style.transform = 'translate(0px, -' + this.distance + 'px) scale(1) translateZ(0px)'
}
} else {
// 软键盘收起的事件处理
this.$el.style.height = parseInt(this.contentsHeight) + 'px'
this.$el.style.transform = 'translate(0px, 0px) scale(1) translateZ(0px)'
}
}
},
},
mounted () {
if (this.calContent) {
this.contentHeight()
}
this.contentsHeight = this.$el.style.height.slice(0, this.$el.style.height.length - 2)
document.body.addEventListener('focusout', () => {
// 软键盘收起的事件处理
this.$el.style.height = parseInt(this.contentsHeight) + 'px'
this.$el.style.transform = 'translate(0px, 0px) scale(1) translateZ(0px)'
this.$el.style.paddingBottom = '0px'
})
// 当视图窗口大小发生改变时
window.onresize = () => {
return (() => {
if (!this.isResize) {
// 默认屏幕高度
this.docmHeight = document.documentElement.clientHeight
this.isResize = true
}
// 实时屏幕高度
this.showHeight = document.body.clientHeight
})()
}
},
methods: {
touchStart (event) {
let keyboardHeight = this.getKeyBoardHeight()
this.firstClickTime = event.timeStamp
if ((event.timeStamp - this.lastClickTime) < this.tapDelay) return
if (event.target.readOnly) return
if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA') {
this.startY = event.changedTouches[0].clientY
this.distance = (innerHeight - this.startY) < keyboardHeight ? (keyboardHeight - (innerHeight - this.startY) + 20) : 0
}
},
touchEnd (event) {
if (detectOS() === 'ios') {
if ((event.timeStamp - this.lastClickTime) < this.tapDelay) return
this.lastClickTime = event.timeStamp
if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA') {
this.endY = event.changedTouches[0].clientY
if ((this.endY - this.startY > 100) || this.endY - this.startY < -100) return
let keyboardHeight = this.getKeyBoardHeight()
let scrollTop = (this.winHeight - this.endY) < keyboardHeight ? (keyboardHeight - (this.winHeight - this.endY)) : 0
if (scrollTop) {
this.$el.style.transition = 'all .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
this.$el.style.transform = 'translate(0px, -' + scrollTop + 'px) scale(1) translateZ(0px)'
this.$el.style.paddingBottom = (scrollTop + 20) + 'px'
this.$el.style.height = parseInt(this.height) + scrollTop + 'px'
}
event.target.focus()
}
}
},
getHeaderHeight () {
let vm = this
let $el = vm.$el.previousElementSibling
......@@ -138,7 +39,8 @@ export default {
do {
if ($el) {
let elHeight = window.getComputedStyle($el).height
if (elHeight) {
let part = /^\d+(\.\d+)?px$/
if (elHeight && part.test(elHeight)) {
headerHeight += Number(elHeight.replace('px', ''))
}
if ($el._prevClass && $el._prevClass.indexOf('h-header') === 0) {
......@@ -189,22 +91,8 @@ export default {
const headerHeight = vm.getHeaderHeight()
const nextHeight = vm.getNextElementHeight()
let content = vm.$el
vm.height = (window.innerHeight - nextHeight - headerHeight)
content.style.height = (window.innerHeight - nextHeight - headerHeight) + 'px'
},
// 键盘的高度
getKeyBoardHeight () {
var innerWidth = window.innerWidth
if (detectOS() === 'ios') {
if (innerWidth >= 375 && innerHeight >= 812) {
return 460
}
return 400
} else {
return 330
}
},
},
}
</script>
......
packages/components/Select/SelectFiled.vue
View file @ 780f4fe9
......@@ -9,11 +9,13 @@
<section :class="{'required':required}" :style="{'flex':proportion[0] }" class="name">{{ label }}</section>
<section :style="{'flex':proportion[1] }" class="select-content">
<input
v-model="codeName" :disabled="disabled" type="text" readonly
v-model="codeName" :disabled="disabled" :placeholder="selectPlaceholder" type="text"
readonly
@click="showSelect">
<input v-model="value" type="text" hidden>
<i v-if="showClean" class="icon ion-close-circled" @click="cleanValue"/>
<!--<slot name="icon"/>-->
<img v-if="showIcon" :src="selectIcon" class="icon" >
<img v-if="!showClean" :src="selectIcon" class="icon" >
</section>
</section>
</section>
......@@ -28,6 +30,14 @@ export default {
default: null,
type: Number | String,
},
placeholder: {
type: String,
default: null,
},
clearable: {
type: Boolean,
default: false,
},
dataArray: {
type: Array,
default: () => [],
......@@ -118,6 +128,14 @@ export default {
}
return name
},
showClean () {
let vm = this
if (vm.clearable && vm.value) {
return true
} else {
return !vm.showIcon
}
},
minHeight () {
if (this.$parent.itemHeight) {
return this.$parent.itemHeight + 'px'
......@@ -128,6 +146,9 @@ export default {
selectIcon () {
return this.rightIcon ? this.rightIcon : this.Icon
},
selectPlaceholder () {
return this.placeholder ? this.placeholder : '请选择' + this.label
},
},
methods: {
selectCall (v1, v2, v3) {
......@@ -140,11 +161,15 @@ export default {
this.$emit('onSelect', v1, v2)
}
},
cleanValue () {
this.$emit('input', null)
this.$emit('clean', null)
},
showSelect () {
let vm = this
if (!vm.disabled) {
let list = []
vum.forEach(vm.dataArray, (date, index, array) => {
vm.dataArray.forEach((date, index, array) => {
list.push({
value: date[vm.valueKey],
name: date[vm.valueName],
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment