[JavaScript知识库]ElementUI之steps步骤条实现点击跳转，解决‘.native‘ modifier on ‘v-on‘ directive is deprecated问题

官方文档：https://element.eleme.cn/#/zh-CN/component/steps

为 el-step 添加 @click.native 属性，实现点击跳转：

<el-steps :active="active" finish-status="success" align-center>
    <el-step @click.native="on_click(0)" title="步骤 1"></el-step>
    <el-step @click.native="on_click(1)" title="步骤 2"></el-step>
    <el-step @click.native="on_click(2)" title="步骤 3"></el-step>
    <el-step @click.native="on_click(3)" title="步骤 4"></el-step>
</el-steps>

对应js这样写：

export default {
    data() {
      return {
        active: 0
      };
    },

    methods: {
      // 步骤条
    on_click(e){
      console.log(e);
      if(e != "" || e != null){ this.active = e }
      }
    }
  }

————————————成功可以不看下文————————————

如果出现了以下问题：

原因是 '.native' 修饰符在vue3中被弃用了

解决方法：把 '.native' 换成?'.enter'

<el-steps :active="active" finish-status="success" align-center>
    <el-step @click.enter="on_click(0)" title="步骤 1"></el-step>
    <el-step @click.enter="on_click(1)" title="步骤 2"></el-step>
    <el-step @click.enter="on_click(2)" title="步骤 3"></el-step>
    <el-step @click.enter="on_click(3)" title="步骤 4"></el-step>
</el-steps>

成功解决：

原创不易，转载务必注明出处。