vuejs实现element-plus组件的二次封装

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>

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>

组件的调用

<AInput blockName="传入label名称" v-model:value="双向绑定的数据" />
<ASelect blockName="传入label名称" :options="选择器的选项值" v-model:value="双向绑定的数据" />

进入前端入门建站教程官网入口

vuejs简单介绍vue安装和卸载方法

vuejs实现页面跳转的的几种方式

vuejs子组件赋值失败解决方法

vuejs利用js动态插入子组件

vuejs实现element-plus脚手架的引入介绍

标签： element-plus, vuejs, 二次封装

上面是“vuejs实现element-plus组件的二次封装”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2314.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！