js 实现vue template的拼接，解决IE无法识别ES6的模板字符串的反引符号```的问题

今天处理一下IE的兼容性问题，发现之前的vue开关组件无法兼容IE浏览器

看了一下报错：无法识别ES6的模板字符串的反引符号``，那么可以尝试转换为ES5的拼接方式：

    Vue.component('m-switch', {
　 //修改前

    // template: `<span :class="['m-switch','m-switch-' + type, { active: booleanVal,'is-disabled': disabled,'is-small': small }] "@touchend.prevent="change" @mouseup.prevent="change"></span>`,

 

　　 //修改后

      template: '<span :class="[\'m-switch\', \'m-switch-\' + type, {active: booleanVal, \'is-disabled\': disabled, \'is-small\': small}]" @touchend.prevent="change" @mouseup.prevent="change"></span>',
      model: {
        prop: 'value',
        event: 'change'
      },
      props: {
        value: {
          type: [Boolean, Number, String],
          default: false
        },
        disabled: Boolean,
        type: {
          type: String, // 颜色类型，可选['primary', 'minor', 'wanr'， 'danger']
          default: 'primary'
        },
        pid: [String, Number],
        small: Boolean // 是否小开关
      },
      computed: {
        booleanVal:function() {
          return Boolean(Number(this.value));
        }
      },
      methods: {
        change:function() {
          if (!this.disabled) {
            this.$emit('change', !this.value)
            this.$emit('switch', {
              status: Number(!this.value),
              id: this.pid
            })
          }
        }
      }
    })

然后就出来了：