8000 關於在Angular 引入tocas/dist/tocas.min.js 僅部分生效的問題 · Issue #907 · teacat/tocas · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content
關於在Angular 引入tocas/dist/tocas.min.js 僅部分生效的問題 #907
Closed
@dase1353

Description

@dase1353

我目前使用Angular 15.2版
tocas 4.2.2版本(npm安裝)
沒有其他套件,純測試tocas4.2.2的專案

使用官網範例建立了一個簡單的新的四個JS功能的介面,未import js的狀態下,如圖
可以看到TAB的部分因為沒有JS,所以兩個頁面都出現在畫面上

無import

接著import後重新編譯
angular.json
"scripts": [ "node_modules/tocas/dist/tocas.min.js" ]
style.css
@import '~tocas/dist/tocas.min.css';

有import

可以看到tab功能及tooltip有正常運作
但選單模組,及模式切換並沒有正常的執行

另外我有寫了一個純html檔案,使用CDN來進行測試,功能都是正常的
用外部連結的方式

想詢問一下,裡面有兩個正常運作,那引入JS應該沒有問題,我該怎麼去尋找錯誤的原因是在哪裡呢
順便附上測試用的頁面

<div class="ts-center">
  <p>選單模組</p>
  <div class="ts-box">
    <div class="ts-content">
      <button class="ts-button is-start-labeled-icon" data-dropdown="dropdown">
        <span class="ts-icon is-chevron-down-icon"></span>
        更多功能
      </button>
      <div class="ts-dropdown" data-name="dropdown">
        <button class="item">新增檔案</button>
        <button class="item">移至回收桶</button>
        <button class="item">檢視資訊</button>
      </div>
    </div>
  </div>
  <p>工具提示</p>
  <div class="ts-box">
    <div class="ts-content">
      <div class="ts-button is-icon" data-tooltip="收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏" data-position="top-start">
        <span class="ts-icon is-heart-icon"></span>
      </div>
    </div>
  </div>
  <p>分頁模組</p>
  <div class="ts-box">
    <div class="ts-content">
      <div class="ts-tab is-pilled">
        <button class="item is-active" data-tab="logs">交易紀錄</button>
        <button class="item" data-tab="info">帳戶資訊</button>
      </div>
      <div class="ts-space"></div>
      <div class="ts-segment" data-name="logs">
        你尚未有任何交易紀錄。
      </div>
      <div class="ts-segment" data-name="info">
        你的帳戶目前有3000元。
      </div>
    </div>
  </div>
  <p>模式切換</p>
  <div class="ts-box">
    <div class="ts-content">
      <button class="ts-button" data-toggle="btn:is-outlined" data-name="btn">
        按我切換樣式 😮
      </button>
    </div>
  </div>
</div>

Metadata

Metadata

Assignees

Labels

🐛 已證實 Bug非常確定是個 Bug。📜 JavaScript這件事情和模組、JavaScript 程式碼有關聯🚨 高優先度這件事情非常急迫。

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions

    0