文字サイズがヌルヌルのレスポンシブ「vue-responsive-text」で遊んでみた

by kabanoki

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-responsive-text.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-slider-component@latest/dist/vue-slider-component.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-slider-component@latest/theme/default.css">
<div id="app">
    <div
    :style="{
      width: divWidth + '%',
      border: '1px solid #222',
      padding: '50px',
      marginBottom: '40px',
      marginTop: '40px'
    }"
  >
  <vue-responsive-text transition="100">{{msg}}</vue-responsive-text>
  </div>
  <div>
    <vue-slider
      ref="slider"
      v-model="divWidth"
    ></vue-slider>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

CSS

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

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

Vue

const VueSlider  = window['vue-slider-component'];
const VueResponsiveText = window.vueResponsiveText.default;

let app = new Vue({
  el: '#app',
  data: {
    msg: 'Hellow World',
    divWidth:50
  },
  components: {
    VueResponsiveText,
    VueSlider,
  },
  computed: {
    getWidth: function(){
      return this.divWidth + '%';
    }
  }
});