The style of the front end penetrates and modifies the styles defined inside other components

Cough, I've been writing the front-end for the last four months. Although I studied in 2018 and used vue on the Bi design in 2019, I haven't used it as frequently as I do now. After all, I'm still a java development engineer and don't have deep contact with the front-end. But as a programmer, I always have to output something to the world, code or blog. To record your footprints and pits!!!

Briefly talk about the problems encountered in recent months, solutions and gains. Don't spray, big man.

1. The front end needs to modify the style of component classes and other class libraries. For example, I introduced elm ui into a component and need to modify its style. The syntax is as follows

.Class name/deep/.Class name{
   
    }

A concrete example is given in paneClass is nested in El collapse item__ A div style of header. specific

    .panelClass/deep/.el-collapse-item__header{
        height: 35px;
        background-color: #F8F8F8;
        line-height: 32px;
        .titleClass{
            font-size: 12px;
            flex: 1 0 90%;
            order: 1;
            font-weight: bolder;
            color: #333333;
        }
        .panelClass{
            width: 208px;text-align: center;
        }
        i{
            margin-left: 10px;
        }
    }

The second example is the floating Title style of G6. The title style provided by the official website document did not take effect. Now looking back, the style didn't penetrate. The code is as follows

     <!-- Canvas this is G6 Data rendered canvas--> 
        <div ref="canvas" class="canvasPanel" :style="{'width':closeFlag ? '100%':'100%'}"></div>

 .canvasPanel/deep/.g6-tooltip {
      border: 1px solid #e2e2e2;
      border-radius: 4px;
      font-size: 12px;
      color: #545454;
      background-color: rgba(255, 255, 255, 0.9);
      box-shadow: rgb(174, 174, 174) 0px 0px 10px;
    }

 

2. Two way binding of parent-child component data. This point is very common in development and I have used it before, but I always forget it. Let's record it first.

The scenario is that, for example, a data of the parent component controls the expansion and closing of the child component. The child component needs to obtain the data of the parent component to control the switch. When it is closed, the data of the parent component needs to be modified. It should be noted here that vue officials do not recommend two-way data binding.

Upper code

 This is the definition of a parent component and a sub component formInfoDialogFormVisible this boolean Data passed to sub components
<formInfoDialog  :model = model @formObject = "saveFormObject" :formInfoDialogFormVisible.sync = formInfoDialogFormVisible></formInfoDialog>
The subcomponent claims to get this data  
props: {
            'formInfoDialogFormVisible': Boolean,
            model: {
                type: Object,
                default: () => ({}),
            }
            },

 

  watch:{
            // 1. We monitor the formInfoDialogFormVisible given by the parent component. When it is modified, it is assigned to a chileforinfodialogformvisible data local to the child component,
            // This is the switch that controls the deployment of the sub assembly. This step completes the control of the parent component over the child component.
            formInfoDialogFormVisible(newValue,oldValue){
                this.chileFormInfoDialogFormVisible = newValue;
            },
    //         2 when the child component is closed, the chileforinfodialogformvisible changes. Send an event to inform the parent component and send the modified value to the parent component.
    //        Assigned to formInfoDialogFormVisible. This step completes the control of the child component over the parent component
            chileFormInfoDialogFormVisible(newValue,oldValue){
                this.$emit('update:formInfoDialogFormVisible', newValue)
            },
        }


This completes the two-way binding of data. This is necessary because the child component cannot directly modify the data given by the parent component

The function of vue modifier sync is that when a child component changes the value of a prop, the change will also be synchronized to the parent component. See the official documents for detailed instructions https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6

 

Well, let's write so much first. See you next time

Tags: Front-end

Posted by infid3l on Mon, 23 May 2022 11:58:26 +0300