网站悬浮微信二维码,olam wordpress,线上销售模式,物流信息平台前言 下面我们将会做出如下图输入框样式#xff0c;并且附上组件代码#xff0c;有特殊需求的可以自行优化同理#xff0c;下拉框的话只要把el-input标签修改掉即可 MyInput组件
templatediv classmy-input click.stopshowInput !showInput…前言 下面我们将会做出如下图输入框样式并且附上组件代码有特殊需求的可以自行优化同理下拉框的话只要把el-input标签修改掉即可 MyInput组件
templatediv classmy-input click.stopshowInput !showInputi classel-icon-search my-icon/i!-- 注意必须要加上 click.native.stop 事件不然会点击输入框也会出发父组件的点击事件--el-inputclassmy-input-iputplaceholder请输入内容v-modelinputclearableclick.native.stop:classshowInput ? show-input : hidden-input/el-input/div
/template
script
export default {data() {return {input: ,showInput: false,};},mounted() {window.addEventListener(click, this.hideInput);},beforeDestroy() {window.removeEventListener(click, this.hideInput);},methods: {hideInput() {if (!this.input) {this.showInput false;}},},
};
/script
style langscss scoped
.my-input {display: flex;align-items: center;height: 50px;overflow: hidden;padding: 0 10px;cursor: pointer;:hover {background-color: #f5f7fa;}
}.my-input-iput {transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);overflow: hidden;vertical-align: middle;
}.show-input {width: 200px;margin-left: 10px;
}.hidden-input {/* 这里必须写 0不然宽度依然会占位 */width: 0;
}
/style应用组件
templatediv classtest1MyInput //div
/template
script
import MyInput from /components/MyInput.vue;export default {components: {MyInput,},
};
/script
style langscss scoped
.test1 {height: 80vh;display: flex;/* justify-content: end; */
}
/style
