Vue 는 input 폭 이 문자 길이 에 따라 적응 하 는 동작 을 실현 합 니 다.
3192 단어 Vueinput너비.스스로 적응 하 다
업무 수요,입력 문자,뒤의 원 이 그 뒤 를 따라 야 합 니 다.어떻게 input 기본 값 은 너비 가 있 습 니까?저 는'입력 문자'에 도달 하고 싶 습 니 다.동태 적 으로 input 의 폭 을 바 꾸 고 여러 가지 방법 을 시 도 했 습 니 다.현재 스스로 생각 하고 있 습 니 다.문제 가 있 으 면 참고 하 세 요.
직접 코드 붙 이기
<div class="textcontain">
<input
type="text"
v-model.number="item.cardComboMoney"
maxlength="5"
placeholder=" "
oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
:disabled='disabled'
:style="{width:text(item.cardComboMoney)}"
>
<span
class="textshow"
v-if="item.cardComboMoney!=0&&item.cardComboMoney!=''"
> </span>
</div>
computed: {
text () {
return function (value) {
if (value == '' || value == 0) {
return '100%'
} else {
return String(value).length * 0.32 + 'rem'
}
}
}
},보충 지식:input 너비 적응(문자 가 차지 하 는 너비 가 다 르 기 때문에 발생 하 는 문 제 를 해결 합 니 다)
질문 설명:
input 는 입력 할 때 input 의 폭 을 입력 한 문자 에 따라 자동 으로 넓 혀 야 합 니 다.
사고 1:문자 의 내용 을 얻 은 다음 에 문자.length*font-size 를 통 해 문자 의 너 비 를 계산 하지만 문자'i'와'중'이 차지 하 는 너비 가 다 르 기 때문에 너비 차 이 를 야기 합 니 다.
생각:
font 속성 과 input 를 통일 시 키 고 span 의 폭 을 가 져 와 input 에 값 을 부여 합 니 다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<title>input </title>
<style>
body {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
#my-input {
width: 20px;
padding: 0;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
#my-span {
position: absolute;
left: 0;
visibility: hidden;
}
</style>
</head>
<body>
<!-- ： span， input span -->
<span id="my-span"></span>
<input type="text" id="my-input" oninput="changeWidth()">
<script>
function changeWidth() {
var mySpan = $("#my-span");
var myInput = $("#my-input");
mySpan.html(myInput.val()); // span
if (mySpan.width() > 20) {
myInput.css('width', mySpan.width());
}
}
</script>
</body>
</html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
