elementsui常用知識点まとめ

6940 ワード

javascript 面接試験 ui

1.フェードアウト効果:

1  <transition name="el-fade-in-linear">
2         <div v-show="show" class="transition-box">.el-fade-in-lineardiv>
3       transition>
4       <transition name="el-fade-in">
5         <div v-show="show" class="transition-box">.el-fade-indiv>
6       transition>

transionに追加:el-fade-n-linearとel-fade-i類
2.Zoomスケーリング:

 1  <transition name="el-zoom-in-center">
 2         <div v-show="show2" class="transition-box">.el-zoom-in-centerdiv>
 3       transition>
 4 
 5       <transition name="el-zoom-in-top">
 6         <div v-show="show2" class="transition-box">.el-zoom-in-topdiv>
 7       transition>
 8 
 9       <transition name="el-zoom-in-bottom">
10         <div v-show="show2" class="transition-box">.el-zoom-in-bottomdiv>
11       transition>

クラス:
1.el-zoom-n-center
2.el-zoom-n-top
3.el-zoom-i-n-bottom
3.折りたたみ効果を展開する:el-collapte-transionコンポーネント

1  <el-collapse-transition>
2         <div v-show="show3">
3           <div class="transition-box">el-collapse-transitiondiv>
4           <div class="transition-box">el-collapse-transitiondiv>
5         div>
6       el-collapse-transition>

導入を使う:

// fade/zoom  
import 'element-ui/lib/theme-chalk/base.css';
// collapse     
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
import Vue from 'vue'

Vue.component(CollapseTransition.name, CollapseTransition)

javascript基礎(基本的なオブジェクト関数)