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>
クリックした時に目がびっくりすると面白いかもしれないねぇ。 3回くらい続いたら、リポジトリにしてアップするけど、飽きるかどうか五分五分
ポイント
- rectでhover時に背景色を変えたいのだが、textにhoverを奪われてしまう。そこでtext側にpointer-events: noneを設定するとスルー出来る。
- 本当はレスポンシブにしたり、props経由でラベルを自由に設定したり出来るようにしたいが、寝る前で眠いと厳しい