Commit ae2f265a authored by nature's avatar nature

组建优化

parent 2cdfa7f8
...@@ -2,11 +2,12 @@ export default (Vue) => { ...@@ -2,11 +2,12 @@ export default (Vue) => {
Vue.filter('currency', function (val) { Vue.filter('currency', function (val) {
if (!val) return '0.00' if (!val) return '0.00'
var intPart = parseInt(Number(val)) // 获取整数部分 // var intPart = parseInt(Number(val)) // 获取整数部分
var value2Array = (val + '').split('.')
var intPart = value2Array.length === 2 ? value2Array[0] : val
var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断 var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
var floatPart = '.00' // 预定义小数部分 var floatPart = '.00' // 预定义小数部分
var value2Array = (val + '').split('.')
// =2表示数据有小数位 // =2表示数据有小数位
if (value2Array.length === 2) { if (value2Array.length === 2) {
......
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
background-color: #fff; background-color: #fff;
position: relative; position: relative;
line-height: 24px; line-height: 24px;
min-height: 45px;
&:after { &:after {
.setBottomLine(); .setBottomLine();
......
...@@ -71,9 +71,9 @@ export default { ...@@ -71,9 +71,9 @@ export default {
if (currencyInput && value !== currencyInput.value) { if (currencyInput && value !== currencyInput.value) {
currencyInput.value = value currencyInput.value = value
} }
let uncurrency = this.$options.filter['uncurrency'] // let uncurrency = this.$options.filter['uncurrency']
this.currencyValue = uncurrency(value) // this.currencyValue = uncurrency(value)
this.$emit('input', this.currencyValue) this.$emit('input', value)
}, },
onFocus (event) { onFocus (event) {
if (this.readonly || this.disabled) { if (this.readonly || this.disabled) {
......
...@@ -86,7 +86,7 @@ export default { ...@@ -86,7 +86,7 @@ export default {
}, },
itemHeight: { itemHeight: {
type: Number, type: Number,
default: 45, default: null,
}, },
showIcon: { showIcon: {
type: Boolean, type: Boolean,
......
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
<div :style="{'flex':proportion[1] }" class="field-value"> <div :style="{'flex':proportion[1] }" class="field-value">
<div :class="{'field-control-error':hasError}" class="field-body"> <div :class="{'field-control-error':hasError}" class="field-body">
<input <input
v-if="type!=='number' && type!=='textarea'" v-if="type!=='number' && type!=='textarea' && type!=='txt'"
ref="fieldInput" ref="fieldInput"
v-bind="$attrs" v-bind="$attrs"
:readonly="readonly" :disabled="disabled" :placeholder="placehold" :value="value" :readonly="readonly" :disabled="disabled" :placeholder="placehold" :value="value"
...@@ -39,14 +39,14 @@ ...@@ -39,14 +39,14 @@
@input="onInput($event.target.value)" @input="onInput($event.target.value)"
@focus="onFocus" @focus="onFocus"
@blur="onBlur"/> @blur="onBlur"/>
<div v-if="type==='txt'" class="field-control">{{ value }}</div>
<i v-if="showCancel" class="field-icon field-right-icon icon ion-close-circled" @touchstart="cleanValue"/> <i v-if="showCancel" class="field-icon field-right-icon icon ion-close-circled" @touchstart="cleanValue"/>
<div v-if="showRightIcon" class="field-icon field-right-icon" @click="onClickRightIcon"> <div v-if="showRightIcon" class="field-icon field-right-icon" @click="onClickRightIcon">
<img v-if="!hasRightIcon" :src="rightIcon"> <img v-if="!hasRightIcon" :src="rightIcon">
<slot name="right-icon"/> <slot name="right-icon"/>
</div> </div>
</div> </div>
<div v-if="wordLimit && maxlength" class="field-word-limit"><span class="field-word-num">{{ count }}</span>/{{ <div v-if="wordLimit && maxlength" class="field-word-limit"><span class="field-word-num">{{ count }}</span>/{{ maxlength }}
maxlength }}
</div> </div>
</div> </div>
</div> </div>
...@@ -90,7 +90,7 @@ export default { ...@@ -90,7 +90,7 @@ export default {
}, },
itemHeight: { itemHeight: {
type: Number, type: Number,
default: 45, default: null,
}, },
label: { label: {
type: String, type: String,
......
...@@ -10,7 +10,6 @@ ...@@ -10,7 +10,6 @@
</template> </template>
<script> <script>
import { detectOS } from '../../common/utils/index'
export default { export default {
name: 'HContent', name: 'HContent',
props: { props: {
...@@ -21,14 +20,17 @@ export default { ...@@ -21,14 +20,17 @@ export default {
}, },
data () { data () {
return { return {
// fontSize: Number(window.document.documentElement.style.fontSize.replace('px', '')), orientation: 'portrait',
winHeight: window.innerHeight,
winWidth: window.innerWidth,
} }
}, },
mounted () { mounted () {
if (this.calContent) { if (this.calContent) {
this.contentHeight() this.resizeHeight()
}
},
update () {
if (this.calContent) {
this.resizeHeight()
} }
}, },
methods: { methods: {
...@@ -43,14 +45,13 @@ export default { ...@@ -43,14 +45,13 @@ export default {
if (elHeight && part.test(elHeight)) { if (elHeight && part.test(elHeight)) {
headerHeight += Number(elHeight.replace('px', '')) headerHeight += Number(elHeight.replace('px', ''))
} }
if ($el._prevClass && $el._prevClass.indexOf('h-header') === 0) { let paddingTopHeight = window.getComputedStyle($el).paddingTop
if (detectOS() === 'ios' && vm.winWidth === 375 && vm.winHeight === 812) { let paddingBottomHeight = window.getComputedStyle($el).paddingBottom
headerHeight += 40 if (paddingTopHeight && part.test(paddingTopHeight)) {
} else if (detectOS() === 'ios' && vm.winWidth === 414 && vm.winHeight === 896) { headerHeight += Number(paddingTopHeight.replace('px', ''))
headerHeight += 40
} else if (detectOS() === 'ios') {
headerHeight += 20
} }
if (paddingBottomHeight && part.test(paddingBottomHeight)) {
headerHeight += Number(paddingBottomHeight.replace('px', ''))
} }
$el = $el.previousElementSibling $el = $el.previousElementSibling
} }
...@@ -60,25 +61,24 @@ export default { ...@@ -60,25 +61,24 @@ export default {
}, },
getNextElementHeight () { getNextElementHeight () {
let vm = this let vm = this
let nextElement = this.$el.nextElementSibling let nextElement = vm.$el.nextElementSibling
let nextHeight = 0 let nextHeight = 0
do { do {
if (nextElement) { if (nextElement) {
let position = window.getComputedStyle(nextElement).position
if (position === 'fixed') {
let elHeight = window.getComputedStyle(nextElement).height let elHeight = window.getComputedStyle(nextElement).height
let part = /^\d+(\.\d+)?px$/ let part = /^\d+(\.\d+)?px$/
if (elHeight && part.test(elHeight)) { if (elHeight && part.test(elHeight)) {
nextHeight += Number(elHeight.replace('px', '')) nextHeight += Number(elHeight.replace('px', ''))
} }
if (nextElement._prevClass && nextElement._prevClass.indexOf('h-bottom-tab') === 0) { let paddingTopHeight = window.getComputedStyle(nextElement).paddingTop
let height = nextElement.clientHeight let paddingBottomHeight = window.getComputedStyle(nextElement).paddingBottom
if (detectOS() === 'ios' && height > Math.ceil(vm.fontSize * 0.88)) { if (paddingTopHeight && part.test(paddingTopHeight)) {
nextHeight += 0 nextHeight += Number(paddingTopHeight.replace('px', ''))
} else {
if (detectOS() === 'ios' && vm.winWidth === 375 && vm.winHeight === 812) {
nextHeight += 34
} else if (detectOS() === 'ios' && vm.winWidth === 414 && vm.winHeight === 896) {
nextHeight += 34
} }
if (paddingBottomHeight && part.test(paddingBottomHeight)) {
nextHeight += Number(paddingBottomHeight.replace('px', ''))
} }
} }
nextElement = nextElement.nextElementSibling nextElement = nextElement.nextElementSibling
...@@ -86,12 +86,22 @@ export default { ...@@ -86,12 +86,22 @@ export default {
} while (nextElement) } while (nextElement)
return nextHeight return nextHeight
}, },
contentHeight () { resizeHeight () {
let vm = this let vm = this
this.$nextTick(() => {
const headerHeight = vm.getHeaderHeight() const headerHeight = vm.getHeaderHeight()
const nextHeight = vm.getNextElementHeight() const nextHeight = vm.getNextElementHeight()
let windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
let windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
if (windowWidth > windowHeight) {
this.orientation = 'landscape'
} else {
this.orientation = 'portrait'
}
let content = vm.$el let content = vm.$el
content.style.height = (window.innerHeight - nextHeight - headerHeight) + 'px' content.style.height = windowHeight - headerHeight + nextHeight + 'px'
})
}, },
}, },
} }
......
...@@ -247,14 +247,13 @@ export default { ...@@ -247,14 +247,13 @@ export default {
if (elHeight && part.test(elHeight)) { if (elHeight && part.test(elHeight)) {
headerHeight += Number(elHeight.replace('px', '')) headerHeight += Number(elHeight.replace('px', ''))
} }
if ($el._prevClass && $el._prevClass.indexOf('h-header') === 0) { let paddingTopHeight = window.getComputedStyle($el).paddingTop
if (detectOS() === 'ios' && vm.winWidth === 375 && vm.winHeight === 812) { let paddingBottomHeight = window.getComputedStyle($el).paddingBottom
headerHeight += 40 if (paddingTopHeight && part.test(paddingTopHeight)) {
} else if (detectOS() === 'ios' && vm.winWidth === 414 && vm.winHeight === 896) { headerHeight += Number(paddingTopHeight.replace('px', ''))
headerHeight += 40
} else if (detectOS() === 'ios') {
headerHeight += 20
} }
if (paddingBottomHeight && part.test(paddingBottomHeight)) {
headerHeight += Number(paddingBottomHeight.replace('px', ''))
} }
$el = $el.previousElementSibling $el = $el.previousElementSibling
} }
...@@ -264,25 +263,24 @@ export default { ...@@ -264,25 +263,24 @@ export default {
}, },
getNextElementHeight () { getNextElementHeight () {
let vm = this let vm = this
let nextElement = this.$el.nextElementSibling let nextElement = vm.$el.nextElementSibling
let nextHeight = 0 let nextHeight = 0
do { do {
if (nextElement) { if (nextElement) {
let position = window.getComputedStyle(nextElement).position
if (position === 'fixed') {
let elHeight = window.getComputedStyle(nextElement).height let elHeight = window.getComputedStyle(nextElement).height
let part = /^\d+(\.\d+)?px$/ let part = /^\d+(\.\d+)?px$/
if (elHeight && part.test(elHeight)) { if (elHeight && part.test(elHeight)) {
nextHeight += Number(elHeight.replace('px', '')) nextHeight += Number(elHeight.replace('px', ''))
} }
if (nextElement._prevClass && nextElement._prevClass.indexOf('h-bottom-tab') === 0) { let paddingTopHeight = window.getComputedStyle(nextElement).paddingTop
let height = nextElement.clientHeight let paddingBottomHeight = window.getComputedStyle(nextElement).paddingBottom
if (detectOS() === 'ios' && height > Math.ceil(vm.fontSize * 0.88)) { if (paddingTopHeight && part.test(paddingTopHeight)) {
nextHeight += 0 nextHeight += Number(paddingTopHeight.replace('px', ''))
} else {
if (detectOS() === 'ios' && vm.winWidth === 375 && vm.winHeight === 812) {
nextHeight += 34
} else if (detectOS() === 'ios' && vm.winWidth === 414 && vm.winHeight === 896) {
nextHeight += 34
} }
if (paddingBottomHeight && part.test(paddingBottomHeight)) {
nextHeight += Number(paddingBottomHeight.replace('px', ''))
} }
} }
nextElement = nextElement.nextElementSibling nextElement = nextElement.nextElementSibling
...@@ -475,7 +473,7 @@ export default { ...@@ -475,7 +473,7 @@ export default {
width 100% width 100%
overflow hidden !important overflow hidden !important
box-sizing border-box box-sizing border-box
position absolute !important position absolute
top 0 top 0
height 100% height 100%
......
...@@ -93,7 +93,7 @@ export default { ...@@ -93,7 +93,7 @@ export default {
}, },
itemHeight: { itemHeight: {
type: Number, type: Number,
default: 45, default: null,
}, },
inputAlign: { inputAlign: {
type: String, type: String,
......
...@@ -92,6 +92,7 @@ ...@@ -92,6 +92,7 @@
<i slot="left-icon" class="field-icon field-left-icon icon ion-android-favorite"/> <i slot="left-icon" class="field-icon field-left-icon icon ion-android-favorite"/>
<i slot="right-icon" class="field-icon field-right-icon icon ion-android-arrow-forward"/> <i slot="right-icon" class="field-icon field-right-icon icon ion-android-arrow-forward"/>
</h-field> </h-field>
<h-field v-model="homeAddress" type="txt" label="家庭地址"/>
</h-content> </h-content>
</h-view> </h-view>
</template> </template>
......
...@@ -259,7 +259,7 @@ ...@@ -259,7 +259,7 @@
@input="onInput" @input="onInput"
@delete="onDelete"/>--> @delete="onDelete"/>-->
<h-modal ref="modal" v-model="showModalValue" position="bottom" class="sign-modal"> <h-modal ref="modal" v-model="showModalValue" position="top" class="sign-modal">
<h-view> <h-view>
<h-header style="height: 43px !important;padding-top:0px"> <h-header style="height: 43px !important;padding-top:0px">
<template #left> <template #left>
......
This diff is collapsed.
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