当前位置：网站首页>Encapsulate components such as pull-down menu based on ele
Encapsulate components such as pull-down menu based on ele
2022-04-23 02:50:00 【Don't ask 0】
Catalog
be based on ele Encapsulate the drop-down menu and other components 1
Drop down menu component SelectCom.vue
SelectCom.vue
<template>
<div class="xSelect_container">
<span :style="`width: ${labelWidth}`" class="xSelect_label">
<span class="label_title"> {
{
title }} ： </span>
</span>
<div class="xSelect_con" :style="`width: calc(100% - ${labelWidth})`">
<el-select
class="search-select"
v-model="value"
v-bind="$attrs"
v-on="$listeners"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</div>
</template>
<script>
/** * Property introduction * * title Title On the left ;labelWidth Left Title width ; options： data （ Array form ）; * * ref="SelectComTest" Defines the value that has not been selected to clear the child component from the parent component =》 this.$refs.SelectComTest.value = ""; * * As for other attributes , Is in accordance with the slect The original self-contained attributes are passed * Examples of use * <SelectCom :title="' Partner company '" :labelWidth="'95px'" :options="options" @change="changeVal" ref="SelectComTest" disabled /> */
export default {
name: "SelectCom",
components: {
},
props: {
options: {
type: Array,
default() {
return [];
},
},
title: {
type: String,
default: " The name of the event ",
},
labelWidth: {
type: String,
default: "95px",
},
},
data() {
return {
value: "",
};
},
methods: {
},
};
</script>
<style lang="scss" scoped>
.xSelect_container {
line-height: 32px;
height: 32px;
clear: both;
.xSelect_label {
float: left;
}
.xSelect_con {
float: left;
}
}
// .search-select Select the style name from the drop-down list
.search-select {
width: 100%;
}
.search-select ::v-deep .el-input__suffix {
right: 10px;
}
.search-select ::v-deep .el-select .el-input .el-select__caret {
line-height: 32px;
}
.search-select ::v-deep .el-input__inner {
height: 32px;
}
::v-deep .el-input__icon {
line-height: 25px;
}
</style>
Using drop-down components
<div class="seach-single">
<SelectCom
:title="' Partner company '"
:labelWidth="'95px'"
:options="options"
@change="changeVal"
ref="SelectComTest"
disabled
/>
</div>
<div class="seach-single">
<SelectCom
:title="' Cooperative currency '"
:labelWidth="'95px'"
:options="options2"
@change="changeVal2"
ref="SelectComTest2"
/>
</div>
import SelectCom from "./SelectCom.vue";
export default {
name: "XXX",
components: {
SelectCom,
},
data() {
return {
options: [
{
value: "1",
label: " Vegetable chicken 1",
},
{
value: "2",
label: " Vegetable chicken 2",
},
],
options2: [
{
value: "1",
label: " Mix the son 1",
},
{
value: "2",
label: " Mix the son 2",
},
],
};
},
// Echo data
init(){
this.$refs.SelectComTest.value = 0;
},
changeVal(val) {
console.log("val", val);
},
changeVal2(val) {
console.log("changeVal2", val);
},
// Reset
resetForm() {
this.$refs.SelectComTest.value = "";
this.$refs.SelectComTest2.value = "";
},
A single date selection component
SingleData.vue
<!-- Single choice date, etc -->
<template>
<div class="xSelect_container">
<span :style="`width: ${labelWidth}`" class="xSelect_label">
<span class="label_title"> {
{
title }} ： </span>
</span>
<div class="xSelect_con" :style="`width: calc(100% - ${labelWidth})`">
<el-date-picker
class="single-date-picker"
style="height: '32px'"
v-model="value"
value-format="yyyy-MM-dd"
v-bind="$attrs"
v-on="$listeners"
placeholder=" Select date "
>
</el-date-picker>
</div>
</div>
</template>
<script>
/** * Property introduction * * title Title On the left ;labelWidth Left Title width ; * * ref="SelectComTest" Defines the value that has not been selected to clear the child component from the parent component =》 this.$refs.SelectComTest.value = ""; * * As for other attributes , It is passed according to the original self-contained attributes * Examples of use <SingleData :title="' Repayment date '" @change="SingleDataChange" ref="SingleDataTest1" type="date" /> */
export default {
name: "SingleData",
components: {
},
props: {
title: {
type: String,
default: " The name of the event ",
},
labelWidth: {
type: String,
default: "95px",
},
},
data() {
return {
value: "",
};
},
};
</script>
<style lang="scss" scoped>
.xSelect_container {
line-height: 32px;
height: 32px;
clear: both;
.xSelect_label {
float: left;
}
.xSelect_con {
float: left;
}
}
// Single date selector single-date-picker
.single-date-picker {
width: 100%;
}
</style>
Use this component
<div class="seach-single">
<SingleData
:title="' Repayment date '"
@change="SingleDataChange"
ref="SingleDataTest1"
type="date"
/>
</div>
<div class="seach-single">
<SingleData
:title="' Refund date '"
@change="SingleDataChange2"
ref="SingleDataTest2"
type="month"
/>
</div>
SingleDataChange(val){
console.log("SingleDataChange", val);
},
SingleDataChange2(val){
console.log("SingleDataChange2", val);
},
// Reset
resetForm() {
this.$refs.SingleDataTest1.value = "";
this.$refs.SingleDataTest2.value = "";
},
Double date selection component
DoubleData.vue
<template>
<div class="xSelect_container">
<span :style="`width: ${labelWidth}`" class="xSelect_label">
<span class="label_title"> {
{ title }} ： </span>
</span>
<div class="xSelect_con" :style="`width: calc(100% - ${labelWidth})`">
<el-date-picker
v-model="value"
type="daterange"
range-separator=" to "
start-placeholder=" Start date "
end-placeholder=" End date "
value-format="yyyy-MM-dd"
v-bind="$attrs"
v-on="$listeners"
>
</el-date-picker>
</div>
</div>
</template>
<script>
/**
* Property introduction
* * title Title On the left ;labelWidth Left Title width ; options： data （ Array form ）;
* * ref="SelectComTest" Defines the value that has not been selected to clear the child component from the parent component =》 this.$refs.SelectComTest.value = "";
* * As for other attributes , Is in accordance with the slect The original self-contained attributes are passed
* Examples of use
* <DoubleData
:title="' Currency date '"
@change="DoubleDataChange"
ref="SelectComTest"
disabled
/>
*/
export default {
name: "DoubleData",
components: {},
props: {
title: {
type: String,
default: " The name of the event ",
},
labelWidth: {
type: String,
default: "95px",
},
},
data() {
return {
value: "",
};
},
methods: {},
};
</script>
<style lang="scss" scoped>
.xSelect_container {
line-height: 32px;
height: 32px;
clear: both;
.xSelect_label {
float: left;
}
.xSelect_con {
float: left;
overflow: hidden;
line-height: 32px;
height: 32px;
border: 1px solid #dcdfe6;
}
}
// Date select style name
::v-deep .el-input__inner {
width: 100%;
}
::v-deep .el-date-editor {
padding: 0 1px;
width: 100%;
border: none;
}
::v-deep .el-range-input {
width: 40%;
font-size: 12px;
margin-top: -5px;
}
::v-deep .el-range-separator {
width: 8%;
padding: 0;
font-size: 12px;
line-height: 34px;
}
::v-deep .el-range__icon {
margin-top: -3px;
}
</style>
Use components
<div class="seach-single">
<DoubleData
:title="' Currency date '"
@change="DoubleDataChange"
ref="DoubleDataTest"
/>
</div>
<div class="seach-single">
<DoubleData
:title="' Currency date 2'"
@change="DoubleDataChange2"
ref="DoubleDataTest2"
/>
</div>
DoubleDataChange(val){
console.log("DoubleDataChange",val);
},
DoubleDataChange2(val){
console.log("DoubleDataChange2",val);
},
// Reset
resetForm() {
this.$refs.DoubleDataTest.value = "";
this.$refs.DoubleDataTest2.value = "";
},
Single input box component
SingleInput.vue
<template>
<div class="xSelect_container">
<span :style="`width: ${labelWidth}`" class="xSelect_label">
<span class="label_title"> {
{
title }} ： </span>
</span>
<div class="xSelect_con" :style="`width: calc(100% - ${labelWidth})`">
<el-input
v-model="value"
v-bind="$attrs"
v-on="$listeners"
placeholder=" Please enter "
></el-input>
</div>
</div>
</template>
<script>
/** * Property introduction * * title Title On the left ;labelWidth Left Title width ; propsValue： Value to echo ; * * ref="SingleInputInput2" Defines the value that has not been selected to clear the child component from the parent component =》 this.$refs.SingleInputInput2.value = ""; * * As for other attributes , Is in accordance with the slect The original self-contained attributes are passed * Examples of use * <SingleInput :title="' Application number 2'" ref="SingleInputTest2" v-debounce="SingleInputInput2" /> */
export default {
name: "SingleInput",
props: {
propsValue: {
type: String,
default: "",
},
title: {
type: String,
default: " The name of the event ",
},
labelWidth: {
type: String,
default: "95px",
},
},
components: {
},
data() {
return {
value: this.propsValue,
};
},
methods: {
},
};
</script>
<style lang="scss" scoped>
.xSelect_container {
line-height: 32px;
height: 32px;
clear: both;
.xSelect_label {
float: left;
}
.xSelect_con {
float: left;
}
}
::v-deep .el-input__inner {
height: 32px;
line-height: 32px;
}
</style>
Use components
<div class="seach-single">
<SingleInput
:title="' Application number '"
propsValue="112233"
ref="SingleInputTest"
v-debounce="SingleInputInput"
/>
</div>
<div class="seach-single">
<SingleInput
:title="' Application number 2'"
ref="SingleInputTest2"
v-debounce="SingleInputInput2"
/>
</div>
SingleInputInput(){
console.log("SingleInputTest", this.$refs.SingleInputTest.value);
},
SingleInputInput2(){
console.log("SingleInputTest2", this.$refs.SingleInputTest2.value);
},
// Reset
resetForm() {
this.$refs.SingleInputTest2.value = "";
this.$refs.SingleInputTest.value = "";
},
Anti shake command
1: directive Under the folder debounce.js
import Vue from 'vue';
Vue.directive('debounce', {
inserted: function (el, binding) {
let timer;
el.addEventListener("input", () => {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
// Key points ：vue The parameters passed by the custom instruction binding If it's a function , Through binding.value() To execute
binding.value();
}, 500)
})
}
});
2:main.js
import "@/directive/debounce.js"
3： Use v-debounce="SingleInputInput2" The value of this event , Need to use ref Way to get
double input Components
DoubleInput.vue
<template>
<div class="xSelect_container">
<span :style="`width: ${labelWidth}`" class="xSelect_label">
<span class="label_title"> {
{
title }} ： </span>
</span>
<div class="xSelect_con" :style="`width: calc(100% - ${labelWidth})`">
<el-input
class="input"
v-model="value1"
@change="inputbefore"
placeholder=" Please enter "
type="number"
></el-input>
<div class="interval">~</div>
<el-input
class="input input2"
v-model="value2"
@change="inputAfter"
placeholder=" Please enter "
type="number"
></el-input>
</div>
</div>
</template>
<script>
/** * Property introduction * * title Title On the left ;labelWidth Left Title width ; options： data （ Array form ）; * * ref="DoubleInputTest2" Defines the value that has not been selected to clear the child component from the parent component =》 this.$refs.DoubleInputTest2.value1 / value2 = ""; * * As for other attributes , Is in accordance with the slect The original self-contained attributes are passed * * event inputbefore And inputAfter Two input box Events * Examples of use <DoubleInput :title="' Treasury Department 2'" ref="DoubleInputTest2" @inputbefore="inputbefore2" @inputAfter="inputAfter2" /> */
export default {
name: "DoubleInput",
props: {
propsValue: {
type: String,
default: "",
},
title: {
type: String,
default: " The name of the event ",
},
labelWidth: {
type: String,
default: "95px",
},
},
components: {
},
data() {
return {
value1: "",
value2: "",
};
},
methods: {
inputbefore() {
this.$emit("inputbefore", this.value1);
},
inputAfter() {
this.$emit("inputAfter", this.value2);
},
},
};
</script>
<style lang="scss" scoped>
.xSelect_container {
line-height: 32px;
height: 32px;
clear: both;
.xSelect_label {
float: left;
}
.xSelect_con {
float: left;
}
}
.xSelect_con {
position: relative;
line-height: 32px;
height: 32px;
overflow: hidden;
border: 1px solid #dcdfe6;
& > .input {
border: none;
outline: none;
height: 30px;
line-height: 30px;
width: 45%;
}
& > .input {
float: left;
}
& > .input2 {
float: right;
}
& > .interval {
z-index: 10;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
width: 10px;
height: 10px;
line-height: 10px;
color: #c0c4cc;
}
}
::-webkit-input-placeholder {
color: #c0c4cc;
}
::v-deep .el-input__inner {
text-align: center;
height: 30px;
border: none;
font-size: 12px;
padding: 0;
margin: 0;
}
</style>
Use components
<div class="seach-single">
<DoubleInput
:title="' Treasury Department '"
ref="DoubleInputTest"
@inputbefore="inputbefore1"
@inputAfter="inputAfter1"
/>
</div>
<div class="seach-single">
<DoubleInput
:title="' Treasury Department 2'"
ref="DoubleInputTest2"
@inputbefore="inputbefore2"
@inputAfter="inputAfter2"
/>
</div>
inputbefore1(val) {
console.log("inputbefore1", val);
},
inputAfter1(val) {
console.log("inputAfter1", val);
},
inputbefore2(val) {
console.log("inputbefore2", val);
},
inputAfter2(val) {
console.log("inputAfter2", val);
},
// Reset
resetForm() {
this.$refs.DoubleInputTest.value1 = "";
this.$refs.DoubleInputTest.value2 = "";
this.$refs.DoubleInputTest2.value1 = "";
this.$refs.DoubleInputTest2.value2 = "";
}
be based on ele Encapsulate components such as drop-down menus The way 2
singleSearch Components
<template>
<div class="single-search clear_fix">
<div class="xSelect_wrap" :style="`width: calc(100% - ${labelWidth})`">
<slot></slot>
</div>
<span :style="`width: ${labelWidth}`" class="xSelect_label">
<span class="label_title"> {
{ title }} ： </span>
</span>
</div>
</template>
<script>
/**
* singleSearch
*
* @module components/singleSearch
* @desc Drop down menu and other components
* @param labelWidth {String} - label Width
* @param title {String} - label name
* @param The following class names need to be added to the incoming components ：
* @param search-input Enter the basket style name to overwrite
* @param date-picker Date select style name
* @param search-select Select the style name from the drop-down list
* @param Examples of use
* <single-search :labelWidth="'95px'" >
<el-input
class="search-input"
ref="input"
placeholder=" Please enter "
v-model="value"
:disabled="isDisabled"
></el-input>
</single-search>
*
*/
export default {
name: "singleSearch",
props: {
labelWidth: {
type: String,
default: "94px",
},
title: {
type: String,
default: " The name of the event ",
},
},
data() {
return {};
},
};
</script>
<style lang="scss" scoped>
.single-search {
width: 100%;
.xSelect_wrap {
line-height: 32px;
height: 32px;
}
}
</style>
Use components
<single-search :labelWidth="'95px'" :title="' type of insurance '">
<el-select class="search-select" v-model="select2.value" @change="itemchange">
<el-option
v-for="item in select2.options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</single-search>
<style lang="scss" scoped>
@import "@/assets/css/eleInput.scss";
</style>
style
// Enter the basket style name to overwrite
::v-deep .el-input__inner{
height: 32px;
line-height: 32px;
}
// Date select style name
::v-deep .el-input__inner{
width: 100%;
}
.date-picker .el-range-editor.el-input__inner{
height: 32px;
line-height: 32px;
}
.date-picker .el-range__close-icon{
line-height: 25px;
}
.date-picker .el-date-editor {
padding: 0 1px;
width: 100%;
border: none;
}
.date-picker .el-range-input {
width: 40%;
font-size: 12px;
}
.date-picker .el-range-separator {
width: 8%;
padding: 0;
font-size: 12px;
line-height: 25px;
}
.date-picker .el-range__icon {
margin-top: -8px;
}
::v-deep .el-date-editor .el-range-separator{
line-height: 25px;
}
// .search-select Select the style name from the drop-down list
.search-select {
width: 100%;
}
.search-select ::v-deep .el-input__suffix{
right: 10px;
}
.search-select ::v-deep .el-select .el-input .el-select__caret{
line-height: 32px;
}
.search-select ::v-deep .el-input__inner {
height: 32px;
}
::v-deep .el-input__icon {
line-height: 25px;
}
// Single date selector single-date-picker
.single-date-picker {
width: 100%;
}
// double input Of
.double-input-wrap {
width: 100%;
border: 1px solid #DCDFE6;
overflow: hidden;
clear: both;
}
.double-input {
width: 45%;
height: 30px;
line-height: 30px;
::v-deep .el-input__inner {
border: none !important;
}
.double-input:nth-child(1) {
float: left;
}
span {
float: left;
width: 10%;
text-align: center;
}
.double-input:nth-child(2) {
float: left;
}
}
Use components Single date and two input boxes
<div class="seach-single">
<single-search :labelWidth="'95px'" :title="' date '">
<el-date-picker
class="single-date-picker"
v-model="value1"
type="date"
placeholder=" Select date "
>
</el-date-picker>
</single-search>
</div>
<div class="seach-single">
<single-search :labelWidth="'95px'" :title="' amount of money '">
<div class="double-input-wrap">
<el-input
class="double-input"
v-model="input1"
placeholder=" Please enter "
@change="inputchange1"
></el-input>
<span> to </span>
<el-input
class="double-input"
v-model="input2"
placeholder=" Please enter "
></el-input>
</div>
</single-search>
</div>
版权声明
本文为[Don't ask 0]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204230246324861.html
边栏推荐
- [xjtu Computer Network Security and Management] session 2 Cryptographic Technology
- Windows MySQL 8 zip installation
- 《信息系统项目管理师总结》第七章 项目沟通管理
- Planning code ROS migration POMDP prediction planning (I)
- How can enterprises with major hazard installations ensure the completion of the digital construction task of double prevention mechanism by the end of the year
- ROP Emporium x86_ 64 7 ~ 8 questions
- [XJTU computer network security and management] Lecture 2 password technology
- Slave should be able to synchronize with the master in tests/integration/replication-psync. tcl
- Six very 6 computer driver managers: what software is good for driver upgrade? Recommended by the best computer driver management software abroad
- Les derniers noeuds K de la liste jz22
猜你喜欢
Store consumption SMS notification template
Domestic lightweight Kanban scrum agile project management tool
php+mysql对下拉框搜索的内容修改
Linux redis - redis database caching service
Flink learning (XI) watermark
How to build an integrated industrial Internet plus hazardous safety production management platform?
Target narak
Android 高阶面试必问：全局业务和项目的架构设计与重构
![[XJTU計算機網絡安全與管理]第二講 密碼技術](/img/b0/263e8dcbfeb2ce9f504a9c8eb76b07.png)
[XJTU計算機網絡安全與管理]第二講 密碼技術
国产轻量级看板式Scrum敏捷项目管理工具
随机推荐
高效音乐格式转换工具Music Converter Pro
Devil cold rice 𞓜 078 devil answers the market in Shanghai and Nanjing; Communication and guidance; Winning the country and killing and screening; The purpose of making money; Change other people's op
Navicat failed to connect to Oracle Database: cannot load OCI DLL, 87: instant client package is
字符串去掉空格问题
Fashion MNIST dataset classification training
Renesas electronic MCU RT thread development and Design Competition
Shell learning notes -- shell processing of output stream awk
Windows MySQL 8 zip installation
本地远程访问云服务器的jupyter
When using art template inheritance, compileerror: invalid or unexpected token generated
Leangoo brain map - shared multi person collaborative mind mapping tool
Machine learning (Zhou Zhihua) Chapter 14 probability graph model
What is the difference between varchar and char?
Redis data server / database / cache (2022)
Navicat premium import SQL file
Servlet template engine usage example
Airtrack cracking wireless network password (Dictionary running method)
C语言 171. 最近回文数
php+mysql對下拉框搜索的內容修改
Rhcsa second day operation