Commit 86d74ef0 authored by JingChao's avatar JingChao

添加金额输入组件

parent c953c652
......@@ -533,6 +533,8 @@ showActionSheetButton() {
### Note
hls-easy-ui#0.0.5
[添加金额输入框 currency-input](/packages/components/CurrencyInput/README.md)
[添加动态配置组件 h-layout](/packages/components/HLayout/README.md)
......
......@@ -21,6 +21,10 @@ export default (Vue) => {
return intPartFormat + floatPart
}
})
Vue.filter('uncurrency', function (val) {
if (!val) return null
return Number((val).replace(/,/gi, ''))
})
Vue.filter('datetime', timestamp => {
function format (number) {
return number.toString().padStart(2, '0')
......
curreny-input 金额输入框
```html
<list-item>
<item>
<div slot="name">融资额</div>
<curreny-input slot="content" v-model="money"/>
<div slot="right-icon">¥</div>
</item>
</list-item>
export default {
data() {
return {
money: null,
}
}
}
```
v-model 绑定value值 number值
disable 是否只读 true/false
/**
* @Author think
* @Date 2019-09-09 14:29
*/
<template>
<input
:value="formatValue" :readonly="disable" type="text"
@input="onInput($event.target.value)" @focus="onFocus" @blur="onBlur">
</template>
<script>
export default {
name: 'CurrencyInput',
props: {
value: {
type: Number,
default: 0,
},
disable: {
type: Boolean,
default: false,
},
},
data () {
return {
focused: false,
}
},
filter: {
uncurrency (val) {
if (!val) return null
return (Number((val).replace(/,/gi, ''))) === 0 ? null : Number((val).replace(/,/gi, ''))
},
},
computed: {
formatValue () {
let currency = this.$options.filters['currency']
if (!this.focused) {
return currency(this.value)
} else {
return this.value
}
},
},
methods: {
onInput: function (value) {
let uncurrency = this.$options.filter['uncurrency']
this.currencyValue = uncurrency(value)
this.$emit('input', this.currencyValue)
},
onFocus (event) {
this.focused = true
setTimeout(function () {
event.target.type = 'number'
event.target.focus()
}, 0)
},
onBlur (event) {
event.target.type = 'text'
this.focused = false
},
},
}
</script>
<style scoped lang="less">
</style>
......@@ -27,6 +27,7 @@ import BottomTab from './BottomTab/index'
import TabButton from './BottomTab/tab-button'
import Modal from './Modal/Modal'
import HLayout from './HLayout/index'
import CurrencyInput from './CurrencyInput/index'
import errLoadingPic from '../common/picture/errloading.jpg'
......@@ -61,4 +62,5 @@ export default (Vue) => {
Vue.component('h-radio', Radio)
Vue.component('h-file', HFile)
Vue.component('h-layout', HLayout)
Vue.component('currency-input', CurrencyInput)
}
......@@ -24,6 +24,7 @@ import TabItem from './components/STab/tab-item'
import TabButton from './components/BottomTab/tab-button'
import HFile from './components/HFile/index'
import HLayout from './components/HLayout/index'
import CurrencyInput from './components/CurrencyInput/index'
import componentInstall from './components/component'
// compontenPlugins
......@@ -36,7 +37,7 @@ import NumberKeyboardPlugin from './components/NumberKeyboard/index'
// styles
import appStyle from '../packages/common/styles/app.core.less'
const version = '0.0.2'
const version = '0.0.4'
export {
appStyle,
......@@ -65,6 +66,7 @@ export {
TabButton,
HFile,
HLayout,
CurrencyInput,
ActionSheetPlugin,
ShowPicturePlugin,
SelectPlugin,
......
......@@ -25,6 +25,13 @@
文件上传 <i class="icon ion-ios-cloud-upload"/>
</div>
</h-file>
<list-item>
<item>
<div slot="name">融资额</div>
<currency-input slot="content" v-model="money"/>
<div slot="right-icon">¥</div>
</item>
</list-item>
</h-content>
</h-view>
</template>
......@@ -53,6 +60,7 @@ export default {
},
uploadSuccess: this.fileSuccess, // 上传成功后的回调函数 用于给文件添加服务端唯一标示或其他
},
money: null,
}
},
methods: {
......
......@@ -21,6 +21,10 @@ export default (Vue) => {
return intPartFormat + floatPart
}
})
Vue.filter('uncurrency', function (val) {
if (!val) return null
return Number((val).replace(/,/gi, ''))
})
Vue.filter('datetime', timestamp => {
function format (number) {
return number.toString().padStart(2, '0')
......
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