在Vue中封裝一個select元件
我們使用iview封裝一個select元件
封裝的是每一個select下拉框
<div class='iselect'>
<!-- 非多選的情況 -->
<i-select
v-if='!ismultiple'
v-model='selecteddata'
:placeholder='placeholdertext'
filterable
clearable
@on-change='getSelectedData'
>
<i-option
v-for ='item in list'
:value='item.value'
:key='item.id'
>{{item.label}}
</i-option>
</i-select>
<!-- 多選的情況 -->
<i-select
v-if='ismultiple'
v-model='selecteddata'
:placeholder='placeholdertext'
filterable
multiple
@on-change='getSelectedData'
>
<i-option
v-for ='item in list'
:value='item.value'
:key='item.id'
>{{item.label}}
</i-option>
</i-select>
</div>
</template>
<script>
export default {
name: 'SelectBox',
props: {
placeholder: {
type: String,
required: false,
default: 'Select'
},
multiple: {
type: Boolean,
required: false,
default: false
},
optionlist: Array
},
watch: {
optionlist (val) {
this.list = val
}
},
data () {
return {
placeholdertext: this.placeholder,
list: [],
ismultiple: this.multiple,
selecteddata: []
}
},
methods: {
getSelectedData (value) {
this.selecteddata = value
this.$emit('getSelectedData', this.selecteddata)
}
}
}
</script>
iview 中的select比較醜,修改樣式忽略,很多修改外掛不成功是可能是scoped作用域的問題
使用iview select 的原因在於,它有搜尋功能,多選可以叉調功能,基本可以滿足下拉選單的功能
<i-select
:model.sync='selecteddata'
:placeholder='placeholdertext'
filterable multiple
@on-change='getselecteddata'
>
:model.sync='selecteddata'
為選中的option,當為單選的時候是字串或Number,多選時為陣列,需要在data中初始化
placeholder 我們根據外界傳過來的值顯示,預設可以設定為’Select’
props: {
placeholder: {
type: String,
required: false,
default: 'Select'
}
}
filterable multiple :可搜尋,可多選
@on-change=’getselecteddata’: 這個是得到選中的資料!注意必須寫為on-change才生效,得到的是資料中value的值,如果想要得到label的值,需要在select 新增label-in-value
得到的是陣列物件
我們封裝的select元件可以根據使用者傳入判斷是單選還是多選,加一個判斷引數,預設是單選的。
非同步資料傳輸子元件監聽一下來自父元件資料的變化。
我們得到這個資料需要往父元件中傳遞,父元件得到引數往後臺傳遞
methods: {
getselecteddata (value) {
// console.log(value)
this.$emit('getSelectedData', value)
}
}
value是選中的option構成的陣列
<i-option
v-for ='(item, index) in list'
:value='item.value'
:key='index'
>{{item.label}}
</i-option>
option中迴圈遍歷下拉選單資料,是父元件傳遞過來的
props: {
optionlist: Array
}
歐克,在父元件中使用:
<select-box
:optionlist='citylist'
placeholder='Select City'
v-on:getdata='getSelectedData'
></select-box>
往父元件中傳遞placeholder值和下拉選單的資料
citylist: [
{
value: 'beijing',
label: '北京市'
},
{
value: 'shanghai',
label: '上海市'
},
{
value: 'shenzhen',
label: '深圳市'
},
{
value: 'hangzhou',
label: '杭州市'
},
{
value: 'nanjing',
label: '南京市'
},
{
value: 'chongqing',
label: '重慶市'
}
]
同時,父元件需要接收一個選中的option陣列
v-on:getdata='getSelectedData'
...
methods: {
getSelectedData (data) {
console.log(data)
}
}
這樣父元件就得到了子元件的選中的值了
相關文章
- 在vue中封裝一個從右至左滾動公告的元件Vue封裝元件
- 基於Vue.js封裝一個簡單的select元件Vue.js封裝元件
- 面向Vue新人:使用Vue自定義指令來完善一個Select元件Vue元件
- WPF中封裝一個自己的MessageBox封裝
- Vue中封裝axios傳送請求Vue封裝iOS
- vue.js中封裝全域性filterVue.js封裝Filter
- 在Flutter中封裝redux的使用Flutter封裝Redux
- 在webview_flutter中封裝JSBridgeWebViewFlutter封裝JS
- vue--select父子元件通訊Vue元件
- 聊天室軟體原始碼中封裝一個金額輸入框元件的實現原始碼封裝元件
- 論如何實現一個完美的Select元件元件
- .NET中封裝SqlHelper封裝SQL
- MapStruct在專案中封裝實踐-帶原始碼Struct封裝原始碼
- 專案中封裝axios封裝iOS
- Vue.js 多選列表(Multi-Select)元件Vue.js元件
- 分享幾個我工作中封裝的typeScript方法封裝TypeScript
- 【vue3 + ts + echarts】封裝一個通用echarts元件-2.0版VueEcharts封裝元件
- 基於Ant Design Vue封裝一個表單控制元件Vue封裝控制元件
- Simulink中封裝子系統封裝
- vue中select繫結多個值Vue
- Vue的第一個元件設計Vue元件
- 封裝Vue元件的一些技巧封裝Vue元件
- Vue封裝一個簡單輕量的上傳檔案元件Vue封裝元件
- 在 vue-cil 裡封裝一個簡單的 axiosVue封裝iOS
- 從零實現Vue的元件庫(十)- Select 實現Vue元件
- vue元件封裝指南Vue元件封裝
- 一個Vue媒體多段裁剪元件Vue元件
- Select 元件實現元件
- Vue 折騰記 - (17) 基於Ant Design Vue 封裝一個配置式的表單元件Vue封裝元件
- 基於vue的Element-ui定義自己的select元件VueUI元件
- 面向Vue新人:使用Vue寫一個圖片輪播元件Vue元件
- Vue 折騰記 - (19) 基於Antd Design Vue 封裝一個符合業務的樹形元件Vue封裝元件
- eventBus(封裝) 一個巧妙的解決vue同級元件通訊的思路封裝Vue元件
- 用canvas實現一個vue彈幕元件CanvasVue元件
- vue寫一個炫酷的日曆元件Vue元件
- 實現一個vue元件庫釋出到npmVue元件NPM
- Vue 封裝動態元件Vue封裝元件
- 封裝Vue 的 SVG 元件封裝VueSVG元件