[VUE2]自定义refresh-icon组件

[VUE2]自定义refresh-icon组件

使用

<Refresh-icon @refresh="handleRefresh" />

组件代码

<template>
  <icon-font type="icon-refresh" @click="handleRefresh" class="refresh-icon" />
</template>

<script>
import { Icon } from 'ant-design-vue'
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_2780446_azus39kjxm7.js'
})
export default {
  components: {
    IconFont
  },
  methods: {
    handleRefresh() {
      this.$emit('refresh')
    }
  }
}
</script>

<style lang="less" scoped>
.refresh-icon {
  font-size: 20px;
  color: #a94442;
  margin-left: 20px;
  &:hover {
    color: #66b1ff;
  }
}
</style>

Install

import refreshIcon from "./refreshIcon";
export default {
    install: function (vue) {
        vue.component('RefreshIcon', refreshIcon)
    }
}