iT邦幫忙

2023 iThome 鐵人賽

DAY 22
0
Vue.js

I need VUE.系列 第 25

Day22 迷你小專案之 CSS 調整器(下)-- 翻車惹

  • 分享至 

  • xImage
  •  

疑惑的開始

延續昨天的練習,應該要能正確地用 v-bind:style 的方式去覆蓋裡面的值,但我不知道哪邊出錯了,毫無動靜,雖然我參考了課程影片的解法。

更新 template 裡的內容:

<div class="bg-stone-500 min-w-[100px] min-h-[100px] flex items-center justify-center" v-bind:style="avatarTransform">Avatar</div>

在 computed 裡寫入 transform 後去綁 css 設定值:

avatarTransform() {
  return {
    transform: `
      rotateX(${this.avatarRotateX}deg)
      rotateY(${this.avatarRotateY}deg)
      rotateZ(${this.avatarRotateZ}deg)
    `
  }
}

它就靜靜的看著我,彷彿在嘲笑我的無能==

除錯

經過大約一小時( 寶貴的時間啊... )去查找,終於發現是因為少了 perspective 這個 css 設定的關係,因為沒有建立起透視值,所以下面的 rotateX, rotateY, rotateZ 都沒有反應。

因此在 template 上加入這個值的設定:

<label for="avatarPerspective">Perspective: {{ avatarPerspective }}</label>
<input type="range" id="avatarPerspective" class="block w-full mb-2" min="0" max="999" v-model="avatarPerspective" />

接著,在 data(){...} 及 tranform:... 這兩邊都要加入預設值唷!

avatarPerspective: 0,

最後,在 computed 裡把 transform 設定加上:

perspective(${this.avatarPerspective}px)

野望未成

然而我的 size 跟 color 並沒有成功被寫進去,所以先移除了,最後的成果如下 ( 被玩弄過後 )~

https://ithelp.ithome.com.tw/upload/images/20230926/20140492EYzJYeLSvC.png

逃離低迷的氣氛,來份 copy 吧!

看看上圖只差 copy 這個按鈕了,所以修改原本的 template 為

<button type="button" class="bg-gray-600 ml-5" v-on:click.prevent="copy">Copy</button>

由於它不是只計算值而已,所以使用 mehods 來進行撰寫,這個地方我完全不會,所以是看過課程後寫的。

async copy() {
  let text = `transform:${this.avatarTransform.transform};`
  await navigator.clipboard.writeText(text);
  alert('Copied!');
}

https://ithelp.ithome.com.tw/upload/images/20230926/20140492jPYAlwtfw4.png

請務必注意,this.( 這裡請加上 computed 裡取的名字 ).transform,否則會取不到值,此外,由於這是相對新的語法,所以對於一些比較 “經典” 的陳年好作品是不支援的!

這裡附上相關的說明:Clipboard API

後記

在不斷翻車中寫完的專案,玩起來特別香(?

然而還是有很多想法想加進去玩,大概等以後有機會吧,如果有什麼建議的地方,歡迎各位留言唷。


上一篇
Day21 迷你小專案之 CSS 調整器(上)
下一篇
Day23 在抽象理論準備現身之前
系列文
I need VUE.33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
yale918
iT邦新手 4 級 ‧ 2023-09-27 02:07:38

加油 一起翻車一起進步/images/emoticon/emoticon18.gif

我要留言

立即登入留言