添加金额输入组件

README.md

@@ -534,6 +534,8 @@ showActionSheetButton() {
 ### Note 
  hls-easy-ui#0.0.5
  
+   [添加金额输入框 currency-input](/packages/components/CurrencyInput/README.md)
+    
    [添加动态配置组件 h-layout](/packages/components/HLayout/README.md)
    
  hls-easy-ui#0.0.4

packages/common/scripts/filter.js

@@ -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')

packages/components/CurrencyInput/README.md

+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
+
+

packages/components/CurrencyInput/index.vue

+/**
+* @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>

packages/components/component.js

@@ -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)
 }

packages/index.js

@@ -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,

src/pages/fileTest.vue

@@ -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: {

src/scripts/filter.js

@@ -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')