-1

Нужно узнать отступы сверху и слева с помощью Vuejs и записать в переменную. Отступы, на подобии pageX и pageY из объекта event.

let i = 1;
var block = document.getElementById('draw-area');
block.onclick = function(e) {
  var point = document.createElement('svg');
  point.className = 'point';
  point.style.left = e.pageX + 'px';
  point.style.top = e.pageY + 'px';
  block.appendChild(point);
  console.log(e.pageX + '/' + e.pageY)
};
new Vue({
    el: '#app',
    data: {
        work: []
    },
    methods: {
        Save: function(e) {
            this.work.push({
                number: i++,
                left: e.pageX,
                right: e.pageY
            })   
        },
        Delete: function() {
            this.work.splice(this.work.indexOf(1))
        }
    }
})
* {
    padding: 0;
    margin: 0;
    outline: 0;
    font-family: 'Cormorant Garamond', serif;
    list-style-type: none;
    font-weight: bold;
}
#app {
    position: relative;
}
#draw-area {
    width: 80%;
    height: 788.5px;
    float: left;
    position: relative;
    background-color:#269;
    background-image: -webkit-linear-gradient(white 2px, transparent 2px),
    -webkit-linear-gradient(left, white 2px, transparent 2px),
    -webkit-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
    -webkit-linear-gradient(left, rgba(255,255,255,.3) 1px, transparent 1px);
    background-image: -o-linear-gradient(white 2px, transparent 2px),
    -o-linear-gradient(left, white 2px, transparent 2px),
    -o-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
    -o-linear-gradient(left, rgba(255,255,255,.3) 1px, transparent 1px);
    background-image: linear-gradient(white 2px, transparent 2px),
    linear-gradient(to right, white 2px, transparent 2px),
    linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
    linear-gradient(to right, rgba(255,255,255,.3) 1px, transparent 1px);
    background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
    cursor: pointer;
}
.output {
    float: right;
    width: 20%;
    height: 700px;
}
.output__saved-work {
    height: 600px;
    margin-bottom: 70px;
    overflow: hidden;
    overflow-y: auto;
}
.output__btn {
    width: 47.6%;
    font-size: 22px;
    font-weight: bold;
    padding: 20px;
    float: left;
    background: none;
    cursor: pointer;
    border: 2px solid transparent;
}
.output__end {
    transition: all 0.3s linear;
}
.output__start {
    margin-right: 15px;
    transition: all 0.3s linear;
}
.output__end:hover {
    border: 2px solid #f80000;
    transition: all 0.3s linear;
}
.output__start:hover {
    border: 2px solid #145214;
    transition: all 0.3s linear;
}
.output h1 {
    text-align: center;
    padding-top: 20px;
}
.list {
    margin: 15px 5px;
    font-size: 20px;
}
.list li:first-child {
    font-size: 1.8em; 
    float: left;
    clear: left;
}
.list li:last-child {
    margin-left: 35px;
    padding-top: 12px;
}
.point {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #000;
  border-radius: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Draw</title>
    <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond" rel="stylesheet">
    <link rel="stylesheet" href="assets/style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
</head>
<body>
  <div id="app">
     <section id="draw-area"></section>
     <section class="output">
         <h1>Сохранённые работы</h1>
         <div class="output__saved-work">
             <ul class="list" v-for="works in work">
                 <li>{{ works.number }}</li>
                 <li>{{ works.svg }}</li>
             </ul>
         </div>
         <button class="output__btn output__start" @click="Save()">Сохранить</button>
         <button class="output__btn output__end" @click="Delete()">Удалить</button>
     </section>
  </div>
</body>
</html>

7
  • Уточните вопрос, что за отступы? 31 июл 2017 в 11:17
  • уточните, пожалуйста, отступы от чего? 31 июл 2017 в 11:20
  • @MaximZasorin на подобии pageX и pageY в js. Сразу скажу - они в vue не работают
    – KEZOV
    31 июл 2017 в 11:54
  • @Кенан, приведите пример кода, как вы делали, и у вас не получилось. 31 июл 2017 в 13:34
  • pageX свойство события мыши, в vue тот же самый доступ к событию
    – Grundy
    31 июл 2017 в 14:44

1 ответ 1

1

Ошибка в том, что надо передавать объект события в обработчик:

  1. $event,

    <button class="output__btn output__start" @click="Save($event)">Сохранить</button>
    
  2. либо указывать в разметке имя функции, а не выражение

    <button class="output__btn output__end" v-on:click="Delete">Удалить</button>
    

Немного документации

Пример:

let i = 1;
var block = document.getElementById('draw-area');
block.onclick = function(e) {
  var point = document.createElement('svg');
  point.className = 'point';
  point.style.left = e.pageX + 'px';
  point.style.top = e.pageY + 'px';
  block.appendChild(point);
  console.log(e.pageX + '/' + e.pageY)
};
new Vue({
  el: '#app',
  data: {
    work: []
  },
  methods: {
    Save: function(e) {
      console.log('save', e.pageX, e.pageY);
      this.work.push({
        number: i++,
        left: e.pageX,
        right: e.pageY
      })
    },
    Delete: function(e) {
      console.log('delete', e.pageX, e.pageY);
      this.work.splice(this.work.indexOf(1))
    }
  }
})
* {
  padding: 0;
  margin: 0;
  outline: 0;
  font-family: 'Cormorant Garamond', serif;
  list-style-type: none;
  font-weight: bold;
}

#app {
  position: relative;
}

