129 lines
3.3 KiB
Vue
129 lines
3.3 KiB
Vue
<template>
|
|
<div :class="[prefixCls]">
|
|
<div>
|
|
{{ props.title }}
|
|
</div>
|
|
<a-input-password
|
|
v-if="isPassword"
|
|
v-model:value="localValue"
|
|
:addon-after="props.addonAfter"
|
|
:addon-before="props.addonBefore"
|
|
:disabled="props.disabled"
|
|
:placeHolder="props.placeHolder"
|
|
:size="props.size"
|
|
:step="props.step"
|
|
:type="props.type"
|
|
class=""
|
|
@change="handlerChange"
|
|
/>
|
|
<a-input
|
|
v-else
|
|
v-model:value="localValue"
|
|
:addon-after="props.addonAfter"
|
|
:addon-before="props.addonBefore"
|
|
:disabled="props.disabled"
|
|
:placeHolder="props.placeHolder"
|
|
:size="props.size"
|
|
:step="props.step"
|
|
:type="props.type === 'price' ? 'tel' : props.type"
|
|
class=""
|
|
@change="handlerChange"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { usePrefix } from '@core/composable/usePrefix'
|
|
import { computed } from 'vue'
|
|
import { usePrice } from '@core/utils/usePrice'
|
|
|
|
//Props
|
|
interface Prop {
|
|
title?: String
|
|
value?: String | Number
|
|
size?: String
|
|
type?: String
|
|
isPassword?: boolean
|
|
disabled?: boolean
|
|
addonAfter?: String
|
|
addonBefore?: String
|
|
addonBgColor?: String
|
|
addonTextColor?: String
|
|
placeHolder?: String
|
|
step?: String | Number
|
|
}
|
|
|
|
const addonBgColor = computed(() => props.addonBgColor)
|
|
const addonTextColor = computed(() => props.addonTextColor)
|
|
//emits
|
|
const localValue = computed({
|
|
set(value) {
|
|
// console.log(value?.toString().replaceAll(',', ''))
|
|
props.type === 'price'
|
|
? emits('update:value', value?.toString().replaceAll(',', ''))
|
|
: emits('update:value', value)
|
|
},
|
|
get() {
|
|
let a =
|
|
props.type === 'price'
|
|
? props.value != null && props.value !== ''
|
|
? usePrice(props.value as number, true, '').trim()
|
|
: ''
|
|
: props.value
|
|
// console.log(props.value)
|
|
return a
|
|
}
|
|
})
|
|
|
|
const props = withDefaults(defineProps<Prop>(), {
|
|
isPassword: false
|
|
})
|
|
const emits = defineEmits(['update:value', 'onchange'])
|
|
|
|
const handlerChange = (e: any) => {
|
|
// emits('onchange', e.target.value)
|
|
props.type === 'price'
|
|
? emits('update:value', e.target.value?.toString().replaceAll(',', ''))
|
|
: emits('update:value', e.target.value)
|
|
props.type === 'price'
|
|
? emits('onchange', e.target.value?.toString().replaceAll(',', ''))
|
|
: emits('onchange', e.target.value)
|
|
// console.log(e.target.value)
|
|
}
|
|
|
|
//css style
|
|
const { prefixCls } = usePrefix('input')
|
|
</script>
|
|
|
|
<style lang="less">
|
|
@prefix: ~'@{prefixCls}-input';
|
|
|
|
.@{prefix} {
|
|
/* .ant-input-group-addon:first-child {
|
|
!* border: #d9d9d9 1px solid;
|
|
border-radius: 0 6px 6px 0;*!
|
|
}*/
|
|
.ant-input-group {
|
|
direction: ltr;
|
|
}
|
|
.ant-input-group > .ant-input:first-child,
|
|
.ant-input-group-addon:first-child {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
border-bottom-left-radius: @border-radius-base;
|
|
border-top-left-radius: @border-radius-base;
|
|
}
|
|
/*.ant-input-group > .ant-input-rtl:first-child,
|
|
.ant-input-group-rtl .ant-input-group-addon:first-child {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
border-bottom-left-radius: @border-radius-base;
|
|
border-top-left-radius: @border-radius-base;
|
|
}*/
|
|
.ant-input-group > .ant-input:last-child,
|
|
.ant-input-group-addon:last-child {
|
|
border-radius: 0 @border-radius-base @border-radius-base 0;
|
|
}
|
|
}
|
|
</style>
|