【3】Vite Vue3 用户、角色、岗位选择组件封装

在当今前端开发的领域里,快速、高效的项目构建工具以及使用最新技术栈是非常关键的。Vite+Vue3 组合为一体的项目实战示例专栏将带领你深入了解和掌握这一最新的前端开发工具和框架。

作为下一代前端构建工具,Vite 在开发中的启动速度和热重载方面具有突出的优势。而Vue3,则以更加简化的API和更高效的响应式系统为开发者带来了更加流畅的开发体验。结合使用Vite和Vue3,你将能够快速搭建稳定、高效的前端项目。

在这个专栏里,我们将通过100+个实战示例,详细介绍Vite+Vue3的各个方面。从项目的创建和配置开始,我们会一步一步地引导你使用Vite搭建项目的基本框架,并深入讲解Vue3的语法和特性。随后,我们将演示如何构建常见的前端组件、路由管理和状态管理,以及与后端API的交互等实际项目开发中常见的场景。

无论你是从零开始学习Vite+Vue3,还是希望进一步提升你的前端开发能力,本专栏都能为你提供实用的知识和实战经验。通过这100+个实战示例的学习,你将能够掌握Vite+Vue3的核心概念和技术,并能够在实际项目中灵活应用。

赶快加入我们吧,开始你的Vite+Vue3项目实战之旅!

一、介绍 ✨ ✨ ✨

用户、角色、岗位、组织等等是我们在项目中最常见的一个选择。每一个组件的实现方式可能也不一样,用户的话可能是一个列表的展示,进行单选多选。
而组织可能是树节点的形式。但不管是哪一种封装的逻辑基本都是一样的。我们需要一个展示框,展示用户选择的数据。同时展示框可以进行点击弹出需要选择的数据。
对于组件来说,无非就是弹出框中展示的数据不一样。本文我们就讲解如何通过一个input框进行用户选择的组件封装。

二、为什么要进行组件封装 🌟 🌟 🌟

1、代码复用 👇 👇

将相似的功能封装成组件可以实现代码复用,减少重复编写类似的代码。这样可以提高开发效率,减少出错的可能性。

2、维护方便 👇 👇

组件化开发可以将复杂的功能拆分成多个小的、独立的模块。这样每个模块可以独自开发和维护,便于团队协作和代码的管理。

3、可拓展性 👇 👇

通过封装成组件,可以将用户、角色和岗位选择器与其他功能模块进行解耦,使系统更加灵活和可拓展。如果以后需求变更或要添加新的选择器,只需修改或新增相应的组件,而不需要改动整个系统的代码。

4、可定制性 👇 👇

组件化开发使得用户、角色和岗位选择器的样式、功能和行为都可以自定义。开发人员可以通过提供组件API,让用户自行配置和定制选择器的外观和行为。


总的来说就是有助于提高开发效率、模块化管理、解耦和可拓展性,同时也增加了系统的灵活性和可定制性。

三、完整代码示例 👇 👇

1、组件封装 👇 👇

<!---------------- 弹框选择组件 ---------------->
<template>
    <div>
        <el-input v-model="modelValue">
            <template #prepend>
                <el-button>
                    <i-carbon-user-avatar />
                </el-button>
            </template>
            <template #append>
                <el-button @click="openDialog">
                    <i-carbon-search />
                </el-button>
            </template>
        </el-input>

        <el-dialog v-model="dialogVisible" :before-close="handleClose" :title="title">
            <el-select v-model="selectValue" placeholder="Select">
                <el-option
                    v-for="item in cities"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                    <span style="float: left">{{ item.label }}</span>
                    <span
                        style="
          float: right;
          color: var(--el-text-color-secondary);
          font-size: 13px;
        "
                    >{{ item.value }}</span
                    >
                </el-option>
            </el-select>
            <template #footer>
          <span class="dialog-footer">
            <el-button @click="confirm">确认</el-button>
            <el-button type="primary" @click="handleClose">
              取消
            </el-button>
          </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import {defineComponent, onMounted, ref} from "vue";

