Element作為一個Vue的組件庫宽涌，除了有一些bug之外還是挺好用的稍坯。
比如實現(xiàn)一個下拉框
<div id="app">
<el-select v-model="selected" placeholder="選擇課程">
<el-option :value="null" label="全部"></el-option>
<el-option v-for="item in items" :key="item" :label="item" :value="item"></el-option>
</el-select>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
selected: null,
items: ["語文", "數(shù)學(xué)", "地理", "歷史", "英語", "物理"]
}
});
</script>
但如果一個系統(tǒng)中很多頁面需要用到這個東西汛聚，每次都要重寫，也是挺麻煩的畅买，所以可以考慮封裝一下
建一個my-element.js
Vue.component('my-select-ke', {
data: function () {
return {
selected: null,
items: ["語文", "數(shù)學(xué)", "地理", "歷史", "英語", "物理"]
};
},
template: `
<el-select v-model="selected" placeholder="選擇課程">
<el-option :value="null" label="全部"></el-option>
<el-option v-for="item in items" :key="item" :label="item" :value="item"></el-option>
</el-select>`,
});
現(xiàn)在只要引用js 就可以直接生效了
<script src="my-element.js"></script>
<div id="app">
<my-select-ke></my-select-ke>
</div>
<script>
var vm = new Vue({
el: "#app
});
</script>
效果和之前是一樣的
不過這個時候值是無法回傳的
所以需要再實現(xiàn)一個 v-model 回傳選中的值
Vue.component('my-select-ke', {
data: function () {
return {
selected: null,
items: ["語文", "數(shù)學(xué)", "地理", "歷史", "英語", "物理"]
};
},
model: {
event: 'change'
},
watch: {
selected: function (val) {
this.$emit("change", val);
}
},
template: `
<el-select v-model="selected" placeholder="選擇課程">
<el-option :value="null" label="全部"></el-option>
<el-option v-for="item in items" :key="item" :label="item" :value="item"></el-option>
</el-select>`,
});
使用 model設(shè)置綁定事件并闲，用watch觀察selected屬性，并觸發(fā)change事件發(fā)送值
<div id="app">
<my-select-ke v-model="ke"></my-select-ke>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
ke: null
}
});
</script>
現(xiàn)在就可以設(shè)置v-model屬性了
Element的select本身是支持多選的谷羞，如果我們自己的組件也需要多選帝火，需要把multiple屬性傳遞到el-select中去
Vue.component('my-select-ke', {
data: function () {
return {
selected: "",
items: ["語文", "數(shù)學(xué)", "地理", "歷史", "英語", "物理"]
};
},
props:["multiple"], //聲明props
model: {
event: 'change'
},
watch: {
selected: function (val) {
this.$emit("change", val);
}
},
template: `
<el-select v-model="selected" placeholder="選擇課程" :multiple="multiple"> <!-- 傳遞屬性 -->
<el-option v-for="item in items" :key="item" :label="item" :value="item"></el-option>
</el-select>`,
});
最后，如果列表的數(shù)據(jù)并不是寫死的湃缎，而且通過接口獲取的犀填，可以繼續(xù)改造
Vue.component('my-select-ke', {
data: function () {
return {
selected: "",
items: ["語文", "數(shù)學(xué)", "地理", "歷史", "英語", "物理"]
};
},
props: ["query", "placeholder", "clearable", "size", "multiple"],
model: { event: 'change' },
watch: {
selected: function (val) {
this.$emit("change", val);
}
},
methods: {
ajax: function (key) {
this.loading = true;
var query = this.query || {};
fetchival('/api/ke/list', { credentials: 'include' })
.get({ keyWord: key, size: query.size })
.then(function (data) {
this.loading = false;
this.items = data.Items;
}.bind(this));
},
label: function (item) {
return item.name + "(" + item.teacher + ")";
}
},
mounted: function () {
this.ajax();
},
template: `
<el-select v-model="selected" :multiple="multiple" :clearable="clearable" :size="size" :placeholder="placeholder" filterable remote :loading="loading" :remote-method="ajax" value-key="id">
<el-option v-for="item in items" :key="item.id" :label="label(item)" :value="item"></el-option>
</el-select>`
});
<div id="app">
<my-select-ke v-model="ke" :query="{size:5}"></my-select-ke>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
ke: null,
}
});
</script>
