封装input 逐渐，且input插件必须带有默认值。

封装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
            width: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>

效果图：