vue全局组件的封装

// src/components/GButton/index.vue

<template>
  <div>
    <el-button icon="el-icon-plus" type="success" @click="add">添加</el-button>
    <el-button icon="el-icon-edit" type="success" @click="edit">编辑</el-button>
    <el-button icon="el-icon-delete" type="success" @click="del">删除</el-button>
    <el-dropdown class="selectSettings" @command="selectSettings">
      <el-button type="success">
        更多设置<i class="el-icon-arrow-down el-icon--right"/>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item
          v-for="item in options"
          :key="item.value"
          :command="item.value"
          @click="selectedSettings(item.value)">
          {{ item.label }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
export default {
  name: 'GButtons',
  props: {
    lists: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      options: []
    }
  },
  watch: {
    lists(val) {
      this.options = val
    }
  },
  methods: {
    add() {
      this.$emit('onAdd')
    },
    edit() {
      this.$emit('onEdit')
    },
    del() {
      this.$emit('onDelete')
    },
    selectSettings(val) {
      this.$emit('selectSettings', val)
    }
  }
}
</script>
<style scoped>
.selectSettings {
  margin-left: 10px;
}
</style>
// src/components/GButton/index.js

import GButtons from './index.vue'

const GButton = {
  install: function(Vue) {
    Vue.component('GButton', GButtons)
  }
}

export default GButton
// src/main.js

import Vue from 'vue'

import GButton from '@/components/GButton/index'

Vue.use(GButton)

// 使用

     <el-row class="admin-top-g">
        <GButton
          :lists="options"
          @onAdd="addUser"
          @onEdit="editUser"
          @onDelete="delUser"
          @selectSettings="selectSettings"
        />
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页