vue3/element plus自定义封装tree

// tree-item.vue
<template>
  <div class="tree-item">
    <div @click="handleToggle(list)" @dblclick="handleDblClick(list)" class="tree-title">
      <el-icon v-if="hasChild" :color="'blue'" :size="15" @click="add(list)">
        <CirclePlus />
      </el-icon>
      <el-icon v-else :color="'blue'" :size="15" @click="tips(list)">
        <Remove />
      </el-icon>
      <el-icon v-if="hasChild && list.label != '根目录'" :color="'blue'" :size="15" @click="tips(list)">
        <Remove />
      </el-icon>
      <h4 style="margin-left: 5px">{{ list.label }}</h4>
    </div>
    <div v-show="open" class="child-content">
      <tree-item v-for="(item, index) in list.children" :list="item" :key="index"></tree-item>
    </div>
  </div>
</template>

<script>
import { ElMessage } from "element-plus";
export default {
  name: "TreeItem",
  // vue3 使用 defineProps 声明 props
  /**
  const props = defineProps({
    str: {
      type: String,
      default: "",
    },
  });
  */
  props: {
    list: {
      type: [Object, Array],
      required: true
    }
  },
  data() {
    return {
      open: false
    };
  },
  // vue3引入 import { computed } from 'vue'
  /**
vue.3.0 中用于从vue 按需导入 computed 计算属性。
如果传入的是一个getter 函数, 会返回一个不允许修改的计算属性。
使用ref 创建一个响应式对象, 在模板中使用不用自动解套。 直接渲染使用。
传入一个对象, 包含get 和 set 函数, 就可以创建一个可以修改的计算属性。
只可以获取值,不允许修改值直接使用 computed 计算属性使用箭头函数。
既可以获取值, 也可以修改值, computed 计算属性中传入一个对象。 get 方法 和 set 方法。
而且,vue3的过滤器已经移除,所以建议用计算属性去替代过滤器
*/
  computed: {
    hasChild() {
      return this.list.children && this.list.children.length;
    }
  },
  methods: {
    add(list) {
      console.log(list);
      // vue3方式
      ElMessage({
        message: `增加数据`,
        type: "warning"
      });
    },
    tips(list) {
      ElMessage({
        message: `删除${list.label}`,
        type: "warning"
      });
    },
    handleToggle(list) {
      console.log(list);
      if (this.hasChild) {
        this.open = !this.open;
      }
    },
    handleDblClick(list) {
      console.log(111);
      ElMessage({
        message: `修改${list.label}名称`,
        type: "warning"
      });
    }
  }
};
</script>

<style lang="less" scoped>
.tree-item {
  font-size: 15px;
  cursor: pointer;

  .tree-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}

.child-content {
  margin-left: 20px;
}
</style>

// tree.vue
<template>
  <div class="tree-wrap">
    <div v-for="(item, index) in dataSource" :key="index">
      <tree-item :list="item"></tree-item>
    </div>
  </div>
</template>

<script>
// vue3以setup语法糖进行挂载,只需要导入然后直接可以挂载子组件
import TreeItem from "./tree-item.vue";
export default {
  name: "tree",
  props: {
    dataSource: {
      type: [Object, Array],
      required: true
    }
  },
  components: {
    TreeItem
  }
};
</script>
<style scoped>
.tree-wrap {
  width: 100%;
  /* padding: 0 50px; */
}
</style>

// 父组件引入
import xTree from "./tree.vue";
<template>
      <x-tree :data-source="tree"></x-tree>
