封装input 逐渐，且input插件必须带有默认值。
组件：
<template>
<div class="input-show">
<span class="name">{{title}}</span>
<span class="input">
<input
type="text"
v-on:input="$emit('input', $event.target.value)"
v-model="showDefaultVal"
>
</span>
</div>
</template>
<script>
export default {
name: "InputShow",
data(){
return {
showDefaultVal: ''
}
},
props: {
title: {
type: String,
required: true
},
value: {
type: String
},
showDefault:{
type: String
}
},
watch: {
value:function (val, oldVal) {
// console.log(oldVal);
this.showDefaultVal = val;
},
showDefault: function (val, oldVal) {
console.log(val,oldVal);
if(!this.showDefault) return;
this.showDefaultVal = this.showDefault;
}
},
}
</script>
<style scoped lang="stylus">
.input-show
width 100%
line-height 90px
display flex
justify-content space-between
font-family:PingFangSC-Regular;
.name
font-size:28px;
font-weight:400;
color:rgba(26,26,26,1);
.input
input
455px;
border-radius:10px;
border:1Px solid rgba(204,204,204,1);
text-indent 22px
font-size:30px;
font-weight:400;
color:rgba(26,26,26,1);
line-height:90px;
</style>
父子见中使用：
<template>
<div class="admin-user-detail">
<!--
<header>员工详情</header>
<div class="top-content">
<p class="p-row1">
<span>用户名：</span>
<span>{{detailData.user_name}}</span>
</p>
<p class="p-row2">
<span>真实姓名：</span>
<span>{{detailData.name}}</span>
</p>
<p class="p-row3">
<span>所属部门：</span>
<span>{{detailData.department_name}}</span>
</p>
<p class="p-row4">
<span>职位：</span>
<span>{{detailData.role_name}}</span>
</p>
<p class="p-row5">
<span>联系手机号：</span>
<span>{{detailData.mobile}}</span>
</p>
<p class="p-row6">
<span>微信：</span>
<span>{{detailData.wechat}}</span>
</p>
<p class="p-row7">
<span>邮箱：</span>
<span>{{detailData.email}}</span>
</p>
</div>
<div class="bottom-content">
<div class="p-row1">
<span>用户名：</span>
<span>{{detailData.user_name}}</span>
</div>
<div class="p-row2">
<div class="content">
<span>初始密码：</span>
<span>{{detailData.init_password}}</span>
</div>
<div class="btn">
<span class="reset-btn" @click="resetPassword">重置</span>
</div>
</div>
<div class="p-row3">
<div class="content">
<span>绑定手机号：</span>
<span>{{detailData.mobile}}</span>
</div>
<div class="btn">
<span class="reset-btn" @click="resetMobile">重置</span>
</div>
</div>
</div>
-->
<BtnGoupBottom
btn-text-left="禁用"
btn-text-right="修改"
:btn-fun-left="handleDisabled"
:btn-fun-right="handleAmend"
></BtnGoupBottom>
<!--测试测-->
<AdminUserLayout>
<div class="content-block">
<!--<inputs v-model="name"><label slot="label-name">真实姓名</label></inputs>-->
<InputShow title="真实姓名" v-model="name" :showDefault="detaiDataName"></InputShow>
<InfoFrame></InfoFrame>
</div>
</AdminUserLayout>
</div>
</template>
<script>
import Api from "@/api/modules/adminUser"
import Input from "../components/basic/Input"
import SelectDefault from "../components/basic/SelectDefault"
import BtnGoupBottom from "../components/basic/BtnGroupBottom"
import AdminUserLayout from "../components/basic/AdminUserLayout"
import InfoFrame from "../components/basic/InfoFrame"
import InputShow from "../components/basic/InputShow"
export default {
name: "AdminUserDetail",
components:{
inputs:Input,
SelectDefault:SelectDefault,
BtnGoupBottom,
AdminUserLayout,
InfoFrame,
InputShow
},
data(){
return{
detailData: {},
detaiDataName: '',
name: ''
}
},
watch: {
name: function (val, oldVal) {
console.log(val);
}
},
methods: {
//重置密码
resetPassword(){
//获取用户ID
let userID = this.$route.query.user_id;
Api.resetPsw({user_id: userID}).then((res)=>{
console.log(res);
});
},
//重置手机号
resetMobile(){
console.log(22);
//进行跳转
},
//禁用
handleDisabled(){
console.log('禁用');
},
//修改
handleAmend(){
console.log('修改');
}
},
created(){
//获取用户ID,请求用户详情
let userID = this.$route.query.user_id;
Api.AdminUserDetail({user_id: userID}).then((res)=>{
this.detailData = res.data;
this.detaiDataName = res.data.name;
// console.log(res);
});
}
}
</script>
<style scoped lang="stylus">
.admin-user-detail
position relative
width 100vw
height 100vh
.btn-group
display flex
width 100%
height 80px
position absolute
left 0
bottom 0
span
flex 1
background-color gray
.self-input input
width 455pxs
</style>
效果图：
