Quasar - популярная библиотека пользовательского интерфейса Vue для разработки красивых приложений Vue.
В этой статье мы рассмотрим, как создавать приложения Vue с помощью библиотеки Quasar UI.
Режим аккордеонного дерева
Мы можем показать дерево в виде гармошки с опорой accordion
:
<!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css" /> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.min.css" rel="stylesheet" type="text/css" /> </head> <body class="body--dark"> <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js"></script> <div id="q-app"> <q-tree :nodes="data" node-key="label" selected-color="primary" :selected.sync="selected" default-expand-all accordion > </q-tree> </div> <script> const data = [ { label: "Hotel", children: [ { label: "Food", icon: "restaurant_menu" }, { label: "Room service", icon: "room_service" }, { label: "Room view", icon: "photo" } ] } ]; new Vue({ el: "#q-app", data: { data, splitterModel: 50, selected: "Food" } }); </script> </body> </html>
Узлы дерева фильтров
Мы можем добавить фильтр, чтобы пользователи могли искать узлы дерева.
Например, мы можем написать:
<!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css" /> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.min.css" rel="stylesheet" type="text/css" /> </head> <body class="body--dark"> <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js"></script> <div id="q-app"> <q-input ref="filter" filled v-model="filter" label="Filter"> <template v-slot:append> <q-icon v-if="filter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" > </q-icon> </template> </q-input> <q-tree :nodes="data" node-key="label" :filter="filter" default-expand-all > </q-tree> </div> <script> const data = [ { label: "Hotel", children: [ { label: "Food", icon: "restaurant_menu" }, { label: "Room service", icon: "room_service" }, { label: "Room view", icon: "photo" } ] } ]; new Vue({ el: "#q-app", data: { data, filter: "" }, methods: { resetFilter() { this.filter = ""; this.$refs.filter.focus(); } } }); </script> </body> </html>
Мы добавляем q-input
, привязанный к реактивному свойству filter
.
Затем мы передаем реактивное свойство filter
в качестве значения filter
prop компонента q-tree
.
Это позволит нам искать узлы при вводе текста в поле ввода.
Выбираемые узлы
Мы можем установить узлы как выбранные, установив в качестве значения реактивное свойство, привязанное к q-tree
.
Например, мы можем написать:
<!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css" /> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.min.css" rel="stylesheet" type="text/css" /> </head> <body class="body--dark"> <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js"></script> <div id="q-app"> <div> <div class="q-gutter-sm"> <q-btn size="sm" color="primary" @click="selectRoomService" label="Select Room service" > </q-btn> <q-btn v-if="selected" size="sm" color="red" @click="unselectNode" label="Unselect node" > </q-btn> </div> </div> <q-tree :nodes="data" default-expand-all :selected.sync="selected" node-key="label" > </q-tree> </div> <script> const data = [ { label: "Hotel", children: [ { label: "Food", icon: "restaurant_menu" }, { label: "Room service", icon: "room_service" }, { label: "Room view", icon: "photo" } ] } ]; new Vue({ el: "#q-app", data: { data, selected: "" }, methods: { selectRoomService() { if (this.selected !== "Room service") { this.selected = "Room service"; } }, unselectNode() { this.selected = null; } } }); </script> </body> </html>
В методе selectRoomService
мы устанавливаем this.selected
на 'Room service'
.
И поскольку this.selected
привязан к q-tree
с v-model
, узел будет выбран.
И если мы установим его в null
, как мы это делали в unselectNode
, узел не будет выбран.
Заключение
Мы можем настроить компонент дерева Quasar и добавить к нему функции фильтрации и выбора.