The custom cube UI pop-up dialog supports multiple and multiple types of input boxes

start

• Recently I met a need , Add some small functions to a mobile terminal project .
• Mobile UI The component library uses cube-ui.
• But basic cube-ui Not enough to meet my needs …
• The point is to record My thoughts , The second is the implementation code .

1. demand

You need to click the button to pop up a pop-up box , Then you can enter the content in the pop-up box , When you click OK , Call the interface to save .

Native cube-ui Only one input box is supported , And this input field type is not controllable .

The demand I received , Support multiple input fields , And the type of input box is different .

Basics cube-ui Of prompt The effect of the pop-up box is shown in the following figure ：

2. Looking for solutions

cube-ui Slots are supported , Specific code createElement This function structure is somewhat similar to h function .

It is OK to insert text and pictures through this slot .

If I pass this function , To the dialog box , Insert several input box . First, a little trouble . Second, the operability is a little low .

Basics cube-ui The pop-up box for - slot The code and effect are shown in the figure below ：

3. The final solution

Just as I was thinking , I had a whim , First, let's see how the dialog source code is written .

cube-ui Of dialog Source code

After taking a look at his source code , I have a solution . His source code is nothing more than a vue Components . I'm directly cv One set comes out , Add your own additional customized configuration , This will not meet my needs ？

4. result

Self defined be based on cube-ui A dialog box for

<template>
  <transition name="cube-dialog-fade">
    <cube-popup
      ref="selfPopup"
      type="self-dialog"
      :z-index="zIndex"
      :mask="true"
      :center="true"
      @mask-click="maskClick"
      @click.stop="say()"
    >
      <div class="self-dialog-main cube-dialog-main" @click.stop="say()">
        <!-- <span v-show="showClose" class="cube-dialog-close">
          <i class="cubeic-close"></i>
        </span> -->
        <div :class="containerClass">
          <h2 v-if="title || $slots.title" class="cube-dialog-title">
            <slot name="title">
              <p class="cube-dialog-title-def">
                {
   { title }}
              </p>
            </slot>
          </h2>
          <div class="cube-dialog-content">
            <slot name="content">
              <div v-if="promptList && promptList.length > 0" class="cube-dialog-content-def">
                <div v-for="(item, index) in promptList" :key="index">
                  <div>
                    {
   { item.label }}
                  </div>

                  <div v-if="item.type === 'text' || item.type === 'number'">
                    <cube-input
                      v-model="item.value"
                      :type="item.type"
                      :placeholder="item.placeholder"
                    />
                  </div>

                  <div v-if="item.type === 'select'">
                    <cube-input
                      v-model="item.value"
                      :type="item.type"
                      :placeholder="item.placeholder"
                      :readonly="true"
                      @focus="showPicker(item, index)"
                    />
                  </div>
                </div>
              </div>
            </slot>
          </div>
          <div class="cube-dialog-btns" :class="{ 'border-right-1px': isConfirm || isPrompt }">
            <slot name="btns">
              <a
                v-if="isConfirm || isPrompt"
                :href="cancelBtn.href"
                class="cube-dialog-btn border-top-1px"
                :class="{
                  'cube-dialog-btn_highlight': cancelBtn.active,
                  'cube-dialog-btn_disabled': cancelBtn.disabled
                }"
                @click="cancel"
              >
                {
   { cancelBtn.text }}
              </a>
              <a
                :href="confirmBtn.href"
                class="cube-dialog-btn border-top-1px"
                :class="{
                  'cube-dialog-btn_highlight': confirmBtn.active,
                  'cube-dialog-btn_disabled': confirmBtn.disabled
                }"
                @click="confirm"
              >
                {
   { confirmBtn.text }}
              </a>
            </slot>
          </div>
        </div>
      </div>
    </cube-popup>
  </transition>
</template>

<script>
export default {
  props: {
    zIndex: {
      type: Number,
      default: 100
    },
    type: {
      require: true,
      type: String,
      default: 'prompt'
    },
    title: {
      type: String,
      default: ''
    },
    promptList: {
      type: Array,
      default() {
        return []
      }
    },
    cancelBtn: {
      type: Object,
      default() {
        return {
          href: 'javascript:;',
          active: false,
          disabled: false,
          text: ' close '
        }
      }
    },
    confirmBtn: {
      type: Object,
      default() {
        return {
          href: 'javascript:;',
          active: true,
          disabled: false,
          text: ' confirm '
        }
      }
    }
  },
  data() {
    return {}
  },
  computed: {
    containerClass() {
      return `cube-dialog-${this.type}`
    },
    isPrompt() {
      return this.type === 'prompt'
    },
    isConfirm() {
      return this.type === 'confirm'
    }
  },
  methods: {
    show() {
      this.$refs.selfPopup.show()
    },
    hide() {
      this.$refs.selfPopup.hide()
    },
    maskClick(e) {
      this.maskClosable && this.cancel(e)
    },
    confirm(e) {
      if (this.confirmBtn.disabled) {
        return
      }
      this.$emit('EVENT_CONFIRM', e, this.promptValue)
    },
    cancel(e) {
      if (this.cancelBtn.disabled) {
        return
      }
      this.$refs.selfPopup.hide()
      this.$emit('EVENT_CANCEL', e)
    },
    close(e) {
      this.$refs.selfPopup.hide()
      this.$emit('EVENT_CLOSE', e)
    },

    showPicker(item, index) {
      this.picker = this.$createPicker({
        title: item.label,
        data: [item.column],
        onSelect: (value, i, text) => {
          this.promptList[index].value = text[0]
          this.promptList[index].key = value[0]
        }
        // onCancel: this.cancelHandle
      })
      this.picker.show()
    },
    say() {}
  }
}
</script>

<style>
.self-dialog-main .cube-input {
  border: 0.071429rem solid #ebebeb !important;
}
.self-dialog-main .cube-input-field {
  padding: 0.714286rem !important;
}
</style>

The main difference

The main difference is that cube-dialog-content The content of , Supports the extension of incoming configuration files . The second is to do some style compatibility and click event processing .

Demonstrate the incoming Additional profile

 [
  {
    
      type: 'number',
      value: '',
      require: true,
      label: ' Number ',
      placeholder: ' Number ',
      rules: {
    
        positiveInteger: true //  Positive integer 
      }
    },
    {
    
      type: 'select',
      value: '',
      key: '',
      label: ' reason ',
      require: true,
      placeholder: ' Please select the reason ',
      column: [
        {
     text: ' be damaged ', value: 'A' },
        {
     text: ' The loss of ', value: 'B' },
        {
     text: ' other ', value: 'C' }
      ]
    },
    {
    
      type: 'text',
      value: '',
      label: ' other ',
      placeholder: ' Please enter '
    }
  ]

end

• Of course, the current cognition is limited , This may not be the optimal solution .
• But this is also an idea that can be used for reference , Based on the original ui Components , Second creation , Meet customized needs , It's not impossible .
• In fact, I would like to say something more , Don't limit yourself to using ui frame . Always cv No growth . Try to read the source code more , Reading the source code is not the goal , Learning to explore the nature of the problem is the end point .
• come on. Encourage each other .