vue之封装组件,组件可使用v-model语法糖
Input.vue
<template>
<div class="x_input">
<input
:type="type"
:class="['x_input_inner', { 'is-disabled': disabled }]"
:placeholder="placeholder"
:name="name"
:disabled="disabled"
:value="value"
@input="handleInput"
/>
</div>
</template>
<script>
export default {
name: "Input",
props: {
placeholder: {
type: String,
default: "请输入",
},
type: {
type: String,
default: "text",
},
name: {
type: String,
default: "",
},
disabled: {
type: Boolean,
default: false,
},
value: {
default: "",
},
},
data() {
return {};
},
methods: {
handleInput(e) {
this.$emit("input", e.target.value);
},
},
components: {},
};
</script>
<style lang="scss" scoped>
.x_input {
width: 100%;
font-style: 14px;
display: inline-block;
.x_input_inner {
-webkit-appearance: none;
background: #fff;
border-radius: 4px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: inherit;
height: 32px;
line-height: 32px;
outline: none;
padding: 0 15px;
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
width: 100%;
&:focus {
outline: none;
border-color: #409eff;
}
&.is-disabled {
border-color: #f5f7fa;
border-color: #e4e7ed;
color: #c0c4cc;
cursor: not-allowed;
}
}
}
</style>
使用组件
![在这里插入图片描述](https://img-blog.csdnimg.cn/c6f6e5affeb747dbbdf416fc10361d92.png#pic_center)
<template>
<div class="home">
username -- {{ username }}
<x-input
class="x_input_wrap"
placeholder="请输入用户名"
v-model="username"
></x-input>
age -- {{ age }}
<x-input
class="x_input_wrap"
placeholder="请输入年龄"
v-model="age"
></x-input>
<x-input
class="x_input_wrap"
placeholder="请输入秘密"
type="password"
disabled
></x-input>
</div>
</template>
<script>
import XInput from "./Test/Input.vue";
export default {
name: "Home",
components: {
XInput,
},
data() {
return {
username: "123",
age: 20,
};
},
methods: {
},
};
</script>
<style lang="scss" scoped>
.x_input_wrap {
width: 200px;
}
.home {
height: calc(100% - 34px);
width: calc(100% - 34px);
background: #fff;
padding: 16px;
border: 1px solid #ccc;
}
</style>