Vue.js元件封裝——下拉列表

阿新 • • 發佈：2019-01-13

<!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

Vue.js元件封裝——下拉列表

相關推薦