|
<template>
<div class="control_wrapper">
<ejs-dropdownlist id='dropdownlist' :allowFiltering='true' :dataSource='sportsData' :open='componentCreated'></ejs-dropdownlist>
</div>
</template>
<script>
import { DropDownListComponent
} from "@syncfusion/ej2-vue-dropdowns";
//Component
registeration
export default {
name: 'App',
components:
{
'ejs-dropdownlist' : DropDownListComponent,
},
data ()
{
return {
sportsData: ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis']
}
},
methods: {
componentCreated: function () {
var dropObj = document.getElementById('dropdownlist').ej2_instances[0];
var iconElement =
dropObj.popupObj.element.querySelector(".e-filter-parent
.e-input-group-icon");
iconElement.classList.remove("e-clear-icon");
iconElement.classList.add("e-search");
iconElement.style.visibility = "visible";
iconElement.addEventListener("click", function(){
console.log("IConclicked");
});
},
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
.control_wrapper {
max-width: 250px;
margin: 0 auto;
}
.e-search:before{
content:'\e993';
}
</style>
|
