Vue

by WILLIAM CORREA

HTML

<div id="app">
  <app-speecher :text="text"></app-speecher>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

const AppSpeecher = {
  name: 'AppSpeecher',
  template: '<div><p v-html="text"></p><button @click="speak">SPEAK</button></div>',
  props: {
    text: {
      type: String
    }
  },
  methods: {
    speak () {
      window.alert(window.getSelection().toString())
    }
  }
}

new Vue({
  el: "#app",
  components: { AppSpeecher },
  data: () => ({
  	text: 'Mussum Ipsum, cacilds vidis litro abertis. Si num tem leite então bota uma pinga aí cumpadi! Admodum accumsan disputationi eu sit. Vide electram sadipscing et per. Detraxit consequat et quo num tendi nada. In elementis mé pra quem é amistosis quis leo.'
  })
})