vue elementui 버튼 스타일 수정

Vue.js는 대화형 웹 애플리케이션을 구축하기 위한 JavaScript 프레임워크인 반면 ElementUI는 Vue.js를 기반으로 하는 UI 프레임워크입니다.

일반적으로 사용되는 프런트엔드 UI 프레임워크 중 하나인 ElementUI는 개발자가 사용하기 편리한 많은 구성 요소를 제공합니다. 버튼 구성 요소는 우리가 일반적으로 사용하는 구성 요소이지만 때로는 기본 버튼 스타일이 프로젝트 요구 사항을 충족하지 못할 수도 있습니다. 때로는 버튼 스타일을 수정해야 할 때도 있습니다. 이 문서에서는 스타일을 사용하여 버튼 스타일을 수정하는 방법을 소개합니다.

ElementUI의 버튼 스타일은 다음과 같은 방법으로 수정할 수 있습니다.

1. 클래스 이름으로 수정

ElementUI의 버튼 구성 요소에는 기본, 위험, 경고 등 개발자가 사용할 수 있는 여러 기본 스타일 클래스가 있습니다. 정보, 성공 잠깐만요. 이러한 클래스 이름을 통해 버튼의 색상과 스타일을 변경할 수 있습니다.

<el-button type="primary">primary</el-button>
<el-button type="danger">danger</el-button>
<el-button type="warning">warning</el-button>
<el-button type="info">info</el-button>
<el-button type="success">success</el-button>

여기서의 유형은 버튼의 스타일 클래스 이름입니다.

클래스 이름을 사용자 정의하여 스타일을 수정할 수도 있습니다:

<el-button class="my-btn">Custom</el-button>

.my-btn{
  background-color: #409EFF;
  color: #fff;
}

2. 인라인 스타일을 통해 수정

인라인 스타일을 통해 버튼 스타일을 수정하는 것도 가능한 방법입니다. 버튼 구성 요소에 스타일 속성을 추가하기만 하면 됩니다. :

<el-button style="background-color: #409EFF; color: #fff;">Custom</el-button>

3. 전역 스타일을 수정하여

전체 프로젝트의 모든 버튼에 적용해야 하는 경우 ElementUI에서 전역 스타일을 수정하면 됩니다. Vue에서는 새로운 .scss 파일을 생성하고 이를 프로젝트 항목 파일에 도입하여 ElementUI의 스타일을 수정할 수 있습니다.

다음은 ElementUI의 버튼 스타일을 수정한 예입니다.

// 引入ElementUI的sass全局变量和mixin
@import "~element-ui/packages/theme-chalk/src/common/var.scss";
@import "~element-ui/packages/theme-chalk/src/mixins/mixins.scss";

// 改写ElementUI的变量
$--color-primary: #409EFF;
$--border-radius-base: 4px;

// 自定义按钮样式
.el-button {
  &.my-btn {
    background-color: $--color-primary;
    border: none;
    box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 0.45);
    color: #fff;
    &:hover {
      background-color: #66b1ff;
      box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 0.65);
    }
  }
}

위의 예에서는 ElementUI의 전역 변수를 수정하여 테마 색상과 버튼 라운드 크기를 변경한 후 자체 버튼 스타일을 정의하고 동적 효과. 사용자 정의 클래스 이름을 사용하여 ElementUI의 원래 스타일을 덮어쓰고 버튼 스타일을 수정합니다.

요약

위는 ElementUI 버튼 구성 요소의 스타일을 수정하는 여러 가지 방법을 사용하여 사용자 정의 스타일을 구현할 수 있습니다. 페이지에서 더 나은 결과를 얻으려면 특정 요구에 따라 해당 수정 방법을 선택하기만 하면 됩니다.

위 내용은 vue elementui 버튼 스타일 수정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!