【Vue】引入自定义外部js

最新推荐文章于 2025-10-28 21:21:09 发布

原创最新推荐文章于 2025-10-28 21:21:09 发布 · 3.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #引入js #引入外部js #export js文件

Vue 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何在Vue项目中引入并使用自定义的外部JS文件。首先，将JS文件放在static目录下，并确保包含export语句。然后，在Vue组件的script标签中导入并使用该JS文件，例如在执行删除操作时调用其中的方法。同时，如果需要在DOM加载时即调用JS方法，如判断用户权限来控制按钮显示，可以在Vue的methods中调用相应方法。

1、定义js文件，这里是放在static下的js文件下

代码如下：


// 判断权限
function hasPermissionJs(val) {
  var restoredSession = JSON.parse(sessionStorage.getItem('userInfo'));
  var roles = restoredSession.user.roles;
  for(var i=0; i<roles.length; i++){
    for(var j=0; j<roles[i].authorities.length; j++){
      if(val == roles[i].authorities[j].mtag){
        return true;
      }
    }
  }
  if(restoredSession.isAdmin==true){
    return true;
  }
  return false;
}

// 弹框提示
function tips(this_, message_, type_){
  this_.$message({
    message: message_,
    type: type_
  });
}

export { //很关键
  hasPermissionJs,
  tips,
}

2、在界面的script标签中进行引入即可使用

<script>
import {hasPermissionJs, tips} from '../../static/js/my.js'
</script>

例如执行删除操作时，调用tips，代码如下：

    deleteAction(content, arr) {
      this.$confirm(content, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var params = new URLSearchParams();
          params.append('uid', arr);
          this.$http.post("/api/v1/user/delete", params)
            .then(response => {
              if(response.data.data == 'deleteAdminUser'){
                tips(this, '非法操作，不能删除admin用户！', 'error');
                return;
              }
              if(response.data.data == 'deleteYourself'){
                tips(this, '非法操作，不能删除自己！', 'error');
                return;
              }
              tips(this, '删除成功！', 'success');
              this.findPagesByCondition();
            })
        }).catch(() =>{
          // 取消
        });
    }

3、注意事项

① js文件中的export必须要写！！！

② 如果引入的方法是要在DOM加载时就调用的，例如用户列表页面中，有删除、编辑等操作按钮，根据权限进行展示与否的判断，代码如下：

<el-table-column label="操作">
      <template slot-scope="scope">
        <el-button @click="deleteUser(scope.row)" type="text" v-if="hasPermission('user:delete')">删除</el-button>
        <el-button @click="userForm(scope.row)" type="text" v-if="hasPermission('user:edit')">编辑</el-button>
        <el-button @click="userVersionForm(scope.row)" type="text" v-if="hasPermission('user:dataAssign')">分配数据权限</el-button>
      </template>
</el-table-column>

那么此时需要在methods中这样写，就可以在页面加载时就判断权限：

methods: {
    // 判断权限
    hasPermission: hasPermissionJs,
    
    }