Style code summary

1. The pop-up window is displayed in the center. If the content is too high, it scrolls automatically.

 .dialog /deep/.el-dialog {
   display: flex;
   flex-direction: column;
   margin: 0 ! important;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   max-height: calc(100% - 200px);
   max-width: calc(100% - 100px);
   .el-dialog__body {
     flex: 1;
     overflow: auto; }}Copy the code

Encounter Problem 1

TypeError: this.getOptions is not a function: Syntax Error: TypeError: this.getOptions is not a function

The sass-Loader version is too high.

# NPM uninstall sass-loader # NPM install [email protected] --save-devCopy the code

After uninstallation, reinstall the software to resolve the problem.

Start writing a simple global style SCSS file

• Folder path:

| - SRC | - assets | -- -- -- -- -- SCSS | -- -- -- -- -- - elementStyle / / each component style override | -- -- -- -- -- -- -- the button. The SCSS | -- -- -- -- -- -- -- the checkbox, SCSS | -- -- -- -- -- -- -- index. The SCSS | -- -- -- -- -- -- -- input, SCSS | -- -- -- -- -- -- -- inputNumber. SCSS | -- -- -- -- -- -- -- radio, SCSS | -- -- -- -- -- - style. The style of SCSS / / output file | -- -- -- -- -- - varible. SCSS / / variables defined and public mixinsCopy the code

Of course, this can be adjusted to your liking

varible.scss:

/************* Font size *******************/
$titleMain-font-size: 28px; / / h1 headlines
$titleSub-font-size: 24px; // h2 secondary title
$large-font-size: 18px; / / h2 headings
$medium-font-size: 16px; // h3 subtitle
$small-font-size: 14px; / / h4 body
$mini-font-size: 12px;

/************* Font type *****************/
$font-family: "Microsoft YaHei", sans-serif; // Chinese font

/ * * * * * * * * * color * * * * * * * * * * /
$white-color: #fff; / / white
$black-color: # 000; / / black
$pagination-background-color: #bdcbe5; // Paging background color

/ / the main color
$primary-light-color: #fd7560;
$primary-color: #155bd4;
$primary-deep-color: #fd3415;
/ / success
$success-light-color: #26d2be;
$success-color: #2da641;
$success-deep-color: #04bca6;
/ / warning color
$warning-light-color: #fd924e;
$warning-color: #ed6a0c;
$warning-deep-color: #f2711f;
/ / risk
$danger-light-color: #f36161;
$danger-color: #d40000;
$danger-deep-color: #dc4646;
/ / info gray
$info-color: #778ca3;
// Font color
$color-text-primary: # 646566; // Text color Main text color
$color-text-regular: # 323233; // Text color (default color)
$color-text-placeholder: #c8c9cc; // Default prompt text text and disable
$black-light-color: #778ca3; // Text for subheadings, or supporting information

//border
$border-color-base: # 112233; // Border, line color

//background
$background-color-base: #f7f8fa; / / the background color

/ * * * * * * * * * * * * * * * * * * * * * * * /
$header-height: 60px; // The height of the header menu bar
$normal-space: 20px; // The interval between the page TAB title and the content module
$small-form-field-height: 34px; // The height of the Form item
$page-min-width: 1200px; // The minimum width of the browser page
$aside-menu-width: 180px; // Width of the left menu bar
$form-label-width: 220px; // Width of the form tag
$button-height: 40px; / / button height

// Declare some common style mixins
@mixin font-common-style {
  font-size: $medium-font-size;
  font-family: $font-family;
}
@mixin medium-button-common-style {
  border-radius: 6px;
}
Copy the code

style.scss:

@import "@/assets/scss/variable.scss"; // Define variables and public mixins
@import "@/assets/scss/elementStyle/index.scss";
Copy the code

button.scss:

