Vue.js

# element-ui

element

NPM

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)
});

# vue-element-admin

main.js

import Element from 'element-ui'

import './styles/element-variables.scss'
import '@/styles/index.scss' // global css

Vue.config.productionTip = false

Vue.use(Element)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

styles/element-variables.scss

@import "~element-ui/packages/theme-chalk/src/index";

Dropdown 下拉菜单

指令事件 @command="handleCommand"

# Steps 步骤条 steps

element-ui修改el-steps默认样式

<style lang="scss" scoped>
.el-step__icon /deep/.el-step__icon-inner{
    color: #fff;
}
</style>

Menu Attribute mode > horizontal / vertical

<el-menu
  :default-active="activeMenu"
  :collapse="isCollapse"
  :background-color="variables.menuBg"
  :text-color="variables.menuText"
  :unique-opened="false"
  :active-text-color="variables.menuActiveText"
  :collapse-transition="false"
  mode="vertical"
>
  <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
</el-menu>

<el-menu-item index="1">处理中心</el-menu-item> not working check import './styles/element-variables.scss'

# element-ui中表单验证

vue-typescript-admin-template /views/login/index.vue

 <el-form
      ref="loginForm"
      :model="loginForm"
      :rules="loginRules"
 
 private loginRules = {
    username: [{ validator: this.validateUsername, trigger: 'blur' }],
    password: [{ validator: this.validatePassword, trigger: 'blur' }]
  }

  private validatePassword = (rule: any, value: string, callback: Function) => {
    if (value.length < 6) {
      callback(new Error('The password can not be less than 6 digits'))
    } else {
      callback()
    }
  }

# element-ui中表单

表单 el-tooltip

  <el-form-item prop="deposit">
      <label slot="label">
        {{$t('member.deposit')}}
      <el-tooltip placement="right">
        <div slot="content">tooltip</div>
        <i class="el-icon-info" />
      </el-tooltip>
    </label>
    <el-switch
      :disabled="item.memberLevel === 0"
      v-model="item.deposit"
      :active-text="$t('switchOn')"
      :inactive-text="$t('switchOff')">
    </el-switch>
  </el-form-item>

# el-input

[Bug Report] v-model.number cannot enter decimal points

v-model.number 無法輸入小數

<el-form-item :label="$t('em.cannot_decimal')" prop="cannot_decimal">
  <el-input
    ref="cannot_decimal"
    name="cannot_decimal"
    v-model.number="item.cannot_decimal"
    :placeholder="$t('cannot_decimal')"
  />
</el-form-item>
<el-form-item :label="$t('decimal')" prop="decimal">
  <el-input
    ref="decimal"
    name="decimal"
    type="number"
    v-model="item.decimal"
    :placeholder="$t('decimal')"
  />
</el-form-item>

← bootstrap-vue →