使用uniapp写一个input样式模板
时间: 2024-11-11 09:30:03 浏览: 43
在UniApp中,创建一个基本的Input输入框模板非常简单。 UniApp基于Vue.js框架,所以你可以使用HTML、CSS和JavaScript结合来构建UI。下面是一个简单的Input样式模板示例:
```html
<!-- uni-app.html -->
<template>
<view class="container">
<view class="input-item">
<input type="text" placeholder="请输入内容" v-model="inputValue" @change="handleInputChange" />
<view class="clear-icon" @click="clearInput">
<icon type="cross" size="20"></icon>
</view>
</view>
</view>
</template>
<style scoped>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.input-item {
width: 300px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.clear-icon {
float: right;
cursor: pointer;
}
</style>
<script setup>
import { ref } from 'vue';
import { icon } from '@vant/icons';
export default {
setup() {
const inputValue = ref('');
const handleInputChange = (e) => {
console.log('输入值改变', e.detail.value);
};
const clearInput = () => {
inputValue.value = '';
};
return {
inputValue,
handleInputChange,
clearInput,
icon
}
}
};
</script>
```
这个模板包含了一个文本输入框,当用户输入内容时,`handleInputChange`函数会被触发并打印新的输入值。同时还有一个清除按钮,点击后清空输入框的内容。
阅读全文
相关推荐


















