element-ui筆記

Element

安裝

npm i element-ui -S

項目導入

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

Vue.use(ElementUI)

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

藉助插件

npm install babel-plugin-component -D

修改 .babelrc

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-default"
    }
  ]]]
}

項目實際使用

import Vue from 'vue'
import { Button, Select } from 'element-ui'
import App from './App.vue'

Vue.component(Button.name, Button)
Vue.component(Select.name, Select)
/* 或寫爲
 * Vue.use(Button)
 * Vue.use(Select)
 */

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

內置過渡動畫
動畫效果：
fade 淡入淡出
zoom 縮放
collapse 展開摺疊

<transition name="el-fade-in-linear">//name:動畫效果
        <div v-show="show" class="transition-box">****</div>
</transition>