[Vuejs]-How can I customize compiling options for 'gulp-vue-single-file-component'?

by

0👍

It worked when i modified my.vue file as

            <template>
              <div class="gauge-panel">
                  <svg viewBox="0 0 94 80">
                    <path
                          d="M13.658,79.962l2.119-2.121a43.5,43.5,0,1,1,61.433-.062L79.33,79.9a46.5,46.5,0,1,0-65.672.062Z"
                          :fill="color"></path>
                  </svg>
                  <div class="gauge-value" v-bind:style="{ fontSize: fontSize + 'px' }">{{value}}</div>
                  <div class="gauge-text">{{caption}}</div>
              </div>
            </template>

            <script>
            import Vue from "vue"
            export default Vue.component(  {
              props: ['color', 'value', 'caption'] ,
              computed: {
                // a computed getter
                fontSize: function () {
                  // `this` points to the vm instance
                  var fontSize = 36;
                        var valueLength = this.value.toString().length;
                        if( valueLength > 5 ) {
                            fontSize = 26;
                        } else if( valueLength > 3 ) {
                            fontSize = 28;
                        }
                        return fontSize;
                }
              }
            })
            </script>
            <style></style>
👤Charu

Leave a comment