Vue. Extend application for creating dynamic components

Time:2022-5-11

When using Ant Design Vue, I found a message pop-up window that can be called directly as follows:

this.$info({
        title: 'This is a notification message',
        content:'some messages...some messages...'
        onOk() {},
      });

Then I was thinking, can I also encapsulate such a component, instead of importing the component written in advance every time, and call it globally? Just to achieve a function of deleting the confirmation box in the work, I studied it.

1、 Create a component (deleteconfirm. Vue)

<template>
  <a-modal
    :title="null"
    width="416px"
    :bodyStyle="{ padding: '0px' }"
    :visible="visible"
    :confirm-loading="confirmLoading"
    okType="danger"
    Oktext = "delete"
    :closable="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div>
      <div>
        <a-icon
         
          type="exclamation-circle"
          theme="filled"
          :style="{ color: '#f9ad15' }"
        />
        <span>{{ title }}</span>
      </div>
      <div>
        After deletion, the relevant data will be deleted together. This operation is irreversible!
      </div>
      < div > to confirm deletion, please enter: {validatetext} < / div >
      <a-input
       
        :placeholder="placeholder"
        v-model="userInputText"
      />
    </div>
  </a-modal>
</template>
<script>
export default {
  name: "deleteConfirm",
  props: {
    title: {
      type: String,
      Default: "are you sure you want to delete?",
    },
    placeholder: {
      type: String,
      default: "",
    },
    validateText: {
      type: String,
      default: "",
    },
    onOk: {
      type: Function,
      default() {
        return () => {};
      },
    },
    onCancel: {
      type: Function,
      default() {
        return () => {};
      },
    },
  },
  data() {
    return {
      //Show
      visible: false,
      //Confirm loading
      confirmLoading: false,
      //Confirmation copy entered by the user
      userInputText: "",
    };
  },
  computed: {},
  methods: {
    //Click the OK button
    async handleOk() {
      //Click OK to check whether the document entered by the user is consistent with the document to be verified
      if (this.userInputText !== this.validateText) {
        this.$ message. Error ("input error");
        return;
      }
      this.confirmLoading = true;
      //Callback user function
      await this.onOk(this.userInputText);
      this.confirmLoading = false;
      this.visible = false;
    },
    //Cancel button
    handleCancel() {
      this.onCancel("cancel");
      this.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.delete-confirm-wrap {
  border-radius: 6px;
  height: 170px;
  padding: 24px;
  .title-wrap {
    font-weight: 500;
    font-size: 16px;
    display: flex;
    align-items: center;
  }
  .warning-title {
    color: #ff4d4f;
  }
  .confirm-tip {
    color: #8591a1;
  }
}
</style>

2、 Create a new index in the same directory of the component js

import Vue from 'vue'
//Import components
import deleteConfirmComp from './deleteconfirm'
//Create constructor
const deleteConfirmConstructor = Vue.extend(deleteConfirmComp);
//Build delete method
const deleteConfirm = (options = {}) => {
    //Dynamically instantiate components
    let instance = new deleteConfirmConstructor({
        //The props of sub components are merged and overwritten here
        propsData: {
            ...options
        }
    });
    //Mount instance rendering
    instance.$mount();
    //Bind to body
    document.body.appendChild(instance.$el);
    //Pop up window is displayed
    instance.visible = true;
}
//Export this method
export default deleteConfirm;

3、 In main JS to mount the deleteconfirm method on the Vue prototype object so that the method can be called globally

import Vue from 'vue'
import deleteConfirm from "./components/deleteconfirm/index";
Vue.prototype.$confirm = deleteConfirm;
...

4、 Use

this.$confirm({
        Title: 'are you sure you want to delete' I call you ',
        Placeholder: "please enter the name of the page to be deleted",
        Validatetext: 'I'll call you',
        async onOk() {
          //Here is the callback of clicking the OK button
          ...
        },
      });

5、 Effect

Vue. Extend application for creating dynamic components

effect

Recommended Today

Strong, copy difference

Strong, how is copy different? Practice makes true knowledge! Upper code strong #import “ViewController.h” @interface ViewController () @property (nonatomic,strong)NSString *name; @end @implementation ViewController – (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. Nsmutablestring * string = [[nsmutablestring alloc] initwithstring: @ “Zhang San”]; self.name = string; Nslog (@ “string:% @, address:% […]