Vue.js元件封裝——下拉列表
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible"content="IE=edge"> <title>封裝元件-下拉選單</title> <style> *{margin:0;padding:0;} #app{ width:600px; height:auto; margin:0 auto; /*background-image: url("http://www.51edu.com/ueditor2014/php/upload/image/20150216/1424069121411681.png");*/ background-color:#ffc321; background-repeat:no-repeat; margin-top:20px; border-radius:20px; } h2{ text-align:center; vertical-align:middle; } ulli{ list-style:none; margin-left:20px; } .warp{ width:180px; height:auto; margin:0 auto; line-height:35px; vertical-align:middle; text-decoration:none; font-family:"微軟雅黑"; font-size:14px; color:#750000; } .searchIpt{ border:2pxdashed #d94600; border-radius:6px; background-color:#fff; } .keyWord{ display:block; width:120px; height:25px; border-radius:8px; float:left; } </style> <script src="https://unpkg.com/vue"></script> </head> <body> <!-- 元件的基本組成: 樣式結構 行為邏輯 資料 --> <div id="app"> <h2>自定義的下拉選單</h2> <custom-select bt-Value="查詢"v-bind:list="list1"></custom-select> <br> <h2>自定義的下拉選單2</h2> <!-- <table> //使用is屬性設定自定義元件 <tr is="custom-select"></tr> </table> --> <custom-select bt-Value="搜尋"v-bind:list="list2"></custom-select> </div> <script> //註冊元件 Vue.component("custom-select",{ data:function(){//data中只能設定函式式 return { selectShow:{ type:Boolean, default:true }, val:"" }; }, props:["btValue","list"],//自定義引數設定函式 //設定模版格式 template:` <section class='warp'> <div class='searchIpt clearFix'> <div class='clearFix'> <input type='text' class='keyWord' :value='val' @click='selectShow=!selectShow'> <input type='button' v-bind:value='btValue'> <span></span> </div> <custom-list v-show='selectShow' :list='list' v-on:receive='changeValueHandle' ></custom-list> </div> </section>`, methods:{ changeValueHandle(value){ // alert(value); // console.log(value); this.val= value; // console.log(this.val); } } }) Vue.component("custom-list",{ props:['list'], template:` <ul class='list' v-show='selectShow'> <li v-for='item of list' @click="selectValueHandle(item)">{{item}}</li> </ul>`, methods:{ selectValueHandle:function(item){ //在子元件中點選互動 //告知父級,改變val值,需要觸發一個自定義事件 this.$emit("receive",item); } } }) newVue({ el:"#app", data:{ list1:["北京",'上海','成都','杭州','重慶'], list2:['170201','170202','170203','170204'] } }) </script> </body> </html>
相關推薦
Vue.js元件封裝——下拉列表
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible"content="IE=edge"&g
Vue.js做select下拉列表(ul-li標籤仿select標籤)
目標:用ul-li標籤結合Vue.js知識做一個模仿select標籤的下拉選項列表。 知識點: 元件的寫法及運用 元件之間的資料傳遞(props的運用) 元件之間的資料傳遞($emit的運用) 動
Vue 表格裏的下拉列表
ESS computed line method edit team for eth text 下拉列表column-select.vue組件內容: <template> <div class="column-select-wrapper">
js操作select下拉列表
js操作select下拉列表 一,通過已有的值,與select的值比較,並將其設定為預設 select程式碼: <select name="tigong" id="tigong"> <option value="null">--全部--</
基於bootstrap-dialog封裝下拉列表彈出層外掛
引入js檔案 jquery版本1.11.3,bootstrap3.x,第三個檔案為本文封裝的js <script src="/js/jquery-1.11.3.min.js"></script> <script src="
vue.js中關於下拉框的值預設及繫結問題
一、今天遇到vue中下拉框問題,故而寫點東西留個腳印 <template> <select v-model='selected' @click="disable()"> <option v-for="(option,index) i
關於js動態向下拉列表中新增資料
在網上找的,經過試驗還不錯,反正很適合我,直接。 大體的思路就是: var objSelect = document.getElementById("leixingwx");//獲得select標籤物
Vue.js:Select--Option >下拉框繫結和取值
遇到了這個解決了,所以記錄一下: 完成vue.js下拉框選擇繫結與取值,實現效果圖如下: template程式碼 <template> <div> <Form :model="form
vue實現下拉列表多選全選以及模糊查詢的vue元件
前端,有時有這樣的需求,需要一個下拉列表,還要有多選全選功能,以及模糊查詢功能的vue元件,我做了一個簡陋的元件,供大家參考,有問題請留言 這是我的檔案目錄結構 ** 效果圖: o(∩_∩)o o(∩_∩)o o(∩_∩)o o(∩_∩)o o(∩_
25.用js和jquery實現下拉列表的左右選擇
select2 hit color nts -type utf ctype block 標簽 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x
初學js---下拉列表
tlist 事件監聽 span css 發生 mouseover char com ima 點擊藍框出現可選擇的下拉列表,鼠標以上下拉列表,列表顯示,移出,列表隱藏,點擊需要選擇的值課實現交換: 1.顯示與隱藏下拉列表只需要在點擊藍框時改變下拉框的display即可; 2
高階控制元件 自動提示文字框與下拉列表
一、 高階控制元件使用步驟 1 、獲取資料 2 、建立介面卡 3 、繫結介面卡 二、自動提示文字框 1 、AutoCompleteTextView(單一提示) android:completionThreshold=”1” 2 、MultiAutoCompleteTextV
[log] vue使用Mint元件實現下拉重新整理、上拉載入
https://mint-ui.github.io/docs/#/zh-cn2/loadmore 使用的vue <mt-loadmore :top-method="loadTop" :bottom
Android 開發:(十)初識ExpandableListView(可擴充套件的下拉列表元件)
隨便扯點兒 前幾天做iOS仿QQ,其中好友列表頁面就有下拉列表的功能,iOS做法應該比安卓稍微複雜一點,其中佈局以及一些實現方法(協議方法)都類似,不一樣的應該是動畫切換效果,安卓提供現成的元件,用原生的就可以實現。 iOS示例 http://blog.
如何對第一個Vue.js元件進行單元測試 (下)
我們的首次測試 讓我們來寫首個測試。我們首先需要使用shallowMount手動掛載我們的元件,並將其儲存在我們將執行斷言的變數中。我們還可以通過propsData屬性傳遞道具作為物件。 已安裝的元件是一個物件,它有一些實用方法: 然後,我們可以寫第一個斷言: 讓我們來
vue實現下拉列表
<el-select v-model="form.fzr" placeholder="負責任"> <el-option v-for="(item,index) in fzr1" :key="index" :label="item.label" :value=
Androin高階控制元件01 自動提示文字框與下拉列表
1、高階控制元件展示 2、高階控制元件與低階控制元件區別 是否使用介面卡 介面卡種類和作用 3.1 種類 陣列介面卡 ArrayAdapter new ArrayAdapter(this,R.layout.actv_style, names); 3.2 簡單介面卡
高階控制元件:自動提示文字框和下拉列表
高階控制元件 高階控制元件使用步驟 3.1 獲取資料 3.2 建立介面卡 陣列介面卡 ArrayAdapter 簡單介面卡 SimpleAdapter 3.3 繫結介面卡 高階控制元件與低階控制元件區別: **是否使用介面
高階控制元件及自動提示文字框與下拉列表
高階控制元件與低階控制元件區別 是否使用介面卡 介面卡種類和作用 2.1 種類 陣列介面卡 ArrayAdapter new ArrayAdapter(this,R.layout.actv_style, names); 簡單介面卡 SimpleAdapt
高階控制元件01 自動提示文字框與下拉列表
自動提示文字框 4.1 AutoCompleteTextView(單一提示) android:completionThreshold=“1” 4.2 MultiAutoCompleteTextView(多次提示)–作業 //設定多次提示時,設定分隔符方法 Tokenizer t = new MultiAuto