線上直播原始碼,開發一個下拉選單元件
線上直播原始碼,開發一個下拉選單元件
1. 建立dropdown元件
<template> <div> <a class="btn btn-outline-light dropdown-toggle my-2" @click.prevent="toggleOpen">{{ title }}</a> <ul v-if="isOpen" :style="{display: 'block'}"> <slot></slot> </ul> </div> </template> <script> import {defineComponent, ref} from 'vue' export default defineComponent({ name: "Dropdown", props: { title: String }, setup() { const isOpen = ref(false) const toggleOpen = () => { isOpen.value = !isOpen.value } return { isOpen, toggleOpen } } }) </script>
要點: slot插槽用於填充元件。vue3與vue2的不同點在於,變數使用了ref來表示,改變變數需要改變變數的value值。變數,事件等等統一寫在setup裡面,並且返回出來。
2. dropdown-item元件
<template> <li :class="{'is-disabled': disabled}"> <slot></slot> </li> </template> <script> import {defineComponent} from 'vue' export default defineComponent({ name: "DropdownItem", props: { disabled: { type: Boolean, default: false } } }) </script> <style scoped> .is-disabled { color: gray; pointer-events: none; background-color: transparent; } </style>
以上就是線上直播原始碼,開發一個下拉選單元件, 更多內容歡迎關注之後的文章
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69978258/viewspace-2989362/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 成品直播原始碼推薦,Android 禁止下拉選單欄原始碼Android
- 線上直播原始碼如何開發能夠快速引流?原始碼
- 線上直播系統原始碼,取CTreeCtrl控制元件選中節點的文字原始碼控制元件
- 線上直播原始碼開發IOS端問題解決方案原始碼iOS
- 直播平臺原始碼,自定義下拉重新整理控制元件原始碼控制元件
- 線上直播原始碼想要順利完成直播軟體開發需要哪些條件原始碼
- 線上直播原始碼開發的小店核心功能都是什麼?原始碼
- 線上直播系統原始碼,實現翻頁載入、下拉滾動載入原始碼
- 線上直播原始碼,單獨修改狀態列顏色原始碼
- 夢幻直播短影片軟原始碼件瀑布式播放模式原生開發線上直播原始碼模式
- 夢幻線上教育軟體原始碼教育直播app開發功能完善個性化需求全量開發原始碼APP
- 影片直播原始碼,預設展開側邊欄選單原始碼
- 直播網站原始碼,js動態追加 初始化下拉選項網站原始碼JS
- 線上直播系統原始碼,滾動式內容展示控制元件原始碼控制元件
- 直播系統定製開發選擇開原始碼已成折中之選原始碼
- 萬嶽教育系統-線上教育直播原始碼的開發誤區原始碼
- 線上直播原始碼的開發較和其他APP的成本區別在哪?原始碼APP
- 怎樣開發一對一直播原始碼?原始碼
- 微信小程式下拉選單自定義元件微信小程式元件
- android短視訊開發,自定義下拉選單Android
- [開發教程] 第32講:Bootstrap導航選單裡的下拉選單boot
- 線上直播系統原始碼,Android開發之自帶陰影效果的shape原始碼Android
- 如何看待一對一直播原始碼開發工作原始碼
- 教育直播平臺原始碼:影響線上教育直播系統開發週期的因素有哪些原始碼
- antd design Menu選單下拉回撥以及下拉選單時只能顯示一個列表,其餘關閉
- 直播原始碼,下拉重新整理和上劃預載入新內容原始碼
- 直播原始碼開發,el-input 只展示下劃線原始碼
- 線上教育系統原始碼平臺搭建 教育APP開發 教育直播原始碼獨立運營版原始碼APP
- 影片直播原始碼,下拉多選el-tag顯示在輸入框中原始碼
- 直播帶貨原始碼的下一個發展方向:企業直播原始碼
- 教育網站原始碼:線上教育直播系統如何開發才能吸引使用者?網站原始碼
- 直播軟體原始碼開發千萬不能忘的一個知識點原始碼
- 直播系統開發鼎盛期,線上直播原始碼需不斷進行細節最佳化原始碼
- 線上直播系統原始碼,自定義底部 BottomNavigationBar原始碼Navigation
- 線上直播原始碼,自定義氣泡效果(BubbleView)原始碼View
- vue下拉選單Vue
- 線上直播系統原始碼,LinearLayout下多個ListView實現滾動原始碼View
- 直播商城原始碼,PopupWindow選單在ListView中顯示原始碼View