vuejs实现element-plus
组件的二次封装,下面介绍一下表单的label
和对应的选择器、输入框的封装代码。
el-input子组件的封装
复制代码<template>
<div class="base-input flex align-center">
<div v-if="props.blockName">{{ props.blockName }}</div>
<el-input placeholder="请输入" v-model="chanValue"></el-input>
</div>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
blockName: {
type: String,
default: ''
},
value: {
type: String,
default: ''
}
})
const emits = defineEmits(['update:value'])
// 通过重写计算属性的set和get方法,将计算属性的结果绑定在输入框的model中
const chanValue = computed({
get: () => props.value,
set: (val) => {
emits('update:value', val)
}
})
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
el-select子组件的封装
复制代码<template>
<div class="base-select flex align-center">
<div>{{ props.blockName }}</div>
<el-select
v-model="chanValue"
:multiple="props.multiple"
:filterable="props.filterable"
:allow-create="props.allowCreate"
:placeholder="placeholder"
>
<el-option v-for="item in props.options" :key="item.value" :value="item.value" :label="item.label" />
</el-select>
</div>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
blockName: {
type: String,
default: ''
},
value: {
type: String,
default: ''
},
placeholder: {
type: String,
default: '请选择'
},
options: {
type: Array,
default() {
return [{ value: '', label: '' }]
}
},
// 一下三个属性配合多选使用
multiple: {
type: Boolean,
default: false
},
filterable: {
type: Boolean,
default: false
},
allowCreate: {
type: Boolean,
default: false
}
})
const chanValue = computed({
get: () => props.value,
set: (val) => {
emits('update:value', val)
}
})
const emits = defineEmits(['update:value'])
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
组件的调用
复制代码<AInput blockName="传入label名称" v-model:value="双向绑定的数据" />
<ASelect blockName="传入label名称" :options="选择器的选项值" v-model:value="双向绑定的数据" />
- 1
- 2
标签: element-plus, vuejs, 二次封装
上面是“vuejs实现element-plus组件的二次封装”的全面内容,想了解更多关于 vuejs 内容,请继续关注web建站教程。
当前网址:https://ipkd.cn/webs_2314.html
workflows工作流
树上挂着一只表情可爱的香蕉ComfyUI工作流二
一个穿过泥泞雷区的士兵ComfyUI工作流
一个极其美丽细致的女孩ComfyUI工作流
基础扩图comfyui工作流
一只躲在一堆秋叶里的小刺猬
一座千年九尾白狐玉雕ComfyUI工作流
一只可爱的猫骑着一匹可爱的马ComfyUI工作流
一只放屁虫甲虫ComfyUI工作流
猜你喜欢
声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!