要素 UI の回転ランタン ボタンのスタイルを変更します。アウトライン: なし。効果はありません。scss パブリック パスを使用します。scss のスタイルは @extend を継承します。vue は、タブ切り替えまたはページ ジャンプ時に最後のインターフェイス リクエストをキャンセルします。

 要素 UI カルーセル ボタンのスタイルを変更する

 .el-carousel__arrow {
    width: 30px;
    height: 30px;
    top: 55%;
    background-color: transparent;
    .el-icon-arrow-right:before {
      content: none;
    }
    .el-icon-arrow-left:before {
      content: none;
    }
  }
  .el-carousel__arrow--left {
    background: url(../../../images/left-checked.png);
    background-size: 100%;
  }
  .el-carousel__arrow--right {
    background: url(../../../images/right-checked.png);
    background-size: 100%;
  }
}

 

scssパブリックパスの使用

$commonUrl: "../../../images/";

background: url($commonUrl+'down.png') no-repeat left center;

ただし、これの欠点は、vscode プラグインではアイコンが表示されないことです。

VSCode 画像プレビュー プラグイン 画像プレビュー

 

 ボタンのテキストを変更し、現在の要素のテキストを変更します

 <em @click="togglebox($event)">收缩</em>


 togglebox:function(e){
                this.boxshow = !this.boxshow;
				if(this.boxshow==true){
					e.toElement.innerHTML="收缩";
				}else{
					e.toElement.innerHTML="展开";
				}
        },

scss スタイルの継承 @extend

<style lang="scss" scoped>

.blue {
  cursor: pointer;
  min-width: 80px;
  color: #fff;
  font-size: 14px;
  border-radius: 6px !important;
}

.blues {
  @extend .blue;
  height: 38px;

}
</style>

Vue はタブ切り替えまたはページジャンプ時に最後のインターフェースリクエストをキャンセルします

main.jsリクエストインターセプターに書き込む

window._axiosPromiseArr = []; // axios中设置放置要取消的对象
Vue.prototype.$http.interceptors.request.use(config => {
  const token = localStorage.getItem("header");
  if (token) {
    config.headers.Authorization = token;
  }
  // console.log('config的路径,参数 :>> ', config.url,config.data);
 
  if (
    config.url.indexOf("getTradeSetting") > -1 ||
    config.url.indexOf("address/list") > -1 ||
    config.url.indexOf("dic/data_dic") > -1
  ) {
    //配置请求不取消
    return config;
  }
  config.cancelToken = new axios.CancelToken(cancel => {
    window._axiosPromiseArr.push({ cancel });
  });
  return config;
});

router.js ルーティング構成ファイル内

router.beforeEach((to, from, next) => {
  //匹配元路由中的meta字段,如果设置了需要校验用户信息
  //如果用户本地没有登录状态,跳转到登录页面
  window._axiosPromiseArr.forEach((ele, index) => {
    ele.cancel(); // 路由跳转之前,清空(终止)上一个页面正在请求的内容
    // 清空请求的参数 清空请求的参数
    delete window._axiosPromiseArr[index];
  });
 
});

特定の Vue ファイル内のタブ スイッチをクリックします。

toggleTabs() {

    window._axiosPromiseArr.forEach((ele, index) => {
    ele.cancel(); // 路由跳转之前,清空(终止)上一个页面正在请求的内容
    // 清空请求的参数 清空请求的参数
    delete window._axiosPromiseArr[index];
  });}

vscodeのショートカットキー

Ctrl+Shift+L または Ctrl+F2 すべての文字を選択 - 現在の選択範囲のすべての文字を選択します 

Ctrl+Shift+C でターミナルを開きます

Ctrl+Shift+` で新しいターミナルを作成します

アウトライン: なし; 効果はありません

input {
    
        outline: none;
     
    }

 解決

  input {
      float: none;
      &:focus{
        border-color: #dcdfe6;
        outline: none;
        box-shadow:none;
      }
    }

おすすめ

転載: blog.csdn.net/aZHANGJIANZHENa/article/details/130510770