Vue框架Element UI教程（二）

【时间选择器】

Element UI手册：​​https://cloud.tencent.com/developer/doc/1270​​

中文文档：​​http://element-cn.eleme.io/#/zh-CN​​

github地址：​​https://github.com/ElemeFE/element​​

---

前一篇已经安装好了Element UI环境，现在开始来实际操作框架提供的一些组件的运用了。

在准备好以下文章里面的内容之后，可以打开test.vue文件，开始写代码了。Vue框架Element UI教程-安装环境搭建（一）​​https://www.jianshu.com/p/ab3c34a95128​​

打开test.vue文件，开始写代码

<template>
<div>
<el-time-picker
is-range
v-model="value"
range-separator="-"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围">
</el-time-picker>
</div>
</template>
<script>
  export default {
    data() {
      return {
        value: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],

      };
    }
  }
</script>

npm run dev 运行，浏览器显示如下,实现了一个简单的时间选择器

 

 

---

出现和隐藏动画

Vue框架Element UI教程-安装环境搭建（一）​​https://www.jianshu.com/p/ab3c34a95128​​

今天继续写组件的运用相关例子

点击按钮的时候，元素会呈现一个出现和隐藏的动画功能。

<template>
<div>
<el-button @click="show = !show">点击按钮</el-button>
<div style="display: flex; margin-top: 20px; height: 100px;">
<transition name="el-fade-in-linear">
<div v-show="show" class="transition-box">我会消失在人海之中</div>
</transition>
</div>
</div>
</template>
<script>
    export default {
    data: () => ({
      show: true
    })
  }
</script>
<style>
  .transition-box {
    margin-bottom: 10px;
    width: 300px;
    height: 100px;
    border-radius: 4px;
    background-color: #42B983;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-left: 520px;
  }
</style>

效果大家可以自行尝试。

 

 

---

左侧导航栏

Vue框架Element UI教程-安装环境搭建（一）​​https://www.jianshu.com/p/ab3c34a95128​​

在用Element UI框架的时候

<template>
<div>
<el-row class="tac">
<el-col :span="4">   
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-s-platform"></i>
<span>服务大厅</span>
</template>
<el-menu-item-group>
<el-menu-item index="1-1">在场服务</el-menu-item>
<el-menu-item index="1-2">历史服务</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-s-tools"></i>
<span>系统设置</span>
</template>
<el-menu-item-group>
<el-menu-item index="1-1">权限管理</el-menu-item>
<el-menu-item index="1-2">角色管理</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="3">
<template slot