Vue.js: Поделитесь компонентом «Перемещение» вокруг, вместо того, чтобы копировать его?

Я создаю систему комментариев, в которой есть много комментариев (как 300+) с Vue.js.Vue.js: Поделитесь компонентом «Перемещение» вокруг, вместо того, чтобы копировать его?

И есть раздел администратора для каждого комментария (помеченного как Component ниже), появится раздел администратора, когда курсор пребывание на комментарии.

Так что если будет 300 комментариев, компонент раздела администратора будет скопирован как 300 раз, что не подходит для мобильных устройств даже на компьютере (причина слишком много компонентов).

Что я имею в виду это: Можно ли одни и те же компоненты по движущихся вокруг замечаний, так что будет только один раздел администратора, как это?

источник

2016-12-14 Yami Odymel

Посмотрите на директиву 'v-if' (в отличие от' v-show'). Это обычно должно делать трюк. – nils

Я не знаю ни одного метода, который позволяет перемещать общий компонент любого места в пределах страницы. Обычно это делается в мире jQuery, но это приводит к очень грязному и трудно отлаживаемому коду.

Как уже упоминалось @Nils в комментариях, вы можете использовать v-if, который не отображает плавающий компонент в DOM. Поэтому он не увеличит вес страницы, и ваша страница будет чувствовать себя быстро (относительно).

Технически это не должно иметь никакого значения, поскольку Vue.js удобен в рендеринге 1000 строк. Ссылка: http://www.stefankrause.net/wp/?p=316 (нажмите на красочный стол, чтобы посмотреть интересные статьи)

В приведенном ниже примере кнопка «Сделать что-то» входит в DOM только после того, как вы поместите курсор в одно из полей комментариев. До этого он не будет передан в DOM.

Vue.component('comment-block', { 
 
    props: ["comment"], 
 
    template: ` 
 
     <div class="comment" @mouseenter="displayOptions=true" @mouseleave="displayOptions=false"> 
 
      <div class="author">{{comment.author}} wrote:</div> 
 
      <input type='text' v-model='comment.message'/> 
 
      <div class="options" v-if="displayOptions"><button>Do something</button></div> 
 
     </div>`, 
 
    data: function(){ 
 
     return { 
 
      displayOptions: false 
 
     } 
 
    } 
 
}); 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
     comments: [ 
 
      {id: 0, author: 'Bob', message: "This is my comment #1"}, 
 
      {id: 1, author: 'Frank', message: "Comment #2"}, 
 
      {id: 2, author: 'Joe', message: "One more comment in this page (#3)"} 
 
     ] 
 
    } 
 
});

body { 
 
    margin: 20px; 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
} 
 
.comment { 
 
    padding: 5px; 
 
} 
 
.comment .author { 
 
    display: inline-block; 
 
    width: 120px; 
 
    text-align: right; 
 
} 
 
.comment input { 
 
    display: inline-block; 
 
    width: 240px; 
 
} 
 
.comment .options { 
 
    display: inline-block; 
 
}

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script> 
 
<body> 
 
    <div id="app"> 
 
     <p>List of comments:</p> 
 
     <comment-block :comment="comment" v-for="comment in comments"></comment-block> 
 
    </div> 
 
</body>

Примечание: Кнопка "сделай что-нибудь" не делает ничего еще, кроме просто показ, для этого примера.

Это один из способов сохранить свет интерфейса, но, как уже упоминалось в сообщении блога анализа производительности выше, эта микро-оптимизация действительно не имеет значения, если у вас не возникнут некоторые проблемы.

источник

2016-12-14 10:27:15 Mani

Vue.js: Поделитесь компонентом «Перемещение» вокруг, вместо того, чтобы копировать его?

ответ

Смежные вопросы