|
一、需求
步骤组件：项目中时常会遇到这种需求，某些数据需要前面的数据通过后才能输入的情况（即先要验证第一步才能进入第二步）——如：企业司机注册（先输入基本信息在验证驾驶证行驶证这些等)；因此封装了步骤组件。
防抖按钮组件：项目一般像表单提交、待办审批、删除等等操作按钮，多次点击后会多次请求接口；为防止这种现象，因此封装了防抖按钮组件（一定时间内无论点击多少次，只有一次请求接口）
短信倒计时组件
二、最终效果
三、参数配置
1、步骤组件代码示例
第一步骤
.....
2、防抖按钮组件代码示例
导出
3、短信倒计时组件代码示例
4 、步骤组件 Attributes 继承 element-plus el-steps/el-step 提供的属性
参数说明类型默认值stepData步骤数据源Array-—id步骤 ID 唯一Number-—title步骤头文字展示String-—slotName每个步骤的具名 slotString-—icon步骤头 icon 展示（element 内置 icon）String-—description步骤头描述String-—btnArr每个步骤的按钮Array------ btnTitle按钮文字信息String------ params每个按钮传参信息（可以随意定义字段)String/Number------ fn按钮事件function-isShowLastSuccess是否显示默认 icon 最后一步Booleantrueactive设置当前激活步骤Number0—lastBtnArr最后一步按钮需要多个Array------ btnTitle按钮文字信息String------ params每个按钮传参信息（可以随意定义字段)String/Number------ fn按钮事件function-lastBtnTitle最后一步骤成功按钮文字String完成successTitle最后一步骤成功提示语String-
5、步骤组件 事件
事件名说明返回值complete最后一步按钮点击事件当前步骤值
四、完整代码
1、步骤组件代码示例
{{val1.btnTitle}}
{{lastBtnTitle}}
{{item.btnTitle}}
export default {
name: 'TStepWizard',
}
import FixBtn from './fixBtn.vue'
const props = defineProps({
// 步骤数据
stepData: {
type: Array,
default: () => {
return []
},
required: true,
},
successTitle: {
// 最后一步骤成功提示语
type: String,
default: '',
},
lastBtnTitle: {
// 最后一步骤成功按钮文字
type: String,
default: '完成',
},
active: {
type: Number,
default: 0,
required: true,
},
isShowLastSuccess: {
type: Boolean,
default: true,
},
})
const stepContent = () => {
return props.isShowLastSuccess
? props.stepData && props.stepData.slice(0, props.stepData.length - 1)
: props.stepData
}
const emits = defineEmits(['complete'])
// 第四步完成
const complete = () => {
emits('complete', props.active)
}
.i_layout {
.section {
.layout-content {
padding: 0;
}
}
}
.flex-box {
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.flex-ver {
align-items: center;
justify-content: center;
}
.flex-col {
flex-direction: column;
}
.step-wizard {
position: relative;
.el-steps--simple {
border-radius: 0px;
}
.content-step-main {
.step-last {
.icon-success {
color: #67c23a;
font-size: 95px;
margin-top: 40px;
}
.success-margin {
margin-bottom: 70px;
}
}
}
}
2、防抖按钮组件代码示例
export default {
name: 'TButton',
}
import { ref } from 'vue'
const props = defineProps({
time: {
type: Number,
default: 1000,
},
})
// 抛出事件
const emits = defineEmits(['click'])
const record = ref(0)
const handleClick = () => {
let newTime = new Date()
if (newTime.getTime() - record.value > props.time) {
emits('click')
}
record.value = new Date().getTime()
}
3、短信倒计时组件代码示例
{{ text }}
export default {
name: 'TTimerBtn',
}
import { computed, watch, ref } from 'vue'
const props = defineProps({
second: {
type: Number,
default: 60,
},
className: {
type: String,
},
})
const time = ref(0)
const disabled = ref(false)
const text = computed(() => {
return time.value > 0 ? `${time.value}s 后重获取` : '获取验证码'
})
const emits = defineEmits(['click'])
const run = () => {
emits('click')
start()
}
// 重置倒计时0
const reset = () => {
time.value = 0
}
const start = () => {
time.value = props.second
disabled.value = true
timer()
}
const timer = () => {
if (time.value > 0) {
time.value--
setTimeout(timer, 1000)
} else {
disabled.value = false
}
}
// 暴露方法出去
defineExpose({ reset })
.timer-btn {
position: relative;
.sendSmsBtn {
height: 40px;
line-height: 40px;
border-radius: 4px;
background: #ef473a;
border: none;
padding: 0 6px;
color: #fff;
display: inline-block;
min-width: 92px;
cursor: pointer;
}
.dissendSmsBtn {
opacity: 0.5;
cursor: auto;
}
}
五、组件地址
gitHub组件地址
gitee码云组件地址
六、相关文章
基于ElementUi&antdUi再次封装基础组件文档
vue3+ts基于Element-plus再次封装基础组件文档
vue2/3集成qiankun微前端
|