封装一个顶部图标组件

data中如何拿到props中的值 通过this去拿
props: {
  model: Object
},
data() {
  return {
   list: this.model
  }
},

 

组件.vue

:content="list.name" 动态绑定传递过来的提示文字   

placement="top" 提示的位置--顶部

:class="list.icon"动态绑定图标

<!-- 按钮组件 -->
<template>
    <el-tooltip class="item" effect="dark" :content="list.name" placement="top">
        <button class="icon-btn" @click="btnClick"><i class="iconfont" :class="list.icon"></i></button>
    </el-tooltip>
</template>

<script>
export default {
    name: 'btnList',
    props: {
        model: Object
    },
    data() {
        return {
            list: this.model
        }
    },
    created: function() {
            
    },
    methods: {
        btnClick: function() {
            this.$emit('btn-click', this.model)
        }
    }
}
</script>

<style scoped="scoped">
    .icon-btn {
        border: none;
        background: transparent;
        outline: none;
        margin-right: 16px;
    }
    
    .iconfont {
        color: #4A80F6;
        font-size: 20px;
    }
    
</style>

 

使用.vue

<template>
  <div  class="page-template">
  
    <!--页面title-->
    <el-row class="kno-title">
      <el-col :span="12">
        <div class="grid-content bg-purple cha-title">{{ pageTile }}</div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <bnt-list :model="model" @btn-click="knoAdd(1)"></bnt-list>
          <bnt-list :model="modela" @btn-click="knoAdd(2)"></bnt-list>
          <bnt-list :model="modelb" @btn-click="knoAdd(3)"></bnt-list>
          <bnt-list :model="modelc" @btn-click="knoAdd(4)"></bnt-list>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import bntList from "../../../components/btn-list";
export default {
  data() {
    return {
         // 
      pageTile:"教材管理",
      model: {
        name: "添加",
        icon: "icon-add"
      },
      modela: {
        name: "导入",
        icon: "icon-input"
      },
      modelb: {
        name: "启用",
        icon: "icon-enable"
      },
      modelc: {
        name: "禁用",
        icon: "icon-stop"
      },
    };
  },
 components: {
    "bnt-list": bntList,
  },

 methods:{
      //添加
    knoAdd(val) {
      if (val == 1)    
        console.log("添加");
      } else if (val == 2) {
        console.log("导入");
      } else if (val == 3) {
        console.log("3");
      } else if (val == 4) {
        console.log("4");
      }
    },
 }
 }
 

<style  scoped>
.page-template {
  padding: 18px 24px;
}
.kno-title {
  height: 32px;
  border-bottom: 1px solid #e5e7ef;
  margin-bottom: 26px;
}


/* 图标靠右 */
.kno-title .bg-purple-light {
  text-align: right;
}
</style>