Element制作一个简洁的个人信息界面附带简单的双向绑定

桃扇骨 2021-09-24 03:34 1325阅读 0赞

**效果图**：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjUxMDMy_size_16_color_FFFFFF_t_70_pic_center]  
简述：基于Vue+Element制作，Element官方网站https://element.eleme.cn/，利用了Element的卡片组件，进行的样式修改，实现起来很简单。整体布局由Element官方提供的Layout进行的布局，易上手，告别了繁杂的样式调整。

**代码：**

<template>
        <div>
          <el-row :gutter="20" style="margin-top:10px;">
            <el-col :span="8">
                <div class="grid-content bg-purple">
                     <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>个人中心</span>
            </div>
              <div class="name-role">
              <span class="sender">Admin - {
       {dataForm.nickName}}</span>  
            </div>
            <div class="registe-info">
              <span class="registe-info">
                注册时间：
                <li class="fa fa-clock-o"></li>
                 2020/4/10 9:40:33
              </span>
            </div>
            <el-divider></el-divider>
            <div class="personal-relation">
            <div class="relation-item">手机号:  <div style="float: right; padding-right:20px;">{
       {dataForm.phone}}</div></div>
        </div>
        <div class="personal-relation">
          <div class="relation-item">所属企业:  <div style="float: right; padding-right:20px;">杭州诚聚</div></div> 
        </div>
           <div class="personal-relation">
          <div class="relation-item">首页链接:  <div style="float: right; padding-right:20px;">{
       {dataForm.homeUrl}}</div></div>      
        </div>
          </el-card>
            </div>
            </el-col>
        <el-col :span="16">
            <div class="grid-content bg-purple">
           <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>基本资料</span>
            </div>
            <div>
              <el-form label-width="80px" v-model="dataFrom" size="small" label-position="right">
              <el-form-item label="用户昵称" prop="nickName">
              <el-input  auto-complete="off" v-model="dataForm.nickName"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input auto-complete="off" v-model="dataForm.phone"></el-input>
            </el-form-item>
              <el-form-item label="首页链接" prop="homeUrl">
              <el-input  maxlength="18" v-model="dataForm.homeUrl"></el-input>
            </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
              <el-button size="mini" type="primary">提交</el-button>
              <el-button size="mini" type="warning" >关闭</el-button>
            </div>
            </div>
          </el-card>
            </div>
            </el-col>
    
          </el-row>
        </div>
    </template>
    
    <script>
    export default {
      data(){
        return{
          dataForm:{
            nickName: '超级管理员',
            phone: '173567777777',
            homeUrl: 'http://www.baidu.com'
          }
        }
      }
    }
    </script>
    
    <style lang="scss" scoped>
    //卡片样式
     .text {
        font-size: 14px;
      }
    
      .item {
        margin-bottom: 18px;
      }
    
      .clearfix:before,
      .clearfix:after {
        display: table;
        content: "";
      }
      .clearfix:after {
        clear: both
      }
    
      .box-card {
        width: 100%;
      }
    //文本样式区
      .name-role {
        font-size: 16px;
        padding: 5px;
       text-align:center;
      }
       .sender{
          text-align:center;
        }
    .registe-info{
      text-align: center;
      padding-top:10px;
    }
    .personal-relation {
      font-size: 16px;
      padding: 0px 5px 15px;
      margin-right: 1px;
        width: 100%
    }
    
    .relation-item {
      padding: 12px;
       
    }
    .dialog-footer{
      padding-top:10px ;
      padding-left: 10%;
    }
    //布局样式区
       .el-row {
        margin-bottom: 20px;
        &:last-child {
          margin-bottom: 0;
        }
      }
      .el-col {
        border-radius: 4px;
      }
      .bg-purple-dark {
        background: #99a9bf;
      }
      .bg-purple {
        background: #d3dce6;
      }
      .bg-purple-light {
        background: #e5e9f2;
      }
      .grid-content {
        border-radius: 4px;
        min-height: 36px;
      }
      .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
      }
    </style>

附Vue生命周期：

<template>
      <div class="" style="padding: 50px;">
        
      </div>
    </template>
     
    <script>
      // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
      // 例如：import 《组件名称》 from '《组件路径》';
      // 例如：import uploadFile from '@/components/uploadFile/uploadFile'
     
      export default {
        name: '',
        // import引入的组件需要注入到对象中才能使用
        components: {},
        data() {
          // 这里存放数据
          return {
          
          }
        },
        // 监听属性 类似于data概念
        computed: {},
        // 方法集合
        methods: {
        },
        // 监控data中的数据变化
        watch: {},
        // 生命周期 - 创建完成（可以访问当前this实例）
        created() {
     
        },
        // 生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
     
        },
        beforeCreate() {
        }, // 生命周期 - 创建之前
        beforeMount() {
        }, // 生命周期 - 挂载之前
        beforeUpdate() {
        }, // 生命周期 - 更新之前
        updated() {
        }, // 生命周期 - 更新之后
        beforeDestroy() {
        }, // 生命周期 - 销毁之前
        destroyed() {
        }, // 生命周期 - 销毁完成
        activated() {
        } // 如果页面有keep-alive缓存功能，这个函数会触发
      }
    </script>
     
    <style scoped lang="scss">
      //@import url(); 引入公共css类
     
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjUxMDMy_size_16_color_FFFFFF_t_70_pic_center]: /images/20210923/b7e90c5fed3f487b9246a72eb59f5457.png