JSFiddle - React, Tailwind, and code Playground

by ktsn

HTML

<script src="https://rawgit.com/yyx990803/vue/master/dist/vue.js"></script>
<ul>
  <li v-for="(i, value) in list">
    <thumb :value="value.text"></thumb>
    <input type="text" v-model="value.text">
    <button @click="up(i)">up</button>
    <button @click="down(i)">down</button>
  </li>
</ul>
<button @click="add">add</button>

CSS

canvas {
  background-color: #fff;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li > * {
  margin-bottom: 10px;
  vertical-align: middle;
}

JavaScript

var Thumb = {
	props: {
  	value: {
      type: String,
      required: true
    }
  },
  
  data: function() {
    return {
      drawCount: 0
    }
  },

  template: '<canvas width="50" height="50"></canvas>',
  
  ready: function() {
    this.draw(this.value)
  },
  
  methods: {
    draw: function(value) {
    	this.drawCount += 1
    
    	var width = this.$el.width
      var height = this.$el.height
      
      var text = value + ' ' + Math.floor(Math.random() * 100)
      
      console.log(text)
      
      var ctx = this.$el.getContext('2d')
			ctx.textBaseline = 'top'
      ctx.font = '14px sans-serif'
      ctx.clearRect(0, 0, width, height)
      ctx.fillText(text, 0, 0)
      ctx.fillText(this.drawCount, 0, 20)
    }
  },
  
  watch: {
    value: 'draw'
  }
}

new Vue({
  el: 'body',
  data: {
    list: [
      { text: 'one' }, 
      { text: 'two' }, 
      { text: 'three' }
    ]
  },
  methods: {
  	move: function(index, offset) {
      var target = this.list.splice(index, 1)
      var to = Math.max(index + offset, 0)
      this.list.splice(to, 0, target[0])
    },
  
    up: function(index) {
			this.move(index, -1)      
    },
    
    down: function(index) {
    	this.move(index, 1)
    },
    
    add: function() {
      this.list.push({
        text: 'new'
      })
    }
  },
  components: {
  	thumb: Thumb
  }
})