lc-numberfield

货币或数量输入框,集成了显示货币单位,自动格式化功能

效果

使用方法

<template>
<div class="wxc-demo">
<title title="lc-numberfield"></title>

<div class="container">
<category title="普通输入"></category>
<div class="form">
<lc-numberfield type="number" placeholder="最小金额10元" maxlength=10 ></lc-numberfield>
</div>

<category title="显示货币"></category>
<div class="form">
<lc-numberfield type="number" :showIcon="true" placeholder="最小金额10元" maxlength=10 v-model="money"></lc-numberfield>
</div>
</div>

</div>
</template>

<style scoped>
.wxc-demo {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #FFFFFF;
}
.container{
flex-direction: column;
align-items: center;
}
.form{
width: 600px;
}
</style>

<script>
import LcNumberfield from 'lighting-ui/packages/lc-numberfield';
import Category from 'lighting-ui/packages/_mods/category.vue';
import Title from 'lighting-ui/packages/_mods/title.vue';

export default {
components: { Title, Category, LcNumberfield },
data: () => ({
money: 200
}),
created () {
},
methods: {

},
watch:{
money(newVal, oldVal){
console.log(newVal, oldVal);
}
}
};
</script>

API

Prop Type Required Default Description
showIcon String N text 是否显示货币图标
placeholder String N 提示文本
maxlength Number N 输入最大长度

事件回调

@onInput="onInput"