screen_rotation
Copied to Clipboard
<html> <head> <script src="https://unpkg.com/vue@3.2.21/dist/vue.global.js"></script> </head> <body> <div id="app"> <h3>Vue Dropdown with Image</h3> <p>Selected Value:{{selectedOption}}</p> <div class="dropdown"> <div class="dropdown-toggle" v-on:click="toggleDropdown"> <img :src="selectedOption.image" class="dropdown-option-image"> <span class="dropdown-option-label">{{ selectedOption.label }}</span> <span class="dropdown-caret"></span> </div> <ul class="dropdown-menu" v-show="isDropdownOpen"> <li v-for="option in options" v-on:click="selectOption(option)"> <img :src="option.image" class="dropdown-option-image"> <span class="dropdown-option-label">{{ option.label }}</span> </li> </ul> </div> </div> <script type="module"> const app = Vue.createApp({ data() { return { isDropdownOpen: false, selectedOption: null, options: [ { label: 'John Andrew ', image: 'https://www.sarkarinaukriexams.com/images/post/1683451563Vue_Js_Open_link_in_new_tab.jpg' }, { label: 'Mr. Bob', image: 'https://www.sarkarinaukriexams.com/images/post/1683451563Vue_Js_Open_link_in_new_tab.jpg' }, { label: 'Jimmy Charlie', image: 'https://www.sarkarinaukriexams.com/images/post/1683451563Vue_Js_Open_link_in_new_tab.jpg' }, { label: 'David', image: 'https://www.sarkarinaukriexams.com/images/post/1683451563Vue_Js_Open_link_in_new_tab.jpg' }, { label: 'Emily', image: 'https://www.sarkarinaukriexams.com/images/post/1683451563Vue_Js_Open_link_in_new_tab.jpg' }, { label: 'Frank', image: 'https://www.sarkarinaukriexams.com/images/post/1683451563Vue_Js_Open_link_in_new_tab.jpg' }, { label: 'John Andrew ', image: 'https://www.sarkarinaukriexams.com/images/post/1683451563Vue_Js_Open_link_in_new_tab.jpg' }, { label: 'Mr. Bob', image: 'https://www.sarkarinaukriexams.com/images/post/1683451563Vue_Js_Open_link_in_new_tab.jpg' }, { label: 'Jimmy Charlie', image: 'https://www.sarkarinaukriexams.com/images/post/1683451563Vue_Js_Open_link_in_new_tab.jpg' }, { label: 'David', image: 'https://www.sarkarinaukriexams.com/images/post/1683451563Vue_Js_Open_link_in_new_tab.jpg' }, { label: 'Emily', image: 'https://www.sarkarinaukriexams.com/images/post/1683451563Vue_Js_Open_link_in_new_tab.jpg' }, { label: 'Frank', image: 'https://www.sarkarinaukriexams.com/images/post/1683451563Vue_Js_Open_link_in_new_tab.jpg' }, ], }; }, created() { this.selectedOption = this.options[0]; }, methods: { toggleDropdown() { this.isDropdownOpen = !this.isDropdownOpen; }, selectOption(option) { this.selectedOption = option; this.isDropdownOpen = false; }, }, }); app.mount('#app'); </script> <style scoped> /* General styles */ * { box-sizing: border-box; font-family: sans-serif; } /* Dropdown styles */ .dropdown { position: relative; display: inline-block; } .dropdown-toggle { display: flex; align-items: center; padding: 12px; background-color: #fff; border: 1px solid #ccc; cursor: pointer; user-select: none; transition: background-color 0.2s ease; } .dropdown-toggle:hover { background-color: #f8f8f8; } .dropdown-option-image { width: 40px; height: 40px; margin-right: 12px; border-radius: 50%; } .dropdown-option-label { flex-grow: 1; } .dropdown-caret { display: inline-block; margin-left: 12px; width: 0; height: 0; border-style: solid; border-width: 8px 8px 0 8px; border-color: #999 transparent transparent transparent; } .dropdown-menu { position: absolute; top: 100%; left: 0; margin: 0; padding: 12px 0; background-color: #fff; border: 1px solid #ccc; border-top: none; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); list-style: none; z-index: 1; transform: translateY(-12px); transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; max-height: 200px; overflow-y: auto; } .dropdown-menu li { display: flex; align-items: center; padding: 12px 15px; cursor: pointer; transition: background-color 0.2s ease; } .dropdown-menu li:hover { background-color: #f8f8f8; } .dropdown-menu li .dropdown-option-image { margin-right: 12px; } .dropdown-menu li .dropdown-option-label { flex-grow: 1; } </style> </body> </html>