/deep/.el-button {
  &.el-button--default {
    @include font-common-style;
    @include medium-button-common-style;
    background: $background-color-base;
    border: 1px solid $background-color-base;
  }
  &.el-button--primary {
    @include font-common-style;
    @include medium-button-common-style;
    background: $primary-color;
    border: 1px solid $primary-color;
  }
  &.el-button--success {
    @include font-common-style;
    @include medium-button-common-style;
    background: $success-color;
    border: 1px solid $success-color;
  }
  &.el-button--info {
    @include font-common-style;
    @include medium-button-common-style;
    background: $info-color;
    border: 1px solid $info-color;
  }
  &.el-button--warning {
    @include font-common-style;
    @include medium-button-common-style;
    background: $warning-color;
    border: 1px solid $warning-color;
  }
  &.el-button--danger {
    @include font-common-style;
    @include medium-button-common-style;
    background: $danger-color;
    border: 1pxsolid $danger-color; }}Copy the code

checkbox.scss:

/deep/.el-checkbox-group {
  .el-checkbox {
    .el-checkbox__input {
      vertical-align: text-top;
      &.is-checked {
        .el-checkbox__inner {
          border-color: $primary-color;
          background: $primary-color;
        }
        & + .el-checkbox__label {
          color: $primary-color; }}.el-checkbox__inner {
        width: $medium-font-size;
        height: $medium-font-size;
        &:after {
          top: 2px;
          left: 5px; }}}.el-checkbox__label {
      @includefont-common-style; }}}Copy the code

index.scss:

@import "./button.scss";
@import "./radio.scss";
@import "./checkbox.scss";
@import "./input.scss";
@import "./inputNumber.scss";
Copy the code

input.scss:

/deep/.el-input {
  .el-input__inner {
    @include font-common-style;
    border: 1px solid $color-text-placeholder;
    &:focus {
      border: 1pxsolid $primary-color; }}}Copy the code

inputNumber.scss:

/deep/.el-input-number {
  .el-input {
    .el-input__inner {
      @include font-common-style;
      border: 1px solid $color-text-placeholder;
      &:focus.&:hover {
        border: 1pxsolid $primary-color; }}}.el-input-number__decrease..el-input-number__increase {
    &:hover {
      color: $primary-color;
    }
    color: $color-text-primary; }}Copy the code

radio.scss:

/deep/.el-radio-group {
  .el-radio {
    .el-radio__input {
      &.is-checked {
        .el-radio__inner {
          border-color: $primary-color;
          background: $primary-color;
        }
        & + .el-radio__label {
          color: $primary-color; }}.el-radio__inner {
        width: $medium-font-size;
        height: $medium-font-size;
        line-height: $medium-font-size;
        &:after {
          width: $medium-font-size / 4;
          height: $medium-font-size / 4; }}}.el-radio__label {
      @includefont-common-style; }}}Copy the code

Page reference

SCSS. Vue:

<template>
  <div>
    <h1>button:</h1>
    <el-row>
      <el-button>The default button</el-button>
      <el-button type="primary">The main button</el-button>
      <el-button type="success">Successful button</el-button>
      <el-button type="info">Information button</el-button>
      <el-button type="warning">The warning button</el-button>
      <el-button type="danger">Dangerous button</el-button>
    </el-row>
    <h1>radio:</h1>
    <el-radio-group v-model="radio">
      <el-radio :label="3">Shanghai</el-radio>
      <el-radio :label="6">Beijing</el-radio>
      <el-radio :label="9">shenzhen</el-radio>
    </el-radio-group>
    <h1>checkbox:</h1>
    <el-checkbox-group v-model="checkList">
      <el-checkbox label="Check box A"></el-checkbox>
      <el-checkbox label="Check box B"></el-checkbox>
      <el-checkbox label="Check box C"></el-checkbox>
    </el-checkbox-group>
    <h1>input:</h1>
    <div style="width: 30%; margin: 0 auto">
      <el-input v-model="input" placeholder="Please enter the content"></el-input>
    </div>
    <h1>inputNumber:</h1>
    <div style="width: 30%; margin: 0 auto">
      <el-input-number
        v-model="num"
        @change="handleChange"
        :min="1"
        :max="10"
        label="Description"
      ></el-input-number>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: 3.checkList: ["Check box A"].input: "".num: 1}; }};</script>

<style lang="scss" scoped>
@import "@/assets/scss/style.scss";
</style>
Copy the code

To be continued…