#draw-area {
  width: 80%;
  height: 788.5px;
  float: left;
  position: relative;
  background-color: #269;
  background-image: -webkit-linear-gradient(white 2px, transparent 2px), -webkit-linear-gradient(left, white 2px, transparent 2px), -webkit-linear-gradient(rgba(255, 255, 255, .3) 1px, transparent 1px), -webkit-linear-gradient(left, rgba(255, 255, 255, .3) 1px, transparent 1px);
  background-image: -o-linear-gradient(white 2px, transparent 2px), -o-linear-gradient(left, white 2px, transparent 2px), -o-linear-gradient(rgba(255, 255, 255, .3) 1px, transparent 1px), -o-linear-gradient(left, rgba(255, 255, 255, .3) 1px, transparent 1px);
  background-image: linear-gradient(white 2px, transparent 2px), linear-gradient(to right, white 2px, transparent 2px), linear-gradient(rgba(255, 255, 255, .3) 1px, transparent 1px), linear-gradient(to right, rgba(255, 255, 255, .3) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
  cursor: pointer;
}

.output {
  float: right;
  width: 20%;
  height: 700px;
}

.output__saved-work {
  height: 600px;
  margin-bottom: 70px;
  overflow: hidden;
  overflow-y: auto;
}

.output__btn {
  width: 47.6%;
  font-size: 22px;
  font-weight: bold;
  padding: 20px;
  float: left;
  background: none;
  cursor: pointer;
  border: 2px solid transparent;
}

.output__end {
  transition: all 0.3s linear;
}

.output__start {
  margin-right: 15px;
  transition: all 0.3s linear;
}

.output__end:hover {
  border: 2px solid #f80000;
  transition: all 0.3s linear;
}

.output__start:hover {
  border: 2px solid #145214;
  transition: all 0.3s linear;
}

.output h1 {
  text-align: center;
  padding-top: 20px;
}

.list {
  margin: 15px 5px;
  font-size: 20px;
}

.list li:first-child {
  font-size: 1.8em;
  float: left;
  clear: left;
}

.list li:last-child {
  margin-left: 35px;
  padding-top: 12px;
}

.point {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #000;
  border-radius: 100%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Draw</title>
  <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <section id="draw-area"></section>
    <section class="output">
      <h1>Сохранённые работы</h1>
      <div class="output__saved-work">
        <ul class="list" v-for="works in work">
          <li>{{ works.number }}</li>
          <li>{{ works.svg }}</li>
        </ul>
      </div>
      <button class="output__btn output__start" @click="Save($event)">Сохранить</button>
      <button class="output__btn output__end" v-on:click="Delete">Удалить</button>
    </section>
  </div>
</body>

</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.