电子商务网站建设课程设计代码,做网站实现图片自动压缩,网站频道建设,如何做医药类网站前言 下面我们将会做出如下图输入框样式#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
