Vuetify でdialogの検索欄を作る (メモ)
Vue でnavバーを作っている中で、広い検索欄を作りたくなりました。
そこでVuetifyのdialogを使って作ってみました。
まずはtemplate。
<template>
<v-dialog v-model="dialog" persistent max-width="750">
<!-- nav -->
<template v-slot:activator="{ on, attrs }">
<v-card color="grey lighten-4" flat tile>
<v-toolbar>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon v-bind="attrs" v-on="on">
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon >
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</v-toolbar>
</v-card>
</template>
<!-- end nav -->
<!-- dialog -->
<v-card>
<v-card-title class="headline">
Search
</v-card-title>
<v-text-field class="ml-10" v-model="search_text" label="Input" style="width: 90%;"></v-text-field>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="green darken-1" text @click="closeDialog">
Cancel
</v-btn>
<v-btn color="green darken-1" text @click="searchDialog">
Search
</v-btn>
</v-card-actions>
</v-card>
<!-- end dialog -->
</v-dialog>
</template>
次にscript。
<script>
export default {
name: 'Nav',
data () {
return {
dialog: false,
search_text: '',
}
},
methods: {
closeDialog() {
this.dialog = false
this.search_text = ''
},
searchDialog() {
console.log(this.search_text)
this.dialog = false
this.search_text = ''
}
}
}
</script>
これを親コンポーネントに挿入すれば、簡単に広い検索欄を作ることができました。
参考にした公式ページ。
この記事が気に入ったらサポートをしてみませんか?