原文: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 运行,浏览器显示如下,实现了一个简单的时间选择器
出现和隐藏动画
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
扫描二维码关注公众号,回复:
8754836 查看本文章
在用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="title