</template>
<script lang="ts">
export default defineComponent({
  setup() {
    let tree = reactive([
      {
        label: "根目录",
        children: [
          {
            label: "车辆",
            children: [
              {
                label: "出租车"
              },
              {
                label: "公交车"
              }
            ]
          },
          {
            label: "企业"
          },
          {
            label: "人员"
          }
        ]
      }
    ]);
    }
    )}
    </script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Vue3、Element Plus、Axios封装是一种前端开发的技术组合。Vue3是一个流行的JavaScript框架,用于构建用户界面。它提供了一套响应式的数据绑定和组件系统,使开发者可以轻松构建动态和交互式的Web应用程序。 Element Plus是Vue3的一套UI组件库,它基于Element UI进行了优化和扩展。Element Plus提供了丰富的组件,例如按钮、表单、表格和对话框等,这些组件帮助开发者快速搭建美观且易于使用的用户界面。 Axios是一个常用的HTTP库,用于在浏览器中进行网络请求。它提供了简洁且功能强大的API,易于使用和配置。Axios支持异步请求、拦截器、请求取消等功能,使开发者能够更加高效地处理网络请求。 封装Vue3、Element Plus和Axios的主要目的是提高开发效率和代码的可维护性。通过封装,可以将常用的功能和逻辑抽象出来,以减少重复代码量,并提供易于复用的代码片段。同时,封装还可以提供一致性和可扩展性,使开发团队能够更好地合作和协作。 在封装中,可以根据具体的需求和项目特点,设计合适的结构和接口。例如,可以将API请求封装成统一的函数或类,以提供统一的调用方式和错误处理。还可以封装一些通用的组件和样式,以提高开发效率和用户体验。 总之,Vue3、Element Plus和Axios封装是一种有效的前端开发方法,它能够提高开发效率、保证代码质量,并帮助开发者构建出功能强大和用户友好的Web应用程序。 ### 回答2: Vue3是Vue.js的下一个主要版本,它带来了许多令人兴奋的新特性和改进。Vue3的主要目标是提供更好的性能、更好的开发体验以及更好的扩展性。它采用了一种新的底层渲染机制,称为“响应式”,使其比Vue2更快、更高效。 Element Plus是一个基于Vue3的UI库,它是Element UI的升级版本。Element Plus提供了一套美观、易于使用的组件,可以帮助我们快速构建现代化的网页和应用程序。它具有丰富的组件库,包括按钮、表单、菜单、对话框等,可以满足各种需求。 Axios是一个基于Promise的HTTP库,用于发送异步请求。它可以在浏览器和Node.js中使用,并且具有简单易用的API。Axios支持各种请求方法,如GET、POST等,并且可以发送请求、处理响应、设置请求头等。它还支持拦截器,可以在发送请求和处理响应之前对请求进行处理,例如添加身份验证信息、处理错误等。 封装Vue3、Element Plus和Axios可以提高我们的开发效率和代码重用性。我们可以根据自己的需求,将常用的组件和方法封装成可复用的模块,以便在不同的项目中使用。对于Vue3和Element Plus,我们可以封装一些通用的页面布局和组件,以及常用的数据操作和状态管理逻辑。对于Axios,我们可以封装一些通用的API请求方法,并配置请求拦截器和响应拦截器,以便在请求中添加身份验证信息、处理错误等。 总之,封装Vue3、Element Plus和Axios可以提高代码的可维护性和可重用性,使我们的开发更加高效和便捷。 ### 回答3: Vue3是一款流行的JavaScript框架,它采用了响应式数据绑定和组件化的开发模式,使得前端开发变得更加简单、高效。Vue3相比于之前的版本,有着更好的性能和更好的开发者体验。 Element Plus是一套基于Vue3开发的UI组件库,它提供了丰富的组件,包括按钮、表单、弹窗等等,开发者可以通过简单的配置和使用,快速构建出美观、交互丰富的前端界面。 Axios是一款基于Promise的HTTP库,可以用于浏览器和Node.js中发送HTTP请求,它支持各种请求方法,如GET、POST等,还有拦截器、请求取消等功能,使得前后端数据交互更加方便和可控。 在封装Vue3中的Element Plus和Axios时,可以利用Vue3的组合式API进行封装。首先,可以创建一个封装Axios实例的文件,设置基础的URL、拦截器等配置。然后,使用Vue3的provide和inject特性,在全局范围内注入该封装的Axios实例。 接下来,在使用Axios发送请求的时候,可以通过创建自定义的hooks,封装常用的请求方法,例如get、post等,将方法放在适当的组件中,并在需要的时候调用这些hooks,以完成数据的请求。 对于Element Plus组件封装,可以创建一个全局注册的文件,在该文件中按需导入所需的组件,并进行全局注册,使得所有的组件都可以使用。也可以根据项目的需要,自定义一些常用的组件,并在适当的地方进行封装和使用。 通过上述的封装,能够在Vue3项目中更加方便地使用Element Plus和Axios,并且实现代码的复用和维护的便利性。同时,这些封装也为项目的开发提供了更高的效率和更好的可维护性。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值