Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

preface

Blessed by Buddha, there is no bug. Hello everyone! I am across the sea!

So the prototype that THE UI gave us said we’re going to do this, we looked at it, it’s not hard, so let’s do it, so let’s write this down.

The implementation process

Look at the effect

Realize the principle of

The general idea is that the component will set a corresponding range for lavue based on the different value passed to it, and display the corresponding color within the current range

CSS controls color gradients using background-image properties, portals

Ps: This component is based on the El-Progress tag of Element-UI. Vue introduces Element-UI, see here, portal

  1. I’m going to make it, just for the sake of demonstration, progress barThree state.ongoing.failure.completeDifferent colors correspond to different onesThe class stylesIn thestyleTo set.
  2. Different values passed invalue, determine the valuevalueIs it in this state, for demonstration purposes, LET me passvalueIn the meantime, I added onestatusField, represents thisvalueIn the state.

Vue sets styles, styles through

Because I need to modify the original style of the Element-UI, this leads to style penetration in Vue, which can be done in three ways

1. >>>

Normally, if the Vue style is normal CSS, then

<style lang="css" scoped>
.a >>> .b { 
 / *... * / 
}
</style>
Copy the code

2. /deep/

However, when we use Vue a lot, we will find that sometimes in style style, we will use SCSS, and later may use less, such preprocessor, but SCSS and other preprocessors can not parse >>>, so we use the following method.

<style lang="scss" scoped>
.a{
 /deep/ .b { 
  / *... * / 
 }
} 
</style>
Copy the code

3. ::v-deep

However, when vuE-cli3 is compiled, the /deep/ mode will give an error or warning. In this case, we can use the third method, which must be double colons

<style lang="scss" scoped>
.a{
 ::v-deep .b { 
  /* ... */ 
 }
} 
</style>
Copy the code

Since SCSS is used in this demo, we are :: V-deep

The complete code

comGradientProgressBar.vue

<template>
    <div class="progress">
        <el-progress type="line" :percentage="obj.value" :class="showProgressColor">
            {{obj.value}}
        </el-progress>
    </div>
</template>
  
<script>
  export default {
    props: {
      obj: {
        type: Object.default() {
          return {
            value: 0.status: 'failure'}; }},},data() {
      return {
        showProgressColor: 'el-bg-inner-running',}},mounted() {
      this.changeStatus(this.obj.status);  // Set the gradient color of the progress bar
    },
    methods: {
      changeStatus(val) {
        if (val == 'in progress') {
          this.showProgressColor = 'el-bg-inner-running';
        } else if (val == 'failure') {
          this.showProgressColor = 'el-bg-inner-error';
        } else if (val == 'complete') {
          this.showProgressColor = 'el-bg-inner-done'; }}},}</script>

<style lang="scss" scoped>

.progress{
  width: 500px;
  height: 20px;
  /* The background color is set for obvious effect. In real development, the component will be placed in a container, which will have its own background. If the project involves switching the theme color, you can set the color to match the theme */
  / * background - color: rgba (,22,37, 3. 85); * /
  padding-left: 10px;
}

.progress ::v-deep.el-progress__text{
  color: #fff;
  font-size: 14px;
}
.progress ::v-deep.el-progress-bar__outer{
  height: 12px! important;
  border: 1px solid #78335f;
  background-color:transparent;
}

/* Gradient progress bar */
/* If there is a custom style involved and the same component is used for many times, you can add a custom class name in front of the component's style. * /
/* In the case of the progress bar, I'm customizing the element UI el-progress for the progress bar, and I'm adding a. Progress class name */
/* If I use elder-UI's el-progress elsewhere, I can style it without affecting the el-progress in my custom progress bar component */
.progress ::v-deep .el-bg-inner-running .el-progress-bar__inner{
background-color: unset;
  background-image: linear-gradient(to right, #3587d8 , #6855ff);
}
.progress ::v-deep .el-bg-inner-error .el-progress-bar__inner{
  background-image: linear-gradient(to right, #3587d8 , #fb3a7e);
}
.progress ::v-deep .el-bg-inner-done .el-progress-bar__inner{
  background-image: linear-gradient(to right, #3587d8 , #53ff54);
}
</style>
Copy the code

And then we quote

<! -- * @Author: your name * @Date: 2021-10-13 15:35:06
 * @LastEditTime: 2021-10-29 09:48:53
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \hello-world\src\views\test\index.vue
-->
<template>
  <div style="Background - color: rgba (85) 3,22,37,.">
    <module v-for="(item, index) in dealList" :obj="item"/>
  </div>
</template>

<script>
// Rotate to display numeric components
import module from '. /.. /.. /components/comGradientProgressBar'
export default {
  name: 'test'.components: {
    module,},data() {
    return {
      list: [{id: '001'.value: 49.status: 'in progress' },
        {id: '001'.value: 68.status: 'failure' },
        {id: '001'.value: 90.status: 'complete'},].dealList: [].}},methods: {
    dealData() {
      this.dealList = [];
      // If the progress bar exceeds 100, the processing step will not be written
      // Add the data from the list to the dealList
      this.dealList = this.list; }},mounted() {
    this.dealData(); }},</script>

<style scope>
</style>

Copy the code

Comments on the lottery

Feel free to discuss in the comments section. The nuggets will be sending out 100 nuggets in the comments section after the diggnation campaign

  • Raffle gift: 100 pieces, including badges, slippers, mugs, canvas bags, etc., will be distributed at random
  • Drawing time: Within 3 working days after the end of project Diggnation, all articles that meet the rules will be officially posted in the comments section
  • Lucky draw: Nuggets official random draw + manual verification
  • Comment content: comments, suggestions and discussions related to the content of the article. General comments such as “treading on” and “learning” will not win the prize

Now that you’ve seen this, please give me a thumbs up before you go, because your thumbs up means a lot to me