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;
}

button {
  padding: 20px;
  border: 0;
  border-radius: 3px;
  background-color: #888;
  color: #fff;
}
.template {
  padding: 20px;
}

Vue

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

Vue.component('v-button', {
	data() {
  	return {
      buttonText: "",
      buttonTextContent: ["Button One", "Button Two", "Button Three"],
      bgColor: "",
      bgColors: ["#3388ff", "#ff3333", "#33ffaa"],
      }
  },
  created() {
    this.buttonText = this.buttonTextContent[
      _.random(this.buttonTextContent.length - 1)
    ];
    this.bgColor = this.bgColors[
      _.random(this.bgColors.length - 1)
    ];
  },
  template: `<div>
  <el-popover
    ref="popover"
    placement="top"
    content=""
    width="500px"
    trigger="click">
      <div class="block">
        <span>Text:</span>
        <el-input v-model="buttonText"></el-input>
      </div>
    </el-popover>
    <button v-popover:popover :style="{backgroundColor: bgColor}"><slot>{{ buttonText }}</slot></button>
    </div>`
});

Vue.component('v-template', {
	data() {
  	return {
    	bgColor: "",
      bgColors: ["#3388ff", "#ff3333", "#33ffaa"]
		}
  },
  created() {
    this.bgColor = this.bgColors[
      _.random(this.bgColors.length - 1)
    ];
  },
  template: `<div class="template" :style="{backgroundColor: bgColor}">
  <v-h1></v-h1>
  <v-button></v-button>
  </div>`
});

new Vue({
  el: "#app",
  data: {
  },
  methods: {
  	
  }
})