当前位置：网站首页>基于ele封装下拉菜单等组件
基于ele封装下拉菜单等组件
2022-04-23 02:46:00 【不求人0】
目录
基于ele封装下拉菜单等组件方式1
下拉菜单组件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>
/** * 属性介绍 * * title 左侧标题 ；labelWidth 左侧标题宽度； options：数据（数组形式）； * * ref="SelectComTest" 定义未了在父组件之中清空子组件的选中的值 =》 this.$refs.SelectComTest.value = ""; * * 至于其他属性，则是按照slect原本的自带的属性进行传递 * 使用例子 * <SelectCom :title="'合作公司'" :labelWidth="'95px'" :options="options" @change="changeVal" ref="SelectComTest" disabled /> */
export default {
name: "SelectCom",
components: {
},
props: {
options: {
type: Array,
default() {
return [];
},
},
title: {
type: String,
default: "活动名称",
},
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下拉选择样式名称
.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>
使用下拉组件
<div class="seach-single">
<SelectCom
:title="'合作公司'"
:labelWidth="'95px'"
:options="options"
@change="changeVal"
ref="SelectComTest"
disabled
/>
</div>
<div class="seach-single">
<SelectCom
:title="'合作货币'"
: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: "菜鸡1",
},
{
value: "2",
label: "菜鸡2",
},
],
options2: [
{
value: "1",
label: "混子1",
},
{
value: "2",
label: "混子2",
},
],
};
},
// 回显数据
init(){
this.$refs.SelectComTest.value = 0;
},
changeVal(val) {
console.log("val", val);
},
changeVal2(val) {
console.log("changeVal2", val);
},
// 重置
resetForm() {
this.$refs.SelectComTest.value = "";
this.$refs.SelectComTest2.value = "";
},
单独一个日期选择组件
SingleData.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
class="single-date-picker"
style="height: '32px'"
v-model="value"
value-format="yyyy-MM-dd"
v-bind="$attrs"
v-on="$listeners"
placeholder="选择日期"
>
</el-date-picker>
</div>
</div>
</template>
<script>
/** * 属性介绍 * * title 左侧标题 ；labelWidth 左侧标题宽度； * * ref="SelectComTest" 定义未了在父组件之中清空子组件的选中的值 =》 this.$refs.SelectComTest.value = ""; * * 至于其他属性，则是按照原本的自带的属性进行传递 * 使用例子 <SingleData :title="'还款日期'" @change="SingleDataChange" ref="SingleDataTest1" type="date" /> */
export default {
name: "SingleData",
components: {
},
props: {
title: {
type: String,
default: "活动名称",
},
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-picker
.single-date-picker {
width: 100%;
}
</style>
使用该组件
<div class="seach-single">
<SingleData
:title="'还款日期'"
@change="SingleDataChange"
ref="SingleDataTest1"
type="date"
/>
</div>
<div class="seach-single">
<SingleData
:title="'退款日期'"
@change="SingleDataChange2"
ref="SingleDataTest2"
type="month"
/>
</div>
SingleDataChange(val){
console.log("SingleDataChange", val);
},
SingleDataChange2(val){
console.log("SingleDataChange2", val);
},
// 重置
resetForm() {
this.$refs.SingleDataTest1.value = "";
this.$refs.SingleDataTest2.value = "";
},
双日期选择组件
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="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
v-bind="$attrs"
v-on="$listeners"
>
</el-date-picker>
</div>
</div>
</template>
<script>
/**
* 属性介绍
* * title 左侧标题 ；labelWidth 左侧标题宽度； options：数据（数组形式）；
* * ref="SelectComTest" 定义未了在父组件之中清空子组件的选中的值 =》 this.$refs.SelectComTest.value = "";
* * 至于其他属性，则是按照slect原本的自带的属性进行传递
* 使用例子
* <DoubleData
:title="'货币日期'"
@change="DoubleDataChange"
ref="SelectComTest"
disabled
/>
*/
export default {
name: "DoubleData",
components: {},
props: {
title: {
type: String,
default: "活动名称",
},
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;
}
}
// 日期选择样式名称
::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>
使用组件
<div class="seach-single">
<DoubleData
:title="'货币日期'"
@change="DoubleDataChange"
ref="DoubleDataTest"
/>
</div>
<div class="seach-single">
<DoubleData
:title="'货币日期2'"
@change="DoubleDataChange2"
ref="DoubleDataTest2"
/>
</div>
DoubleDataChange(val){
console.log("DoubleDataChange",val);
},
DoubleDataChange2(val){
console.log("DoubleDataChange2",val);
},
// 重置
resetForm() {
this.$refs.DoubleDataTest.value = "";
this.$refs.DoubleDataTest2.value = "";
},
单个输入框组件
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="请输入"
></el-input>
</div>
</div>
</template>
<script>
/** * 属性介绍 * * title 左侧标题 ；labelWidth 左侧标题宽度； propsValue：需要回显的值； * * ref="SingleInputInput2" 定义未了在父组件之中清空子组件的选中的值 =》 this.$refs.SingleInputInput2.value = ""; * * 至于其他属性，则是按照slect原本的自带的属性进行传递 * 使用例子 * <SingleInput :title="'申请编号2'" ref="SingleInputTest2" v-debounce="SingleInputInput2" /> */
export default {
name: "SingleInput",
props: {
propsValue: {
type: String,
default: "",
},
title: {
type: String,
default: "活动名称",
},
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>
使用组件
<div class="seach-single">
<SingleInput
:title="'申请编号'"
propsValue="112233"
ref="SingleInputTest"
v-debounce="SingleInputInput"
/>
</div>
<div class="seach-single">
<SingleInput
:title="'申请编号2'"
ref="SingleInputTest2"
v-debounce="SingleInputInput2"
/>
</div>
SingleInputInput(){
console.log("SingleInputTest", this.$refs.SingleInputTest.value);
},
SingleInputInput2(){
console.log("SingleInputTest2", this.$refs.SingleInputTest2.value);
},
// 重置
resetForm() {
this.$refs.SingleInputTest2.value = "";
this.$refs.SingleInputTest.value = "";
},
防抖指令
1: directive 文件夹下 debounce.js
import Vue from 'vue';
Vue.directive('debounce', {
inserted: function (el, binding) {
let timer;
el.addEventListener("input", () => {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
// 关键点：vue的自定义指令传递的参数binding如果是一个函数，则通过binding.value()来执行
binding.value();
}, 500)
})
}
});
2:main.js
import "@/directive/debounce.js"
3：使用 v-debounce="SingleInputInput2" 该事件的值，需要使用ref方式拿到
双input组件
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="请输入"
type="number"
></el-input>
<div class="interval">~</div>
<el-input
class="input input2"
v-model="value2"
@change="inputAfter"
placeholder="请输入"
type="number"
></el-input>
</div>
</div>
</template>
<script>
/** * 属性介绍 * * title 左侧标题 ；labelWidth 左侧标题宽度； options：数据（数组形式）； * * ref="DoubleInputTest2" 定义未了在父组件之中清空子组件的选中的值 =》 this.$refs.DoubleInputTest2.value1 / value2 = ""; * * 至于其他属性，则是按照slect原本的自带的属性进行传递 * * 事件 inputbefore 与 inputAfter 两个输入框事件 * 使用例子 <DoubleInput :title="'财资处2'" ref="DoubleInputTest2" @inputbefore="inputbefore2" @inputAfter="inputAfter2" /> */
export default {
name: "DoubleInput",
props: {
propsValue: {
type: String,
default: "",
},
title: {
type: String,
default: "活动名称",
},
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>
使用组件
<div class="seach-single">
<DoubleInput
:title="'财资处'"
ref="DoubleInputTest"
@inputbefore="inputbefore1"
@inputAfter="inputAfter1"
/>
</div>
<div class="seach-single">
<DoubleInput
:title="'财资处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);
},
// 重置
resetForm() {
this.$refs.DoubleInputTest.value1 = "";
this.$refs.DoubleInputTest.value2 = "";
this.$refs.DoubleInputTest2.value1 = "";
this.$refs.DoubleInputTest2.value2 = "";
}
基于ele封装下拉菜单等组件 方式2
singleSearch组件
<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 下拉菜单等组件
* @param labelWidth {String} - label宽度
* @param title {String} - label名称
* @param 传入的组件需要加上以下类名：
* @param search-input 输入筐样式名称覆盖
* @param date-picker 日期选择样式名称
* @param search-select 下拉选择样式名称
* @param 使用示例
* <single-search :labelWidth="'95px'" >
<el-input
class="search-input"
ref="input"
placeholder="请输入"
v-model="value"
:disabled="isDisabled"
></el-input>
</single-search>
*
*/
export default {
name: "singleSearch",
props: {
labelWidth: {
type: String,
default: "94px",
},
title: {
type: String,
default: "活动名称",
},
},
data() {
return {};
},
};
</script>
<style lang="scss" scoped>
.single-search {
width: 100%;
.xSelect_wrap {
line-height: 32px;
height: 32px;
}
}
</style>
使用组件
<single-search :labelWidth="'95px'" :title="'险种'">
<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>
样式
// 输入筐样式名称覆盖
::v-deep .el-input__inner{
height: 32px;
line-height: 32px;
}
// 日期选择样式名称
::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下拉选择样式名称
.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-picker
.single-date-picker {
width: 100%;
}
// 双input的
.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;
}
}
使用组件 单个日期与两个输入框
<div class="seach-single">
<single-search :labelWidth="'95px'" :title="'日期'">
<el-date-picker
class="single-date-picker"
v-model="value1"
type="date"
placeholder="选择日期"
>
</el-date-picker>
</single-search>
</div>
<div class="seach-single">
<single-search :labelWidth="'95px'" :title="'金额'">
<div class="double-input-wrap">
<el-input
class="double-input"
v-model="input1"
placeholder="请输入"
@change="inputchange1"
></el-input>
<span>至</span>
<el-input
class="double-input"
v-model="input2"
placeholder="请输入"
></el-input>
</div>
</single-search>
</div>
版权声明
本文为[不求人0]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_47409897/article/details/119890681
边栏推荐
- How to prevent leakage of operation and maintenance data
- grain rain
- Hack the box optimum
- After idea is successfully connected to H2 database, there are no sub files
- What is the difference between varchar and char?
- 谷雨
- Slave should be able to synchronize with the master in tests/integration/replication-psync.tcl
- ROP Emporium x86_ 64 7 ~ 8 questions
- The usage of case when and select case when is very easy to use
- Understanding process (multithreading primary)
猜你喜欢
![[unity3d] rolling barrage effect in live broadcasting room](/img/61/46a7d6c4bf887fca8f088e7673cf2f.png)
[unity3d] rolling barrage effect in live broadcasting room
LeetCode 1450 - 1453
Domestic lightweight Kanban scrum agile project management tool
Six very 6 computer driver managers: what software is good for driver upgrade? Recommended by the best computer driver management software abroad
JVM runtime data area (I)
Android 高阶面试必问：全局业务和项目的架构设计与重构
Yes, from today on, our fans can participate in Netease data analysis training camp for free!
接口请求时间太长，jstack观察锁持有情况
How to prevent leakage of operation and maintenance data
Practical combat of industrial defect detection project (II) -- steel surface defect detection based on deep learning framework yolov5
随机推荐
Hack the box optimum
Probabilistic model of machine learning
MySQL复杂查询使用临时表/with as（类似表变量）
Domestic lightweight Kanban scrum agile project management tool
The penultimate K nodes in jz22 linked list
高效音乐格式转换工具Music Converter Pro
基于Torchserve部署SBERT模型＜语义相似度任务＞
Preliminary understanding of stack and queue
Actual combat of industrial defect detection project (IV) -- ceramic defect detection based on hrnet
Use of go language web Middleware
使用Go语言构建Web服务器
Water diversion into chengluo Valley p1514
[XJTU computer network security and management] Lecture 2 password technology
SQL server2019 cannot download the required files, which may indicate that the version of the installer is no longer supported. What should I do
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
Leangoo brain map - shared multi person collaborative mind mapping tool
How to solve the complexity of project document management?
Using go language to build web server
认识进程(多线程_初阶)
Learn regular expression options, assertions