原文:https://www.jianshu.com/p/1704b5935a8
【时间选择器】
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 运行,浏览器显示如下,实现了一个简单的时间选择器
![](http://upload-images.jianshu.io/upload_images/5640239-38235485a543707a.png?imageMogr2/auto-orient/strip|imageView2/2/w/430/format/webp)
出现和隐藏动画
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;
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>
效果大家可以自行尝试。
![](http://upload-images.jianshu.io/upload_images/5640239-536d8a00d20ec0d2.gif?imageMogr2/auto-orient/strip|imageView2/2/w/377/format/webp)
左侧导航栏
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=