vue elementui button style modification

Vue.js is a JavaScript framework for building interactive web applications, and ElementUI is a UI framework based on Vue.js.

As one of the commonly used front-end UI frameworks, ElementUI provides many components that are convenient for developers to use. The button component is what we usually use, but sometimes the default button style may not meet the project or needs. requirements, at this time we need to modify the button style. This article will introduce how to use styles to modify button styles.

The style of the button in ElementUI can be modified in the following ways:

1. Modify through the class name

The button component of ElementUI has several default style classes for developers to use Use, such as primary, danger, warning, info, success, etc. We can change the color and style of the button through these class names.

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

The type here is the style class name of the button.

We can also modify the style by customizing the class name:

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

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

2. Modify through inline style

It is also feasible to modify button style through inline style This method can be achieved by adding the style attribute to the button component:

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

3. By modifying the global style

If you need to apply it to all buttons in the entire project, we can modify the ElementUI Global styles are implemented. In Vue, we can modify the style of ElementUI by creating a new .scss file and introducing it into the project entry file.

The following is an example of modifying the button style of 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);
    }
  }
}

In the above example, we change the theme color and button rounded size by modifying the global variables of ElementUI, and then define our own button style, and added dynamic effects when hovering. Use a custom class name to overwrite the original style of ElementUI to modify the style of the button.

Summary

The above are several ways to modify the style of the ElementUI button component. We can use these methods to implement customized styles. You only need to choose the corresponding modification method according to specific needs to achieve better results on the page.

The above is the detailed content of vue elementui button style modification. For more information, please follow other related articles on the PHP Chinese website!