This is the fifth day of my participation in the August Wen Challenge.More challenges in August

Vue3 Component Library – Message prompt component

  • Quick message prompt
  • Custom message prompt
  • Function call message prompt
Quick message prompt
  • Results the preview

  • Start by introducing the Button component written in the app. vue file

  • Create a new snackbar. vue file for the component

  • Add a click event to button and use the show property to control the display and hiding of message prompt boxes

  • Note:

    • The v-model was added in front of show to modify the props to receive the value of show in the component
    • The properties in props are one-way data and cannot be changed directly
    <simplebutton type="primary" block @click="show = ! </ SimpleButton > <simplesnackbar V-model :show="show"> This is a message bar! </simplesnackbar> <script setup> import simplebutton from "./components/Button.vue"; import simplesnackbar from "./components/Snackbar.vue"; import {ref} from 'vue' const show = ref(false) </script>Copy the code

  • Base component implementation

    • External incoming string, internal put a default slot for receiving display
    • Giving a basic style message prompt box is usually implemented with position in the upper right corner of the page
    <div>
    <div
      class="simple-snackbar">
     <slot></slot>
    </div>
  </div>
<style>
  .simple-snackbar {
  width: 200px;
  padding: 10px;
  background-color: #333;
  color: rgba(255, 255, 255, 0.87);
  border-radius: 3px;
  position: absolute;
  top: 0;
  right: 0;
}
</style>
Copy the code

  • Basic component logic implementation

    • Check by passing the show parameter

    • Introduce the watch function in vUE to observe the changes in the props value. If show is true, the timer can be executed to display the component for 3 seconds and then hide it

    • Component hiding should set show to false, direct modification will not take effect

    • Introduce the defineEmits method in VUE and define an “update:show” method that calls the method and passes in values when the timer executes

    • The change() method defines a query variable for the timer set to None and block to control show and hide

      import { defineProps, ref, watch, defineEmits, useSlots } from "vue";
const props = defineProps({
  show: Boolean
});
watch(props, (newProps) => {
  newProps.show ? changes() : (query.value = "none");
});
Copy the code
Custom message prompt
  • Results the preview

  • Custom message prompt added an Action name slot for adding content

  • Introduce the Button component and add show=! The show event can be used to disable the function

  • App. Vue content

    <simplebutton type="primary" block @click="show = ! </ SimpleButton > <simplesnackbar V-model :show="show"> This is a message bar! <template #action> <simplebutton type="primary" @click="show = ! </ simpleButton > </template> </simplesnackbar>Copy the code

  • Wrap a div around the Action slot and style it to the right

    • Note:

      • If you use position: absolute; The positioning implementation, you need to add height to the parent element otherwise you’re going to have height collapse
      • Plus the height element doesn’t make it adaptive
Function calling component

  • The implementation uses the createSnackbar(‘ This is a message ‘) to display components directly on the page only for simple components

  • Create a createsNackbar.js file and export it

  • Create a createSnackbar function and receive an external data value

  • CreateApp is a function for vue to create instances

    import {createApp} from 'vue' import simplesnackbar from './Snackbar.vue' function createSnackbar (data) { let Typeof data == "object"? {message,duration} = data : Snackbar = createApp(simplesnackbar, {message, duration, show, }) / / to create an element is inserted into the body let divElement = document. The createElement method (' div ') document. The body. The appendChild (divElement)/mount/elements snackbar.mount(divElement) } export default createSnackbar;Copy the code

  • Call it in app.js

    CreateSnackbar (' This is a message ')Copy the code
Function calling function

  • Implement createsNackbar.info (‘ This is a message ‘)

    • Results the preview

  • Use different methods to display different color message prompt box

  • Add a type value directly to the createSnackbar function to control the CSS style display

    createSnackbar.success = function(data){
    createSnackbar(data,'success')
}
createSnackbar.info = function(data){
    createSnackbar(data,'info')
}
Copy the code
  • You can implement different message box styles