export default defineComponent({
    name: 'PopupSelection',
    props: ['modelValue', 'title'],
    setup(props, context) {

        const dialogVisible = ref<boolean>(false)

        const selectValue = ref()

        // 假设这是接口请求以后返回的数据
        const cities = ref([
            {
                value: 'Beijing',
                label: 'Beijing',
            },
            {
                value: 'Shanghai',
                label: 'Shanghai',
            },
            {
                value: 'Nanjing',
                label: 'Nanjing',
            },
            {
                value: 'Chengdu',
                label: 'Chengdu',
            },
            {
                value: 'Shenzhen',
                label: 'Shenzhen',
            },
            {
                value: 'Guangzhou',
                label: 'Guangzhou',
            },
        ])

        const openDialog = () => {
            dialogVisible.value = true
        }

        const handleClose = () => {
            dialogVisible.value = false
        }

        const confirm = () => {
            context.emit('update:modelValue', selectValue.value)
            context.emit('change', selectValue.value)
            dialogVisible.value = false
        }

        onMounted(() => {
            if (props.modelValue) {
                selectValue.value = props.modelValue
            }
        })

        return {
            dialogVisible,
            openDialog,
            handleClose,
            cities,
            selectValue,
            confirm,
        }
    }
})
</script>

<style scoped lang="scss">
</style>

2、组件的使用 👇 👇

<template>
    <popup-selection v-model="currentValue" @change="changeValue" />
</template>

<script lang="ts">
import PopupSelection from "@/components/popupSelection.vue";
import {defineComponent, ref} from "vue";

export default defineComponent({
    components: {PopupSelection},

    setup() {

        const currentValue = ref()

        const changeValue = (value) => {
            console.log('👉👉👉-----------------', value)
        }

        return {
            currentValue,
            changeValue
        }
    }
})
</script>

四、核心代码解析 👇 👇

1、子组件与父组件组件数据和事件传递

const confirm = () => {
    context.emit('update:modelValue', selectValue.value)
    context.emit('change', selectValue.value)
    dialogVisible.value = false
}

我是Etc.End。每一次进步都值得庆祝,每一次努力都值得赞赏。不要忽视自己的成长,每一步都是向前迈进的力量。如果我的文章对你有所帮助的话,希望能留下你的点赞和收藏。😍。

👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue3中封装vite-plugin-svg-icons插件并封装SvgIcon组件的步骤如下: 1. 首先安装vite-plugin-svg-icons插件和fast-glob依赖包,可以使用以下命令进行安装: ``` npm i vite-plugin-svg-icons npm i fast-glob ``` 2. 在项目的配置文件中进行插件的配置。具体配置方式可以参考vite-plugin-svg-icons的官方文档。 3. 将SVG图标文件放置在对应的路径下,并与iconDirs设置保持一致。 4. 在Vue组件中使用SvgIcon组件,并传递相应的props。例如,在index.vue文件中可以这样使用SvgIcon组件: ```html <template> <svg-icon :name="nameVal" color="blue" class-name="menu-svg-icon" :icon-title="iconTitle"></svg-icon> </template> <script setup> import { ref } from 'vue'; import SvgIcon from "@/components/SvgIcon.vue"; let iconTitle = ref('svg图片'); let nameVal = ref('layer'); </script> <style scoped> .menu-svg-icon { width: 180px; height: 180px; color: red !important; } </style> ``` 5. 最后,在需要全局引入SvgIcon组件的地方进行引入和使用。 请注意,这只是一个大致的步骤,具体的实现可能会根据项目的需求和配置方式有所差异。你可以根据自己的实际情况进行相应的调整和配置。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue2+vite中,通过插件vite-plugin-svg-icons和fast-glob封装组件使用svg图片](https://blog.csdn.net/weixin_44867717/article/details/126603027)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* [【vue3】使用vite-plugin-svg-icons插件显示本地svg图标](https://blog.csdn.net/qq_36977923/article/details/127302147)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Etc.End

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值