vue.js - 选择项目时的Vue - >父和子弹出框关闭但只有子应关闭

问题描述

所以在设置中我们得到了 3 个选择组件。字体、文本大小和主题如图所示。当我选择一种字体或其他东西时，父弹出框也会关闭。我只希望这个示例字体中的孩子关闭。否则，我必须单击“设置”才能打开父弹出窗口。\n

Settings.vue（父）：

<template>
  <v-popover placement="left-start">
    <button-ui icon>
      <fa icon="cog" size="lg"/>
    </button-ui>
    <template slot="popover">
      <card-ui>
        <list-ui>
          <switch-ui
           class="mr-6" :value="settings.autoSave"
           @change="updateSetting('autoSave', $event)"></switch-ui>
          <p>Auto Save</p>
        </list-ui>
        <list-ui>
          <switch-ui class="mr-6" :value="settings.syncScroll"
           @change="updateSetting('syncScroll', $event)"></switch-ui>
          <p>Sync Scroll</p>
        </list-ui>
        <list-ui>
          <span class="mr-6">Font :</span><span class="mr-1"></span>
          <select-ui class="ml-6" :value="settings.font"
          :list="optionFont" @input="updateSetting('font', $event)"/>
        </list-ui>
        <list-ui>
          <span class="mr-6">Textsize :</span>
          <select-ui :value="settings.size" :list="optionSize" @input="updateSetting('size', $event)"/>
        </list-ui>
        <list-ui>
          <span class="mr-6">Theme :</span><span class="mr-2"></span>
          <select-ui :value="settings.theme" :list="optionTheme" @input="updateSetting('theme', $event)"/>
        </list-ui>
      </card-ui>
    </template>
  </v-popover>
</template>
<script>

export default {
  data() {
    return {
      optionFont: ['Arial', 'Helvetica', 'Verdana', 'Calibri', 'Gill Sans', 'Consolas'],
      optionSize: ['8', '10', '12', '14', '16', '18', '20', '24'],
      optionTheme: [
        'default', '3024-night', 'ayu-dark', 'base16-light', 'blackboard', 'darcula', 'dracula', 'duotone-dark',
        'duotone-light', 'gruvbox-dark',
      ],
    };
  },
  computed: {
    settings() {
      return this.$store.state.settings;
    },
  },
  methods: {
    updateSetting(key, value) {
      this.$store.commit('settings/update', {
        key,
        value,
      });
      console.log(key, value);
    },
    mounted() {
      const recaptchaScript = document.createElement('script');
      recaptchaScript.setAttribute('src', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js');
      document.head.appendChild(recaptchaScript);
    },
  },
};
</script>

选择.vue（子）：

<template>
  <v-popover placement="bottom" offset="10">
    <div class="select-ui" tabindex="0" :class="{ block }">
      <div class="select-ui--inner">
        <slot name="selected" :value="value">
          <p class="text-overflow text">{{ value }}</p>
        </slot>
        <fa icon="chevron-down"></fa>
      </div>
    </div>
    <card-ui slot="popover" class="shadow-xl border select-ui--content">
      <p class="font-semibold" slot="header" v-if="!!title">{{ title }}</p>
      <div
       class="select-ui--item"
       v-for="item in list"
       :key="item"
       @change="$emit('change', item)"
       @click="$emit('input', item)"
       v-close-popover>
        <slot name="option" :value="item">{{ item }}</slot>
      </div>
    </card-ui>
  </v-popover>
</template>
<script>
import '~/assets/scss/components/_select.scss';

export default {
  name: 'select-ui',
  props: {
    value: [String, Number],
    list: Array,
    block: Boolean,
    title: String,
  },
};
</script>

标签： vue.jsvuejs2vue-component

vue.js - 选择项目时的Vue - >父和子弹出框关闭但只有子应关闭

问题描述

解决方案

推荐阅读