117 lines
3.1 KiB
Vue
117 lines
3.1 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"
|
||
|
|
: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"
|
||
|
|
:type="props.type === 'price'? 'tel':props.type"
|
||
|
|
:inputmode="props.inputmode"
|
||
|
|
:pattern="props.pattern"
|
||
|
|
class=""
|
||
|
|
@change="handlerChange"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import {usePrefix} from "@/utils/usePrefix";
|
||
|
|
import {computed} from "vue";
|
||
|
|
import {usePrice} from "@/components/BasicPacks/BasicPriceInput/src/utils/usePrice";
|
||
|
|
|
||
|
|
//Props
|
||
|
|
interface Prop {
|
||
|
|
title?: String
|
||
|
|
value?: String | Number
|
||
|
|
size?: String
|
||
|
|
type?: String
|
||
|
|
inputmode?: String
|
||
|
|
pattern?: String
|
||
|
|
isPassword?: boolean
|
||
|
|
disabled?: boolean
|
||
|
|
addonAfter?: String
|
||
|
|
addonBefore?: String
|
||
|
|
addonBgColor?: String
|
||
|
|
addonTextColor?: String
|
||
|
|
placeHolder?: String
|
||
|
|
}
|
||
|
|
|
||
|
|
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 ? 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('sas')
|
||
|
|
}
|
||
|
|
|
||
|
|
//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-rtl:first-child,
|
||
|
|
.ant-input-group-rtl .ant-input-group-addon:first-child {
|
||
|
|
border-radius: @border-radius-base 0 0 @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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ant-input-group-addon {
|
||
|
|
background-color: v-bind(addonBgColor);
|
||
|
|
color: v-bind(addonTextColor);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|