Self-study Vue Seven Day!!

Bullet frame case:

Requirements:

Display the contents of the popover in the page;

Click the button to close the popup;

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html.body.#app1{
      width: 100%;
      height: 100%;
    }
    
    .wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background-color: rgba(0.0.0.0.3);
      position: fixed;
      top:0;
      left: 0;
    }
    .content {
      width: 220px;
      height: 160px;
      background-color: #fff;
    }
    .title {
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
    .msg {
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding: 5px 10px;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
      height: 80px;
      text-align: center;
      color: gray;
      font-size: 14px;
    }
    .bottom {
      display: flex;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
    .bottom div {
      flex: 1;
      color: green;
    }
    .bottom div:nth-of-type(1) {
      border-right: 1px solid #eee;
      color: red;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app1">
        <p>{{clickResult}}</p>

        <div class="wrapper">
            <div class="content">
            <p class="title">Bug tip</p>
            <div class="msg">Dear, you still have 53633 bugs, do you want to deal with?</div>
            <div class="bottom">
                <div>Ignore, knock off</div>
                <div>Work overtime to deal with</div>
            </div>
            </div>
        </div>
        
  </div>
</body>


<script>


    // With the layout above, extract the Wrapper into child components and pass data internally by passing values
    new Vue({
        el: '#app1'.data: {
            textObj: {
                title: 'bugs'.msg: 'Dear, you still have 53633 bugs, do you want to deal with? '.cancelTxt: 'Ignore, knock off'.submitTxt: 'Overtime handling'
            },
            clickResult:""}})</script>

</html>
Copy the code

The finished code:

Overall idea: 1. Edit the whole popover as a component; 2. Use the component in the page, and pass the parent textObj object into the component to receive; 3, set the click effect, set a V-show parameter to the wrapper box to control the appearance of the popover; 4. Define a function that needs to be modified in the parent component, customize this function in the child component, and call it in the child component; 5, the required textobj. cancelTxt, textObj. SubmitTxt two parameters, through the child component into the parent component to modify, complete the whole process can be;

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html.body.#app1 {
      width: 100%;
      height: 100%;
    }

    .wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background-color: rgba(0.0.0.0.3);
      position: fixed;
      top: 0;
      left: 0;
    }

    .content {
      width: 220px;
      height: 160px;
      background-color: #fff;
    }

    .title {
      height: 40px;
      line-height: 40px;
      text-align: center;
    }

    .msg {
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding: 5px 10px;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
      height: 80px;
      text-align: center;
      color: gray;
      font-size: 14px;
    }

    .bottom {
      display: flex;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }

    .bottom div {
      flex: 1;
      color: green;
    }

    .bottom div:nth-of-type(1) {
      border-right: 1px solid #eee;
      color: red;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app1">
    <p>{{clickResult}}</p>
    <wrapper :text-obj='textObj' @fn='changeResult'></wrapper>
  </div>
</body>

<template id="tmp">
  <div class="wrapper" v-show='isShow'>
    <div class="content">
      <p class="title">{{textObj.title}}</p>
      <div class="msg">{{textObj.msg}}</div>
      <div class="bottom">
        <div @click='handleClick(textObj.cancelTxt)'>{{textObj.cancelTxt}}</div>
        <div @click='handleClick(textObj.submitTxt)'>{{textObj.submitTxt}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  let wrapper = {
    template: '#tmp'.data() {
      return {
        isShow: true}},props: ["textObj"].methods: {
      handleClick(val) {
        this.isShow = false;
        this.$emit('fn', val)
      }
    }
  }

  // With the layout above, extract the Wrapper into child components and pass data internally by passing values
  new Vue({
    el: '#app1'.data: {
      textObj: {
        title: 'bugs'.msg: 'Dear, you still have 53633 bugs, do you want to deal with? '.cancelTxt: 'Ignore, knock off'.submitTxt: 'Overtime handling'
      },
      clickResult: ""
    },
    components: {
      wrapper
    },
    methods: {
      changeResult(val) {
        this.clickResult = val
      }
    },

  })
</script>

</html>
Copy the code

1. Pass parameters to sibling components

1. Create an empty Vue object. In the modified component, define the Mounted function, in which the bus sends custom event listening. $emit(‘ event name ‘, parameter 1, parameter 2… ‘); ;

    <div id='app'>
        <button1></button1>
        <button2></button2>
    </div>
    <template id="tpm1">
        <div>
            <button :style="{backgroundColor: bgc}">Button 1</button>
        </div>
    </template>
    <template id="tpm2">
        <div>
            <button @click='add()'>Button 2</button>
        </div>
    </template>
    <script>
        // Central event bus
        Create an empty Vue object
        // In the component to be modified, define the Mounted function. In this function, the bus sends custom event listeners
        $emit(' event name ', parameter 1, parameter 2.. '); // 3, Emit the custom event where the value needs to be modified, bus.$emit(' event name ', parameter 1, parameter 2.. ').


        Create an empty Vue object
        let bus = new Vue()
        let button1 = {
            template: '#tpm1'.data() {
                return {
                    bgc: 'green'}},mounted() {
                // In the component to be modified, define the Mounted function. In this function, the bus sends custom event listeners
                bus.$on("changeBgcEvent".(val) = > {
                    this.bgc = val
                })
            },
        }
        let button2 = {
            template: '#tpm2'.data() {
                return {
                    newColor: 'pink'}},methods: {
                add() {
                    $emit(' event name ', parameter 1, parameter 2.. '); // 3, Emit the custom event where the value needs to be modified, bus.$emit(' event name ', parameter 1, parameter 2.. ').
                    bus.$emit("changeBgcEvent".this.newColor)
                }
            },
        }
        new Vue({
            el: '#app'.data: {},components: {
                button1,
                button2
            }
        })
    </script>
Copy the code

2, slot

2.1 anonymous slot

1, component tag internal handwritten HTML tag, default do not render; 2. You need to display these HTML tags inside the component and use slot tags to receive them. 3. Slot tags appear where the HTML tags will be placed. 4. A slot with the name attribute is called a named slot; otherwise, it is called an anonymous slot.

    <div id='app'>
        <comp>
            <a href="">A label</a>
            <button>button</button>
        </comp>
    </div>
    <template id="tmp">
        <div>
            <slot></slot>
            <p>P tags</p>
        </div>
    </template>
    <script>
        let comp = {
            template: '#tmp'
        }
        new Vue({
            el: '#app'.data: {},components: {
                comp
            }
        })
    </script>
Copy the code

2.2 Named slots

A named slot requires the name attribute, whose value is the same as the slot attribute of the tag that needs to be placed there

<div id='app'>
        <comp>
            <a href="" slot="link">A label</a>
            <button slot="btn">button</button>
        </comp>
    </div>
    <template id="tmp">
        <div>
            <slot name='link'></slot>
            <p>P tags</p>
            <slot name='btn'></slot>
        </div>
    </template>
    <script>
        let comp = {
            template: '#tmp'
        }
        new Vue({
            el: '#app'.data: {},components: {
                comp
            }
        })
    </script>
Copy the code

2.3 Jingdong Navigation Bar case

Preset all slots and then switch the name of the slot to switch the corresponding content

<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .dh {
            margin: 100px auto;
            width: 400px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            display: flex;
            border: 1px solid # 000;
        }

        .l..r {
            width: 50px;
            font-size: 30px;
        }

        .r {
            line-height: 30px;
        }

        .c {
            flex: 1;
        }

        ul {
            display: flex;
            justify-content: space-around;
        }
    </style>
</head>

<body>
    <div id='app'>
        <daoh>
            <input type="text" slot="inp">
            <h3 slot="h3">The shopping cart</h3>
            <ul slot="ul">
                <li>goods</li>
                <li>evaluation</li>
                <li>details</li>
            </ul>
        </daoh>
    </div>
    <template id="tmp">

        <div class="dh">
            <div class="l">&lt;</div>
            <div class="c">
                <! -- Switch the slot name to switch the corresponding content -->
                <slot name='ul'></slot>
            </div>
            <div class="r">.</div>
        </div>

    </template>
    <script>
        let daoh = {
            template: '#tmp'
        }
        new Vue({
            el: '#app'.data: {},components: {
                daoh
            }
        })
    </script>
Copy the code

2.4 Navigation bar function switch

<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .all {
            margin: 100px auto;

        }

        .dh {
            width: 400px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            display: flex;
            border: 1px solid # 000;
        }

        .l..r {
            width: 50px;
            font-size: 30px;
        }

        .r {
            line-height: 30px;
        }

        .c {
            flex: 1;
        }

        ul {
            display: flex;
            justify-content: space-around;
        }
    </style>
</head>

<body>
    <div id='app'>
        <daoh>
            <input type="text" slot="inp">
            <h3 slot="h3">The shopping cart</h3>
            <ul slot="ul">
                <li>goods</li>
                <li>evaluation</li>
                <li>details</li>
            </ul>
        </daoh>
    </div>
    <template id="tmp">


        <div class="all">
            <div class="dh">
                <div class="l">&lt;</div>
                <div class="c">
                    <! -- Switch the slot name to switch the corresponding content -->
                    <slot :name='thisName'></slot>
                </div>
                <div class="r">.</div>
            </div>
            <button @click='add("inp")'>search</button>
            <button @click='add("h3")'>shopping</button>
            <button @click='add("ul")'>details</button>
        </div>

    </template>
    <script>
        let daoh = {
            template: '#tmp'.data() {
                return {
                    thisName: 'ul'}},methods: {
                add(val) {
                    this.thisName = val
                }
            },
        }
        new Vue({
            el: '#app'.data: {},components: {
                daoh
            }
        })
    </script>
Copy the code

2.5. Scope slot

The component tag comp cannot use data from the component directly because it is not in scope.

Solutions:

Mynum =’num’; mynum=’num’;

2. Add a slot-scope attribute to the slot tag. The value is an object (name user-defined) that receives the attributes of the slot tag.

{{obj. Mynum}} {obj. Mynum}}

<div id='app'>
        <comp>
            <button slot="btn" slot-scope='obj'>Buttons {{obj.mynum}}, {{obj.tit}}</button>
        </comp>
    </div>
    <template id="tmp">
        <div>
            <p>P tags</p>
            <slot name='btn' :mynum='num' tit='ssss'></slot>
        </div>
    </template>
    <script>
        let comp = {
            template: '#tmp'.data() {
                return {
                    num: 20}}}new Vue({
            el: '#app'.data: {},components: {
                comp
            }
        })
    </script>
Copy the code

2.6. Various ways to write a scope slot

<! --1<comp><button slot="btn" slot-scope='obj'>Buttons {{obj.mynum}}, {{obj.tit}}</button></comp> --> <! --2, basic writing template writing method --><comp>
            <template slot="btn" slot-scope='obj'>
                <button>Buttons {{obj.mynum}}, {{obj.tit}}</button>    
            </template>
        </comp><! --3<comp v-slot: BTN ="obj">
            <button>Buttons {{obj.mynum}}, {{obj.tit}}</button></comp> --> <! --4<comp> <comp><template v-slot:btn="obj">
                <button>Buttons {{obj.mynum}}, {{obj.tit}}</button>        
            </template> -->
Copy the code

1. Pass parameters to sibling components

2, slot

2.1 anonymous slot

2.2 Named slots

2.3 Jingdong Navigation Bar case

2.4 Navigation bar function switch

2.5. Scope slot

2.6. Various ways to write a scope slot

Related Posts

A cute new summary of TS generics basics

Cool bar slide effect

TypeScript is used in Vue3