亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Vue 與 Muuri - 如何使用?

Vue 與 Muuri - 如何使用?

月關寶盒 2022-09-02 16:28:23
我對 Vue 很陌生,我的 Web 開發技能非常有限,所以很抱歉,如果這是一個基本問題。我只是想探索如何在瀏覽器中創建一個可拖動的網格界面,并找到Muuri包?,F在,只需按照普通 JavaScript/HTML 中的示例代碼進行操作,演示就會按預期工作?,F在我嘗試使用Vue,我得到一個錯誤說 - “TypeError:無法讀取空值的屬性'getRootNode'”這是我的 Vue 組件,應該使用 Muuri。<template>  <div class="grid">    <div class="item">      <div class="item-content">        <!-- Safe zone, enter your custom markup -->        This can be anything.        <!-- Safe zone ends -->      </div>    </div>    <div class="item">      <div class="item-content">        <!-- Safe zone, enter your custom markup -->        <div class="my-custom-content">          Yippee!        </div>        <!-- Safe zone ends -->      </div>    </div>  </div></template><script>  import 'web-animations-js';  import Muuri from 'muuri';  export default {    name: 'Grid',    created() {      var grid = new Muuri('.grid', {dragEnabled:true});      console.log(grid.toString());    }  }</script><style scoped>  .grid {    position: relative;  }  .item {    display: block;    position: absolute;    width: 100px;    height: 100px;    margin: 5px;    z-index: 1;    background: #000;    color: #fff;  }  .item.muuri-item-dragging {    z-index: 3;  }  .item.muuri-item-releasing {    z-index: 2;  }  .item.muuri-item-hidden {    z-index: 0;  }  .item-content {    position: relative;    width: 100%;    height: 100%;  }</style>任何幫助或建議都非常感謝!
查看完整描述

1 回答

?
犯罪嫌疑人X

TA貢獻2080條經驗 獲得超4個贊

您的問題可能是在執行事件掛接時 DOM 尚未加載。您可以嘗試使用。我包含了一個片段。createdmounted


new Vue({

    el: "#app",

    mounted() {

      var grid = new Muuri('.grid', {dragEnabled:true});

      alert(grid.toString());

    }

});

<script src="https://unpkg.com/[email protected]/web-animations.min.js"></script>

<script src="https://unpkg.com/[email protected]/dist/muuri.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app" class="grid">


    <div class="item">

      <div class="item-content">

        <!-- Safe zone, enter your custom markup -->

        This can be anything.

        <!-- Safe zone ends -->

      </div>

    </div>


    <div class="item">

      <div class="item-content">

        <!-- Safe zone, enter your custom markup -->

        <div class="my-custom-content">

          Yippee!

        </div>

        <!-- Safe zone ends -->

      </div>

    </div>


  </div>


查看完整回答
反對 回復 2022-09-02
  • 1 回答
  • 0 關注
  • 113 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號