track_line.vue 604 Bytes
Newer Older
1 2 3 4 5 6 7 8 9
<script>
export default {
  name: 'TrackLine',
  props: {
    track: {
      type: Object,
      required: true,
    },
  },
10 11 12 13
  computed: {
    stylizedLine() {
      if (this.track.lineStyle === 'dashed') return '6, 3';
      if (this.track.lineStyle === 'dotted') return '3, 3';
14 15 16 17 18 19 20 21
      return null;
    },
  },
};
</script>
<template>
  <td>
    <svg
22 23
      width="16"
      height="8">
24
      <line
25
        :stroke-dasharray="stylizedLine"
26 27 28
        :stroke="track.lineColor"
        stroke-width="4"
        :x1="0"
29 30 31
        :x2="16"
        :y1="4"
        :y2="4"
32 33 34 35 36
      />
    </svg>
  </td>
</template>