29.5 如果我要装 javascript 套件勒？

就算 liveview 可以达到大部分想做的互动
但是还是有一些边边角角是满困难的

像是复制到剪贴簿

这边来带大家做一遍 如果要在专案里面使用 npm 安装套件要怎麽做

安装 clipboard.js

虽然说自己写也可以满简短的，
但是这个装好就可以用了好爽喔。

phoenix 把 javascript 跟 css 这些东西都放在 assets 资料夹内
所以要 npm install 的话要 cs 进去 assets 资料夹

cd assets
npm install clipboard --save

就装好了，
再来是要 import 他

打开 assets/js/app.js
这边会看到其实 phoenix 这里就有写一些说明了

// Alternatively, you can `npm install some-package` and import
// them using a path starting with the package name:
//
//     import "some-package"
//

我们就把 import 放在下面吧

import ClipboardJS from "clipboard"

然後依照 clipboard.js 的使用说明 也在这边起一个他的物件
依照使用情况，如果很多的话可以放在别的档案，
在这边一行就丢这里吧

new ClipboardJS('.btn');

就这样就好了

使用

我们来把他加在邀请页面上

打开 lib/card_web/live/game_live/invite.ex
帮 invite component 加上复制按钮
这边就照抄 clipboardjs的官网范例

  def invite(assigns) do
    ~H"""
    <div class="flex flex-col p-4 bg-gray-50 shadow-lg text-center mt-12">
      <div class="bg-blue-300 w-40 h-8 rounded-xl transform skew-x-12 rotate-6 translate-y-6 translate-x-40"></div>
      <div class="transform">
        <label for="invite_url" class="text-2xl font-serif">Guest Link</label><br>
        <input id="invite_url" class="w-96 text-center text-gray-500 bg-gray-50 mt-4" type="text" value={@path} readonly>
      </div>
      <div class="bg-blue-300 w-24 h-2 rounded-xl transform -skew-x-12 rotate-2 translate-y-6 translate-x-36"></div>
      <button class="btn mb-2 transform font-serif text-lg" data-clipboard-target="#invite_url">
        Copy to Clipboard
      </button>
      <p class="text-lg text-gray-600">To begin the game, send this link to your component.</p>
    </div>
    """
  end

完成！