vue element学习

Vue element

先clone

https://github.com/ElementUI/element-cooking-starter.git

的例子

在目录下运行

npm install           

安装所需要的nodejs包

再运行

npm run dev           

可以看到 element的简单例子

element 按钮

<el-button @click="visible = true">Button</el-button>           

element dialog

<el-dialog :visible.sync="visible" title="Hello world">
    <p>Try Element</p>
</el-dialog>           

element 组件安装：

npm i element-ui -S           

element组件导入在main.js中：

完整引入：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});           

按需引入 暂时不需要

element全局引入

Vue.use(Element, { size: 'small', zIndex: 3000 });           

主题位置：

element-ui/lib/theme-chalk/           

element带入淡出：

el-fade-in-linear 
el-fade-in           

通过

transition

标签来调用

例子

<template>
  <div>
    <el-button @click="show = !show">Click Me</el-button>

    <div style="display: flex; margin-top: 20px; height: 100px;">
      <transition name="el-fade-in-linear">
        <div v-show="show" class="transition-box">.el-fade-in-linear</div>
      </transition>
      <transition name="el-fade-in">
        <div v-show="show" class="transition-box">.el-fade-in</div>
      </transition>
    </div>
  </div>
</template>

<script>
    export default {
    data: () => ({
      show: true
    })
  }
</script>

<style>
  .transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
</style>           

zoom 缩放

el-zoom-in-center
el-zoom-in-top
el-zoom-in-bottom           

通过transition标签来调用

<template>
  <div>
    <el-button @click="show2 = !show2">Click Me</el-button>

    <div style="display: flex; margin-top: 20px; height: 100px;">
      <transition name="el-zoom-in-center">
        <div v-show="show2" class="transition-box">.el-zoom-in-center</div>
      </transition>

      <transition name="el-zoom-in-top">
        <div v-show="show2" class="transition-box">.el-zoom-in-top</div>
      </transition>

      <transition name="el-zoom-in-bottom">
        <div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>
      </transition>
    </div>
  </div>
</template>

<script>
    export default {
    data: () => ({
      show2: true
    })
  }
</script>

<style>
  .transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
</style>           

collapse展开

el-collapse-transition           

直接使用el-collapse-transition 标签来调用

例子：

<script>
    export default {
    data: () => ({
      show3: true
    })
  }
</script>

<style>
  .transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
</style>           

主要学习了element 的引入和element的组件的使用全部的组件使用根据需求看官网就可以了

https://element.eleme.cn/#/zh-CN/component/installation