JSFiddle - React, Tailwind, and code Playground

by xu xiaofei

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<el-tooltip content="Fruit" placement="bottom" effect="light">
  <el-button v-if="type==='apple'" class="center">apple</el-button>
  <el-button v-if="type==='orange'" class="center">orange</el-button>
  <el-button v-if="type==='watermelon'" class="center">watermelon</el-button>
  <el-button v-else class="center"></el-button>
</el-tooltip>

</div>

SCSS

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");

.center{
  position:absolute;
  height:35px;
  width:150px;
  top:0;
  left:0;
  bottom:0;
  right:0;
  margin:auto;
}

Babel + JSX

new Vue({
data:{
  	type:'',
},created:function(){
	setTimeout(()=>{
    this.type='apple';
  },1000)
}
}).$mount('#app')