js 实现vue template的拼接,解决IE无法识别vue拼接符号``的问题

时间:2021-08-02
本文章向大家介绍js 实现vue template的拼接,解决IE无法识别vue拼接符号``的问题,主要包括js 实现vue template的拼接,解决IE无法识别vue拼接符号``的问题使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

今天处理一下IE的兼容性问题,发现之前的开关组件https://www.cnblogs.com/ifeelthecall/p/15066065.html 无法兼容IE浏览器

看了一下报错:无法识别vue的``拼接符号,那么可以尝试使用原始的拼接方式:

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

然后就出来了:

本文来自博客园,作者:不如饲猪,转载请注明原文链接:https://www.cnblogs.com/ifeelthecall/p/15090943.html

原文地址:https://www.cnblogs.com/ifeelthecall/p/15090943.html