手把手教网站建设,互联网服务行业有哪些,网站策划案,下载宝硬盘做网站最近在需求中#xff0c;需要有一个下拉选择功能#xff0c;又得可以输入#xff0c;在 element-ui 官网找了#xff0c;发现没有适合的#xff0c;然后在修炼 cv 大法的我#xff0c;也在网上看了一下#xff0c;但是也都感觉不合适#xff0c;所以就自己写了两个需要有一个下拉选择功能又得可以输入在 element-ui 官网找了发现没有适合的然后在修炼 cv 大法的我也在网上看了一下但是也都感觉不合适所以就自己写了两个供大家参考一下
下拉选择输入框子组件1 代码
templatediv classcontainerel-popover v-modelvisibletriggerclickpopper-classselect-inputplacementbottomwidth400divdiv classitemv-for(item,index) in selectArr:keyindexclickchooseItem(item){{ item[selectObj.label] }}/div/divel-input slotreferencev-modelinputplaceholder请输入内容inputinputChange/el-input/el-popover/div
/template
script
export default {name: select-input-popover,props: {inputValue: { // 父组件需要改变的数据type: String,default: },selectArr: { // 下拉的选项type: Array,default: () []},selectObj: {type: Object,default: () ({value: value, // 选中的时候赋的值label: label // 用于显示的名称})}},watch: {input (val) {const obj this.selectArr?.find((el) {return el[this.selectObj.label] val})if (obj) { // 判断 input 的名称是否是下拉选择框里面的名称如果是把下拉选择框里面的值赋给父组件this.$emit(update:inputValue, obj[this.selectObj.value])return}this.$emit(update:inputValue, val) // 如果 input 的名称不是下拉选择框里面的名称把 input 的值赋给父组件}},data () {return {visible: false,input: };},methods: {chooseItem (item) {this.input item[this.selectObj.label]this.visible falsethis.$emit(update:inputValue, item[this.selectObj.value])},inputChange () {this.visible false}}
};
/scriptstyle langscss scoped
.container {position: absolute;left: 200px;top: 200px;margin: 0;max-width: 500px;
}
.item {cursor: pointer;padding: 0 20px;height: 34px;line-height: 34px;:hover {background: #f5f7fa;}
}
/style
style
.select-input {padding: 6px 0 !important;
}
/style
下拉选择输入框子组件2 代码
templatediv classcontainerel-dropdown visible-changetesttriggerclickcommandhandleCommandspan classel-dropdown-linkel-input classitemv-modelinputplaceholder请输入内容/el-input/spanel-dropdown-menu slotdropdownel-dropdown-item v-for(item,index) in selectArr:keyindex:commanditem{{ item[selectObj.label] }}/el-dropdown-item/el-dropdown-menu/el-dropdown/div
/templatescript
export default {name: select-input,props: {inputValue: { // 父组件需要改变的数据type: String,default: },selectArr: { // 下拉的选项type: Array,default: () []},selectObj: {type: Object,default: () ({value: value, // 选中的时候赋的值label: label // 用于显示的名称})}},watch: {input (val) {const obj this.selectArr?.find((el) {return el[this.selectObj.label] val})if (obj) { // 判断 input 的名称是否是下拉选择框里面的名称如果是把下拉选择框里面的值赋给父组件this.$emit(update:inputValue, obj[this.selectObj.value])return}this.$emit(update:inputValue, val) // 如果 input 的名称不是下拉选择框里面的名称把 input 的值赋给父组件}},data () {return {input: }},updated () {console.log(123);},methods: {test () {console.log(789);},handleCommand (val) { // 处理选项// console.log(val, val);// console.log(this.selectObj.value, selectObj);this.input val[this.selectObj.label]}}
}/scriptstyle scoped
.container {position: absolute;left: 200px;top: 200px;margin: 0;max-width: 500px;
}
.el-dropdown-menu {top: 35px;width: 100%;
}
/style 父组件代码
templatediv idappownSelect1 :inputValue.syncvalue:selectArroptions:selectObjselectObj/ownSelect1/div
/templatescript
import ownSelect1 from ./components/ownSelect1.vueexport default {name: App,components: {ownSelect1},data () {return {options: [{itemValue: 选项1,itemLabel: 黄金糕}, {itemValue: 选项2,itemLabel: 双皮奶}, {itemValue: 选项3,itemLabel: 蚵仔煎}, {itemValue: 选项4,itemLabel: 龙须面}, {itemValue: 选项5,itemLabel: 北京烤鸭}], // 下拉的选项selectObj: {value: itemValue, // 选中的时候赋的值label: itemLabel // 用于显示的名称},value: , // 输入框或者下拉框 赋的值}}
}
/scriptstyle
#app {display: flex;justify-content: center;/* align-items: center; */height: 100vh;
}
/style效果
直接输入 选项 以上我自己写的组件代码可以直接粘贴到项目中使用不过我在网上看其中有一篇的文章的我觉得还不错不过后面我发现有点麻烦我懒得去细细研究他的做法在这里我也提一下有兴趣的可以自己去研究一下他说的是把 el-input 组件 和 el-select 放在一起然后通过定位来把 el-input 放在 el-select 下拉选择的那里其中 el-input 和 el-select 绑定一样的值
