使用 v-edit-dialog 时如何停止传播/打开 v-expansion-panel? [英] How to Stop Propagation / Opening v-expansion-panel when using v-edit-dialog?

问题描述

扩展面板上包含的任何类型的按钮也会在您单击时打开/关闭面板(传播)，这通常是不受欢迎的.使用@click.stop 可以轻松防止这种情况.然而，v-edit-dialog 组件提出了一个挑战.如何防止此编辑对话框在激活时打开/关闭扩展面板?

new Vue({el: '#app',数据(){返回 { 标题:可编辑的标题"}}})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script><link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons'rel="stylesheet"><link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"><div id="应用程序"><v-app id="inspire"><v-卡片宽度=400><v-expansion-panel popout><v-expansion-panel-content><div slot="header"><v-edit-dialog :return-value.sync="title">{{ 标题 }}<v-text-field slot="input" v-model="title"></v-text-field></v-edit-dialog>

<v-card color="blue lighten-4"><v-card-text>Lorem ipsum dolor sat amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exeritation ullamco Laboris nisi ut aliquip ex ea commodo consequat.</v-card-text></v-card></v-expansion-panel-content></v-扩展面板></v-card></v-app>

解决方案

您可以使用 @click.native.stop

 可编辑的标题<v-text-field slot="input"></v-text-field></v-edit-dialog>

Codepen 演示

Any kind of button included on the expansion panel will also open/close the panel when you click it (propagation), which is undesired generally. This is easily prevented with using @click.stop. v-edit-dialog component presents a challenge however. How do you prevent this edit-dialog from opening/closing the expansion panel when it is activated?

new Vue({
 el: '#app',
 data(){    
   return { title: "Editable Title" }
 }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app id="inspire">
    <v-card width=400>
    <v-expansion-panel popout>
          <v-expansion-panel-content>
            <div slot="header">
              <v-edit-dialog :return-value.sync="title">                
                {{ title }}              
            <v-text-field slot="input" v-model="title"></v-text-field>
          </v-edit-dialog>
            </div>
            <v-card color="blue lighten-4">
              <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-card-text>
            </v-card>
          </v-expansion-panel-content>
        </v-expansion-panel>
        </v-card>
  </v-app>
</div>

解决方案

You can use @click.native.stop

          <v-edit-dialog @click.native.stop>                
                Editable Title                 
            <v-text-field slot="input"></v-text-field>
          </v-edit-dialog>

Codepen demo

这篇关于使用 v-edit-dialog 时如何停止传播/打开 v-expansion-panel?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！