Vue

by marketingaddict8

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.7/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<div id="app">
  <v-template></v-template>
</div>

CSS

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

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

h1 {
  font-size: 36px;
}

.el-popover {
  padding: 30px;
  background-color: #999;
}

.el-slider {
  margin: 20px;
  color: #fff;
}

Vue

Vue.component('v-h1', {
	data() {
  	return {
      fontSize: "",
      headlineText: "",
      headlineTextContent: ["Example 1", "Example 2", "Example 3"],
      }
  },
  created() {
    this.headlineText = this.headlineTextContent[
      _.random(this.headlineTextContent.length - 1)
    ];
    this.fontSize = _.random(36, 80);
  },
  template: `<div>
  <el-popover
    ref="popover"
    placement="top"
    
    content="Font Size"
    width="500px"
    trigger="click">
      <div class="block">
        <span>Headline:</span>
        <el-input v-model="headlineText"></el-input>
      </div>
      <div class="block">
        <span>Font Size:</span>
        <el-slider v-model="fontSize"></el-slider>
      </div>
    </el-popover>
    <h1 v-popover:popover v-bind:style="{ fontSize: fontSize + 'px' }">
      <slot>{{ headlineText }}</slot>
    </h1>
    </div>`
});

Vue.component('v-button', {
  template: '<button>Example Button</button>'
});

Vue.component('v-template', {
  template: `<div>
  <v-h1></v-h1>
  <v-button></v-button>
  </div>`
});

new Vue({
  el: "#app",
  data: {
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  }
})