Skip to content

H
hls-easy-ui
Commit be768efe authored by 24776's avatar 24776
Browse files
Options

s

parent 180619c9
Hide whitespace changes
Inline Side-by-side
Showing with 114 additions and 65 deletions
config/index.js
View file @ be768efe
...@@ -23,7 +23,7 @@ module.exports = { ...@@ -23,7 +23,7 @@ module.exports = {
proxyTable: {}, proxyTable: {},
// Various Dev Server settings // Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST host: '192.168.137.1', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false, autoOpenBrowser: false,
errorOverlay: true, errorOverlay: true,
......
packages/components/HContent/index.vue
View file @ be768efe
...@@ -31,75 +31,83 @@ export default { ...@@ -31,75 +31,83 @@ export default {
topHeight: '0', // content距离顶部的高度 topHeight: '0', // content距离顶部的高度
contentsHeight: '0', // 内容区域本来高度 contentsHeight: '0', // 内容区域本来高度
isResize: false, // 默认屏幕高度是否已获取 isResize: false, // 默认屏幕高度是否已获取
distance: 0,
final: 0,
fontSize: Number(window.document.documentElement.style.fontSize.replace('px', '')), fontSize: Number(window.document.documentElement.style.fontSize.replace('px', '')),
winHeight: window.innerHeight, winHeight: window.innerHeight,
winWidth: window.innerWidth, winWidth: window.innerWidth,
} }
}, },
watch: { 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, -' + offsetTop + 'px) scale(1) translateZ(0px)'
this.$el.style.height = parseInt(this.contentsHeight) + offsetTop + 'px'
}
} else {
// 软键盘收起的事件处理
this.$el.style.height = parseInt(this.contentsHeight) + 'px'
this.$el.style.transform = 'translate(0px, 0px) scale(1) translateZ(0px)'
}
}
},
}, },
mounted () { mounted () {
if (this.calContent) { if (this.calContent) {
this.contentHeight() this.contentHeight()
} }
this.contentsHeight = this.$el.style.height.slice(0, this.$el.style.height.length - 2) this.contentsHeight = this.$el.style.height.slice(0, this.$el.style.height.length - 2)
this.topHeight = this.$el.offsetTop + 40 // if (detectOS() === 'ios') {
if (detectOS() === 'ios') { // document.body.addEventListener('focusin', () => {
document.body.addEventListener('focusin', () => { document.body.addEventListener('touchstart', (e) => {
// 软键盘弹出的事件处理 let keyboardHeight = this.getKeyBoardHeight()
let keyboardHeight = this.getKeyBoardHeight() if (e.target.localName === 'input' || e.target.localName === 'textarea') {
let activeElement = document.activeElement let pointY = e.touches[0].pageY
let offsetTop = activeElement.offsetTop console.log(pointY)
let offsetParent = activeElement.offsetParent this.distance = (innerHeight - pointY) < keyboardHeight ? (keyboardHeight - (innerHeight - pointY)) : 0
if (activeElement === document.body) { // if (this.distance) {
return // 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)'
while (offsetParent !== document.body) { // // this.$el.style.paddingBottom = (distance + 20) + 'px'
offsetTop += offsetParent.offsetTop // this.$el.style.height = parseInt(this.contentsHeight) + this.distance + 'px'
offsetParent = offsetParent.offsetParent }
} // }
offsetTop = (innerHeight - offsetTop) < keyboardHeight ? (keyboardHeight - (innerHeight - offsetTop)) : 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, -' + offsetTop + 'px) scale(1) translateZ(0px)' document.body.addEventListener('focusin', () => {
this.$el.style.height = parseInt(this.contentsHeight) + offsetTop + 'px' // this.final = this.final + this.distance
} console.log('final:' + this.final)
}) this.$el.style.transition = 'all .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
document.body.addEventListener('focusout', () => { this.$el.style.transform = 'translate(0px, -' + this.distance + 'px) scale(1) translateZ(0px)'
// this.$el.style.height = parseInt(this.contentsHeight) + this.distance + 'px'
// this.$el.scrollTop = this.final
})
document.body.addEventListener('focusout', () => {
// 软键盘收起的事件处理 // 软键盘收起的事件处理
this.$el.style.height = parseInt(this.contentsHeight) + 'px' this.$el.style.height = parseInt(this.contentsHeight) + 'px'
this.$el.style.transform = 'translate(0px, 0px) scale(1) translateZ(0px)' this.$el.style.transform = 'translate(0px, 0px) scale(1) translateZ(0px)'
}) })
} // document.body.addEventListener('focusin', () => {
// // 软键盘弹出的事件处理
// let keyboardHeight = this.getKeyBoardHeight()
// let activeElement = document.activeElement
// let offsetTop = activeElement.offsetTop
// let i = 0
// console.log(offsetTop, 11)
// let offsetParent = activeElement.offsetParent
// if (activeElement === document.body) {
// return
// }
// while (offsetParent !== document.body) {
// i++
// offsetTop += offsetParent.offsetTop
// console.log(offsetParent, i)
// console.log(offsetParent.offsetTop, 'offsetParent', i)
// offsetParent = offsetParent.offsetParent
// console.log(offsetTop, i, 'top')
// }
// // console.log(this.$el)
// // console.log(this.$el.offsetTop, 'top')
// // console.log(this.$el.style.height)
// // console.log(innerHeight - offsetTop)
// offsetTop = (innerHeight - offsetTop) < keyboardHeight ? (keyboardHeight - (innerHeight - offsetTop)) : 0
// console.log(offsetTop)
// 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, -' + offsetTop + 'px) scale(1) translateZ(0px)'
// this.$el.style.height = parseInt(this.contentsHeight) + offsetTop + 'px'
// }
// })
// }
// 当视图窗口大小发生改变时 // 当视图窗口大小发生改变时
window.onresize = () => { window.onresize = () => {
...@@ -179,7 +187,7 @@ export default { ...@@ -179,7 +187,7 @@ export default {
} }
return 400 return 400
} else { } else {
return 275 return 325
} }
}, },
}, },
......
src/pages/fileTest.vue
View file @ be768efe
...@@ -71,7 +71,7 @@ export default { ...@@ -71,7 +71,7 @@ export default {
* @param index * @param index
*/ */
deletePic (file, index) { deletePic (file, index) {
debugger // debugger
}, },
/** /**
* 可选 * 可选
......
src/pages/hlsPopup.vue
View file @ be768efe
...@@ -239,13 +239,13 @@ ...@@ -239,13 +239,13 @@
<h2 class="item-title">Modal</h2> <h2 class="item-title">Modal</h2>
<h-button class="button-class" type="primary" @click.native="showModal">Modal</h-button> <h-button class="button-class" type="primary" @click.native="showModal">Modal</h-button>
</h-content> </h-content>
<!--
<bottom-tab :show-divider="true"> <bottom-tab :show-divider="true">
<tab-button cusClass="button-exit" @click.native="showConfirm"><img <tab-button cusClass="button-exit" @click.native="showConfirm"><img
src="../assets/image/warning@2x.png">退出 src="../assets/image/warning@2x.png">退出
</tab-button> </tab-button>
<tab-button :disable="true" @click.native="showSuccess">登陆</tab-button> <tab-button :disable="true" @click.native="showSuccess">登陆</tab-button>
</bottom-tab> </bottom-tab> -->
<!-- <number-keyboard <!-- <number-keyboard
:show="true" :show="true"
title="数字键盘" title="数字键盘"
......
src/pages/home.vue
View file @ be768efe
...@@ -10,11 +10,52 @@ ...@@ -10,11 +10,52 @@
<tab-item>Vue</tab-item> <tab-item>Vue</tab-item>
<tab-item>APP</tab-item> <tab-item>APP</tab-item>
</s-tab> </s-tab>
<s-tab> <div style="backgroundColor:red;height:50px"/>
<tab-item>Vue</tab-item>
<tab-item>APP</tab-item>
</s-tab>
<h-content > <h-content >
<list-item>
<item>
<section slot="name">姓名</section>
<input slot="content" type="text">
</item>
<item>
<section slot="name">年龄</section>
<input slot="content" type="text">
</item>
<item>
<section slot="name">性别</section>
<input slot="content" type="text">
</item>
<item>
<section slot="name">出生日前</section>
<input slot="content" type="text">
</item>
<item>
<section slot="name">体重</section>
<section slot="content">111111</section>
</item>
<item>
<section slot="name">身高</section>
<section slot="content">111111</section>
</item>
<item>
<section slot="name">血型</section>
<section slot="content">111111</section>
</item>
<item>
<section slot="name">胸围</section>
<input slot="content" type="text">
</item>
<item>
<section slot="name">腰围</section>
<input slot="content" type="text">
</item>
<item>
<section slot="name">tun</section>
<input slot="content" type="text">
</item>
</list-item>
<list-item> <list-item>
<item> <item>
<section slot="name">姓名</section> <section slot="name">姓名</section>
......
www.zip
View file @ be768efe
No preview for this file type
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