浙江省建设诚信系统网站,建设拍卖网站,进入微信公众号登录入口,网站建设公司的名字实现的效果展示#xff0c;可以是前缀单位#xff0c;也可以是后缀单位。实现的思路就是动态修改伪元素 ::before 和 ::after 的 content值 实现二次封装数字框的代码如下#xff1a;
templateel-input-numberrefinputNumberv-modelinputVal…实现的效果展示可以是前缀单位也可以是后缀单位。实现的思路就是动态修改伪元素 ::before 和 ::after 的 content值 实现二次封装数字框的代码如下
templateel-input-numberrefinputNumberv-modelinputValueclearable:controlsfalse:data-contentshowPendAttr.valuev-bind$attrsclassc-input-number c-input-number-pend:class{pend-before: showPendAttr.pend pendEnum.PRE,pend-after: showPendAttr.pend pendEnum.AFTER}/el-input-number
/template
script langts setup
import { ref, computed } from vue;
enum pendEnum {PRE pre, // 前置单位AFTER after // 后置单位
}
type Props {modelValue: any;pendAttr?: { [key: string]: any };
};
const props withDefaults(definePropsProps(), {modelValue:
});
const emit defineEmits([update:modelValue, search]);const inputNumber ref();// 处理input输入框双向绑定
const inputValue computed({get: () {return props.modelValue;},set: (val: any) {emit(update:modelValue, val);}
});
// 这里是处理pendAttr参数的用新传入的pendAttr的参数替换默认的
const showPendAttr computed(() {let defaultPendAttr: { [key: string]: any } { pend: pendEnum.PRE, value: };defaultPendAttr { ...defaultPendAttr, ...props.pendAttr };return defaultPendAttr;
});
defineExpose({inputNumber
});
/script
style langscss scoped
.c-input-number {position: relative;
}
.c-input-number-pend::before,
.c-input-number-pend::after {position: absolute;top: 50%;z-index: 1;display: inline-block;font-size: 13px;text-align: center;transform: translateY(-50%);
}
.pend-before::before {left: 12px;content: attr(data-content);
}
.pend-after::after {right: 12px;content: attr(data-content); // 可以获取自定义传值实现动态修改content
}// 以下代码是解决单位重叠
.pend-before {:deep(.el-input__wrapper) {padding-left: 32px !important;}
}
.pend-after {:deep(.el-input__wrapper) {padding-right: 32px !important;}
}
/style
使用
el-form-item label入款金额: propmoneyc-input-numberv-modelconfigForm.money:min0:pendAttr{ pend: pre, value: $ }placeholder请输入入款金额stylewidth: 300px/c-input-number
/el-form-item
