vue：结合elementUI设计网站登录页

这次主要是记录三个重点：1，组件间通信的方法（其一）2，脚手架搭建的vue工程的组件调用 3，elementUI 的轮播图与模态框的设计

---

先看效果图

 

 

 

 简单的就做了这四个页面，总共四个组件实现这些效果（这个小网站需要的组件也挺多的，当然不止这四个）。

---

问题：在点击登录按钮时渲染模态框登录，点击叉或者退出时不渲染这个dom结点，再点击登录又重新渲染dom结点？（注意elementUI的dialog具备一个属性:visible.sync="dialogFormVisible" 异步显示属性，由组件的一个布尔类型的数据进行控制）所以dom结点的渲染和表单的显示是由两个属性控制的，而一个是父组件的属性，一个是子组件的属性，如何同步？这里就必须用到组件间的通信。

这里子组件在自己点击叉或者退出的时候只需要给父组件发送一个动作，父组件及时的取消dom结点的渲染：

父组件（App.vue）：

    <div v-if="loginWord === true">
      <login @close="closeL"></login>
    </div>

   closeL(){
      this.loginWord = false
    },

子组件（UserLogin.vue）:

    methods:{
      // 点击模态框的小叉叉
      handerColse(){
        this.dialogFormVisible = false
        // 调用父组件在子组件上绑定的方法，在父组件内运行（可实现子组件对父组件的通信）
        this.$emit('close')
      }
    },

这样通过调用绑定事件的方法就可以实现子组件与父组件的同步。

---

问题：组件间如何调用？

我想这个就很简单了，组件包含的三种标签，template，script，style各自负责相应的内容，而我们要想实现调用组件只需要先引入再注册：

<script>
// 引入需要使用的组件
import login from './components/User/UserLogin.vue'
import register from './components/User/UserRegister.vue'
import welcome from './components/Info/welcomeInfo.vue'

export default {
  name: 'App',
  components: {
    login,
    register,
    welcome
  },
....
}

---

问题：elementUI轮播图如何实现？

这个功能只需要你去选取一种走马灯样式，再选取图片进行循环即可：

<template>
    <div class="back">
        <el-carousel :interval="2000" type="card" height="450px">
                <el-carousel-item v-for="item in images" :key="item.id">
                    <div id="demo">
                         <img :src="item.url" class="img" alt=""/>
                    </div>
                </el-carousel-item>
        </el-carousel>
    </div>
</template>
<script>
export default {
    name:'WelcomdeInfo',
    methods:{
    },
    data() {
        return {
              images: [
                { id:0,url: require("@/assets/img/sa.jpg") },
                { id:1,url: require("@/assets/img/sb.jpg") },
                { id:2.,url: require("@/assets/img/sc.jpg") },
            ]
        }
    },
  
}
</script>


<style>
.back{
    background-color: #F2F6FC;
}
.img{
    height: 450px;
    width: 800px;
}
#demo {
    display: inline-block;
    position: relative;
    margin: 1%;
    padding: 20px;
    background: #fafafa;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: rgba(0, 0, 0, 0.8);
    text-shadow: 0 1px 0 #fff;
}

#demo::before,
#demo::after {
    position: absolute;
    content: "";
    top: 10px;
    bottom: 15px;
    left: 10px;
    width: 50%;
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
    z-index: -1;
}

#demo::after {
    right: 10px;
    left: auto;
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
}

#demo img {
    vertical-align: bottom;
}
</style>

---

问题：elementUI的模态框如何设计？

<template>
  <div>
    <div v-if="show === false">
      <el-dialog title="用户登录" :visible.sync="dialogFormVisible" :before-close="handerColse">
        <el-form :model="UserInfo">
          <el-form-item label="账户" :label-width="formLabelWidth">
            <el-input v-model="UserInfo.userAccount" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="UserInfo.password" type="password" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handerColse">退 出</el-button>
          <el-button type="primary">登 录</el-button>
          <el-button @click="show = true">忘记密码</el-button>
        </div>
      </el-dialog>
    </div>
    <div v-else>
      <el-dialog title="验证码登录" :visible.sync="dialogFormVisible" :before-close="handerColse">
        <el-form :model="UserInfo">
          <el-form-item label="手机号" :label-width="formLabelWidth">
            <el-input v-model="UserInfo.userAccount" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="验证码" :label-width="formLabelWidth">
            <el-input v-model="UserInfo.password" type="password" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handerColse">退 出</el-button>
          <el-button type="primary">登 录</el-button>
          <el-button :show="true">发送验证码</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
    name:"UserLogin",
    data() {
      return {
        dialogFormVisible: true,
        UserInfo:{
          userAccount:"",
          password:""
        },
        show:false,
        formLabelWidth: '120px'
      }
    },
    methods:{
      // 点击模态框的小叉叉
      handerColse(){
        this.dialogFormVisible = false
        // 调用父组件在子组件上绑定的方法，在父组件内运行（可实现子组件对父组件的通信）
        this.$emit('close')
      }
    },
}
</script>

简易的使用案例。