Vue Rebuild005Customized routing and slots

Command value

1. need

• Implement a color directive – pass in different colors and set the text color for the label

2. grammar

• When binding instructions, you can bind specific parameter values to the instructions in the form of an “equal sign”

<div v-color="color">I am content</div>

• The instruction value can be obtained through binding.value. Modification of the instruction value will trigger the update function

directives: {<!-- -->
  color: {<!-- -->
    inserted (el, binding) {<!-- -->
      el.style.color = binding.value
    },
    update (el, binding) {<!-- -->
      el.style.color = binding.value
    }
  }
}

• Example

<template>
  <div>
    <h1 v-color="color1">Command value 1 test</h1>
    <h1 v-color="color2">Value 2 test of directive</h1>
  </div>
</template>

<script>
export default {<!-- -->
  data () {<!-- -->
    return {<!-- -->
      color1: 'red',
      color2: 'orange'
    }
  },
  directives: {<!-- -->
    color: {<!-- -->
      // 1. inserted provides the logic when an element is added to the page.
      inserted (el, binding) {<!-- -->
        el.style.color = binding.value
      },
      // 2. Triggered when the value of the update command is modified, providing the logic of DOM update after the value changes.
      update (el, binding) {<!-- -->
        console.log('The value of the command has been modified');
        el.style.color = binding.value
      }
    }
  }
}
</script>

Encapsulation of v-loading instructions

• In the actual development process, it takes time to send a request. When the requested data is not returned, the page will be in a blank state => the user experience is not good.
• Requirements: Encapsulate a v-loading instruction to achieve the loading effect

Analysis

1. Essentially, the loading effect is a mask covering the box.

2. During the data request, turn on the loading state and add a mask layer

3. After the data request is completed, the loading state is closed and the mask layer is removed.

Implementation

1. Prepare a loading class, position it through pseudo elements, set the width and height, and implement the masking layer

   .loading:before {<!-- -->
     content: '';
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background: #fff url('./loading.gif') no-repeat center;
   }
   

2. Turn on and off the loading state (add and remove the mask). Essentially, you only need to add and remove the class.
   • In the inserted hook, binding.value determines the value of the instruction and sets the default state.
   • In the update hook, binding.value determines the value of the instruction and updates the class name status.

data () {<!-- -->
    return {<!-- -->
      list: [],
      isLoading: true,
      isLoading2: true
    }
  }

3. Combined with the syntax of custom instructions for encapsulation and reuse

Slot

Default slot

1. Function: Let some structure inside the component support customization

2. Basic syntax of slots
   1. For the structural parts in the component that need to be customized, use instead.
   2. When using components, inside the **** tag, the incoming structure replaces the slot.
   3. When passing content to the slot, you can pass in plain text, html tags, and components
      

• Socket components

<template>
  <div class="dialog">
    <div class="dialog-header">
      <h3>Friendly reminder</h3>
      <span class="close"></span>
    </div>

    <div class="dialog-content">
      <!-- 1. Use slot placeholder at the location that needs to be customized -->
      <slot></slot>
    </div>
    <div class="dialog-footer">
      <button>Cancel</button>
      <button>Confirm</button>
    </div>
  </div>
</template>

• App.vue

<template>
  <div>
    <!-- 2. When using a component, fill in the content in the component tag -->
    <MyDialog>
      <div>Are you sure you want to delete it</div>
    </MyDialog>

    <MyDialog>
      <p>Are you sure you want to quit?</p>
    </MyDialog>
  </div>
</template>

<script>
import MyDialog from './components/MyDialog.vue'
export default {<!-- -->
  data () {<!-- -->
    return {<!-- -->

    }
  },
  components: {<!-- -->
    MyDialog
  }
}
</script>

Slot default value

• Content customization is completed through the slot. What is passed will be displayed, but if it is not passed, it will be blank.
  
  

Named slot

• Default slot: A custom location. If there are multiple structures in a component, external tags need to be passed in for customization.

• Named slot syntax
  • Use the name attribute to distinguish names of multiple slots
    
  • template cooperates with v-slot: name to distribute corresponding tags
    
• The abbreviation of v-slot: v-slot is too long to write, vue provides us with a simple way to write it v-slot -> #

 <template #footer>
      <button>Cancel</button>
      <button>Confirm</button>
    </template>

Scope slot

• There are only two types of slots – Default slot & Named slot. Scope slots are not a category of slots.
• Scope slot: When defining a slot, you can pass a value. You can bind data to slot, which can be used when using components in the future.
• Scenario: Encapsulating table component
  

Usage steps

1. To the slot label, pass the value by adding attributes

   <slot :id="item.id" msg="Test text"></slot>
   

2. All added attributes will be collected into an object

   {<!-- --> id: 3, msg: 'Test text' }
   

3. In the template, receive it through #slot name = "obj", the default slot name is default

   <MyTable :list="list">
     <template #default="obj">
       <button @click="del(obj.id)">Delete</button>
     </template>
   </MyTable>
   

Complete case

• MyTable.vue

<template>
  <table>
    <thead>
      <tr>
        <th>Serial number</th>
        <th>Name</th>
        <th>Age</th>
        <th>Operation</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in data" :key="item.id">
        <td>{<!-- -->{<!-- --> index + 1 }}</td>
        <td>{<!-- -->{<!-- --> item.name }}</td>
        <td>{<!-- -->{<!-- --> item.age }}</td>
        <td>
          <!-- 1. Pass the value to the slot tag by adding attributes -->
          <slot :row="item" msg="Test text"></slot>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {<!-- -->
  props: {<!-- -->
    data: Array
  }
}
</script>

• App.vue

<template>
  <div>
    <MyTable :data="list">
      <!-- 3. Receive through template #slot name="variable name" -->
      <template #default="obj">
        <button @click="del(obj.row.id)">
          delete
        </button>
      </template>
    </MyTable>

    <MyTable :data="list2">
      <template #default="{ row }">
        <button @click="show(row)">View</button>
      </template>
    </MyTable>
  </div>
</template>

<script>
import MyTable from './components/MyTable.vue'
export default {<!-- -->
  data () {<!-- -->
    return {<!-- -->
      list: [
        {<!-- --> id: 1, name: 'Zhang Xiaohua', age: 18 },
        {<!-- --> id: 2, name: 'Sun Daming', age: 19 },
        {<!-- --> id: 3, name: 'Liu Dezhong', age: 17 },
      ],
      list2: [
        {<!-- --> id: 1, name: 'Zhao Xiaoyun', age: 18 },
        {<!-- --> id: 2, name: 'Liu Beibei', age: 19 },
        {<!-- --> id: 3, name: 'Jiang Xiaotai', age: 17 },
      ]
    }
  },
  methods: {<!-- -->
    del (id) {<!-- -->
      this.list = this.list.filter(item => item.id !== id)
    },
    show (row) {<!-- -->
      alert(`Name: ${<!-- -->row.name}; Age: ${<!-- -->row.age}`)
    }
  },
  components: {<!-- -->
    MyTable
  }
}
</script>