Vue.js로 만든 탭 입력 형식

탭 입력 창 만들기

웹 서비스에 태그를 자주 입력하는 기능이 좋다고 생각합니다.Qita에도 입력하는 곳이 있다고 생각해요.Qita에 해시태그를 만들면 입력한 언어의 배경이 바뀌어 느낌이 좋다.
자기도 해보고 싶어, 해보고 싶어.그제야 Qita 같은 것만 참고하면 된다는 걸 깨달았어요. 좋은 이해 방법은 아니지만 이런 실상이 있다고 이해해 주셨으면 좋겠어요.

액션

동작의 모양.양식이 적당한 것을 용서해 주십시오.

조금 이해하기 어렵지만 리턴 키로 라벨을 정했다.옆에 있는 x를 누르면 태그가 삭제됩니다.

이루어지다

<div class="text-area">
  <div class="tag-list">
    <span class="tag" v-for="tag in tags">
      {{tag.name}}
      <span class="delete" v-on:click="delete(this)">x</span>
    </span>
  </div>
  <div class="input-area" contenteditable=true v-on:keydown.enter="decide_tag">
  </div>
</div>

.text-area{
  width: auto;
  height: 20px;
  background: white;
}

.tag-list{
  display: inline-block;
  margin-top: 0px;
}

.input-area{
  display: inline-block;
  width: 100px;
  height: 20px;
  background: white;
  &:focus{
    outline: 0;
  }
}

.tag {
  padding: 2px;
  background: yellow;
}

.delete {
  cursor: pointer;
}

Vue.js를 사용했기 때문에 지시가 있습니다.
키모는 탭 목록과 입력 창을 분리합니다. 그러면 탭이 증가하면 입력 창이 자동으로 오른쪽으로 미끄러집니다.input 태그div를 사용하지 않는 contenteditable는 true로 설정하여 입력할 수 있습니다.이렇게 하면 입력 형식이 아닌 것 같아서 전체 라벨의 배경을 하얗게 만들었다.

$(document).ready(function() {
  var tag = new Vue({
    el: ".text-area",
    data: {
      tags: []
    },
    methods: {
      decide_tag: function(e) {
        this.tags.push({
          name: e.target.textContent
        });
        e.target.textContent = "";
      },
      delete: function(vm) {
        this.tags.splice(vm.$index,1);
      }
    }
  });
});

Vue 설치는 간단합니다.data의 속성에 라벨 일람을 배열하고 리턴 버튼을 눌렀을 때 불이 났다decide_tag.태그를 삭제하면 태그의 정렬push이 삭제됩니다.
좋지 않은 점splice은 라벨input을 사용하지 않았기 때문에 사용할 수 없고, v-model라면 v-modeldecide_tag에서 데이터를 얻지 못한다.ViewModel에서 View를 참조하는 것은 좋지 않기 때문에 디자인이 좋지 않다고 말할 수 있다. (그럼 하자.)
왜 사용하지 않으려고e.target.textContent했을까input하면input덮어쓰기input에 라벨을 붙여 숨겨야 하기 때문input,아무래도 마음에 들지 않는다.그렇긴 한데 디자인이 안 좋은 실크라서 지금 커버하는 방법이 좋을 것 같아요.
input을 사용하지 않았기 때문에 form의submit를 사용할 수 없습니다.태그를 입력하자마자 저장하는 방침이 아니라면input 사용하는 것이 솔직하다.

끝맺다

지금까지 Vue였습니다.js로 만든 탭 입력 형식입니다.자기가 썼지만 별로 좋지 않아요.나는 입력한 땅의 방향 오른쪽에서 미끄러지는 곳이 매우 잘 되어 있다고 생각한다.
나는 더 합리적인 방법으로 복수를 하고 싶다.