Question

我正在使用标准vuetifyjs/dialogs ...所有脚本和模板位于同一页面，没有服务器端。页面中的序列如下：

 <div id="main"> ... 
   <v-expansion-panel>...<!-- v-for... -->
      <v-btn @click="$emit('go-modal', {title: 'Hello', body: 'Bye!'})">Go</v-btn>
    ...
   </v-expansion-panel>
 </div>
...
<div id="appDlg">...
   <v-dialog v-model="dialog" fullscreen>...
     <v-btn color="primary" dark slot="activator">TEST</v-btn>
     ...
   </v-dialog>
</div>

（扩展面板和TEST btn正在运行！）和/ body脚本之后

var mainVue = new Vue({el: '#main',...});
new Vue({
  el: '#appDlg',
  //data () { return {
  data: {
      dialog: false,
      notifications: false,
      sound: true,
      widgets: false,
      ct_header: 'the header1 here',
      ct_body: 'the body1 here'
  },
  //}} // func data
  mounted() {
    mainVue.$on('go-modal', this.handleMain);
  },
  methods: {
    handleMain(data) {
      this.ct_header = data.title;
      this.ct_body = data.body;
    }
  }
}) //vue instance

Answer 1

要动态打开对话框，您需要将dialog设置为true。因此，只需在this.dialog = true;方法的最后一行添加handleMain即可。

这是一个基本的例子：

＆＃13;

// to get rid of "missing v-app" error message
var app = document.createElement('div');
app.setAttribute('data-app', true);
document.body.appendChild(app);

let mainVue = new Vue({ el: '#main' });

new Vue({
  el: '#appDlg',
  data() {
    return {
      dialog: false,
      ct_header: 'the header1 here',
      ct_body: 'the body1 here'
    }
  },
  mounted() {
    mainVue.$on('go-modal', this.handleMain);
  },
  methods: {
    handleMain(data) {
      this.ct_header = data.title;
      this.ct_body = data.body;          
      this.dialog = true;
    }
  }
});

＆＃13;

.myDialog { 
  padding: 10px;
  height: 100%;
  background-color: white; 
}

.myDialog .btn { margin: 20px 0 0 -4px; }

＆＃13;

<link href="https://unpkg.com/vuetify@0.14.8/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://unpkg.com/vuetify@0.14.8/dist/vuetify.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">

<div id="main">
  <v-expansion-panel>
    <v-btn @click="$emit('go-modal', {title: 'Hello', body: 'Bye!'})">Go</v-btn>
  </v-expansion-panel>
</div>

<div id="appDlg">
  <v-dialog v-model="dialog" fullscreen>
    <v-btn color="primary" dark slot="activator">TEST</v-btn>
    <div class="myDialog">
      <h4>{{ ct_header }}</h4>
      <div>{{ ct_body }}</div>
      <v-btn @click="dialog = false">Close</v-btn>
    </div>
  </v-dialog>
</div>

＆＃13;

在其他实例发出go-modal什么都不做，如何调用模态？

1 个答案: