当前位置：网站首页>基于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
边栏推荐
- Rhcsa day 1 operation
- [wechat applet] set the bottom menu (tabbar) for the applet
- Yes, from today on, our fans can participate in Netease data analysis training camp for free!
- MySQL complex query uses temporary table / with as (similar to table variable)
- 解决 注册谷歌邮箱 gmail 手机号无法用于验证
- The second day of learning rhcsa
- How to build an integrated industrial Internet plus hazardous safety production management platform?
- Fashion MNIST 数据集分类训练
- Linux redis - redis ha sentinel cluster construction details & redis master-slave deployment
- MySQL复杂查询使用临时表/with as（类似表变量）
猜你喜欢
Intelligent agricultural management model
ROP Emporium x86_64 7~8题
Solve the problem that PowerShell mining occupies 100% of cpu7 in win7
How to solve the complexity of project document management?
Practical combat of industrial defect detection project (II) -- steel surface defect detection based on deep learning framework yolov5
Slave should be able to synchronize with the master in tests/integration/replication-psync. tcl
高效音乐格式转换工具Music Converter Pro
Yes, from today on, our fans can participate in Netease data analysis training camp for free!
16、 Anomaly detection
本地远程访问云服务器的jupyter
随机推荐
Android 高阶面试必问：全局业务和项目的架构设计与重构
Codeforces Round ＃784 (Div. 4) (A - H)题解
第46届ICPC亚洲区域赛（昆明） B Blocks（容斥+子集和DP+期望DP）
Practice of industrial defect detection project (III) -- Based on FPN_ PCB defect detection of tensorflow
JZ22 链表中倒数最后k个结点
The problem of removing spaces from strings
Slave should be able to synchronize with the master in tests/integration/replication-psync.tcl
Rhcsa day 4 operation
[XJTU計算機網絡安全與管理]第二講 密碼技術
Rhcsa second day operation
mysql function函数语法
Machine learning (Zhou Zhihua) Chapter 14 probability graph model
JVM runtime data area (I)
【Hcip】OSPF常用的6种LSA详解
Airtrack cracking wireless network password (Dictionary running method)
Go语言web中间件的使用
基于Scrum进行创新和管理
Yes, from today on, our fans can participate in Netease data analysis training camp for free!
Huashu "deep learning" and code implementation: 01 Linear Algebra: basic concepts + code implementation basic operations
魔王冷饭||＃078 魔王答上海、南京行情；沟通指导；得国和打杀筛选；赚钱的目的；改变别人看法