OneEditLink.vue

<template>
<a
  class="one-edit-link"
  :class="
    variant
      ? {
        [`one-edit-link-${variant}`]: true,
      }
      : {}
  "
  :href="href"
  target="_blank"
  rel="noopener"
  @click="handleClick"
>
  <slot :label="t('editOnGitHub')">
    <span class="full">{{ t('editOnGitHub', { item: t(type) }) }}</span>
    <span class="short">{{ t('edit') }}</span>
    <veui-icon
      class="icon"
      name="external-link"
    />
  </slot>
</a>
</template>

<script>
import { Icon } from 'veui'
import i18n from 'veui/mixins/i18n'
import { track } from '../common/util'
import 'veui-theme-dls-icons/external-link'

const BASE_URL = 'https://github.com/ecomfe/veui-docs/edit/master/one/docs/'

export default {
  name: 'one-edit-link',
  components: {
    'veui-icon': Icon
  },
  mixins: [i18n],
  props: {
    variant: {
      type: String,
      default: 'default'
    },
    path: String,
    type: {
      type: String,
      default: 'page'
    }
  },
  computed: {
    href () {
      return `${BASE_URL}${this.path}`
    }
  },
  methods: {
    handleClick () {
      track('edit-source', { path: this.path })
    }
  }
}
</script>

<style lang="stylus" scoped>
.one-edit-link
  display inline-flex
  align-items center
  text-decoration none
  transition background 0.2s, color 0.2s, border-color 0.2s

  .icon
    margin-left 4px

  &-default
    display inline-flex
    align-items center
    padding 4px 6px
    border-radius 4px
    background-color #fff
    color #848b99
    border 1px solid #e2e6f0

    &:hover
    &[data-focus-visible-added]
      background-color #f6f7fa
      color #282c33
      border-color #d3d9e6

    &:active
      background-color #e2e6f0
      color #000
      border-color #d3d9e6

  &-quiet
    color #282c33

    &:hover
    &[data-focus-visible-added]
      color #545b66

    &:active
      color #000

    .full
      display inline

  .short
    display none

@media (max-width 480px)
  .one-edit-link-quiet
    .full
      display none
    .short
      display inline
</style>