Vue.js + SVG練習1

Vue + SVGで色々UIを作っているんだけど、素振りが必要だと感じたので、変なものをこしらえて引き出しを増やしていこうと思う。

一作目。

コードはグダグダですみません…

CuteButton.vue

<template>
  <svg width="400" height="80" @mousemove="over">
    <rect width="200" height="50" rx="8" ry="8" x="20" y="20">
    </rect>
    <text x="120" y="54" text-anchor="middle">I am Button!</text>
    <circle r="10" cx="100" cy="20" class="eye-outer"></circle>
    <circle r="10" cx="130" cy="20" class="eye-outer"></circle>
    <circle r="5" :cx="100 + dx" :cy="20 + dy" class="eye-inner"></circle>
    <circle r="5" :cx="130 + dx" :cy="20 + dy" class="eye-inner"></circle>
  </svg>
</template>
<script>
export default {
  data(){
    return {
      dx: 2,
      dy: 2
    }
  },
  methods: {
    over(ev){
      const cx = 100
      const cy = 20
      const dx = ev.offsetX - cx
      const dy = ev.offsetY - cy
      this.dx = dx / 400 * 4
      this.dy = dy / 80 * 4
      console.log(dx, dy )
    }
  }
}
</script>
<style scoped>
rect{
  fill: white;
  stroke: #793;
  stroke-width: 5px;
  cursor: pointer;
}
rect:hover{
  fill: #EFE;
}

.eye-outer{
  fill: white;
  stroke: #793;
  stroke-width: 5px;
}
text{
  cursor: pointer;
  pointer-events: none;
}

.eye-inner{
  fill: #793;
}
</style>

クリックした時に目がびっくりすると面白いかもしれないねぇ。 ３回くらい続いたら、リポジトリにしてアップするけど、飽きるかどうか五分五分

ポイント

• rectでhover時に背景色を変えたいのだが、textにhoverを奪われてしまう。そこでtext側にpointer-events: noneを設定するとスルー出来る。
• 本当はレスポンシブにしたり、props経由でラベルを自由に設定したり出来るようにしたいが、寝る前で眠いと厳しい