我们项目中有很多需要用到树形组件的,以前写jq的时候用ztree,现在写vue,感觉找不到像ztree一样好用的树形组件,又不想在vue总用jq,所以打算自己封装一个tree组件,花了两个时间才搞完一些基本功能,不过已经可以正常使用了,效果如下:图标的问题大家可以自行用ztree的样式去修改加上上周的折叠式菜单,gitHub网址:h
转载
2024-04-07 08:43:57
109阅读
1、使用 webpack-simple 模板,没有vue-router的中间件,不需要路由时推荐使用,同时 webpack-simple 没有格式的检测,新建项目vue init webpack-simple然后再 npm install 初始化在新建的项目的src目录下新建一个目录(components)目录下存放自定义组件组件封装好后在组件目录(components)下新建一个index.js
转载
2024-05-30 22:23:17
114阅读
常见组件封装使用vue create green-ui命令初始化一个vue项目勾选如下选择scss选择eslint风格选择保存时校验选择In package.json保存输入项目名创建项目成功启动项目然后把App.vue修改为如下内容<template>
<div id="app">
定制组件
</div>
</template>
转载
2024-04-21 13:45:24
217阅读
组件的prop双向绑定于vue2废除,vue2的prop只限于父->子的单向流动,不能修改外层传来的数据,如果需要得自己来实现。实现方法步骤: 1.在组件内得data对象中创建一个props属性的副本data: function () {
return {
myResult: this.result(props中得值)//data中新增字段
}; 2.创建针对props
转载
2023-06-14 14:59:26
159阅读
什么样的内容需要封装
一段代码在项目中出现两次就开始考虑是否应该进行封装,出现三次就肯定要封装,大到一个页面,一个组件,小到一个function和一个css样式。封装原则
以下将封装出来的通用组件叫做子组件,引用通用组件的界面叫做父组件。封装出来的组件必须具有高性能,低耦合的特性,主要从以下几点入手:1.数据从父组件传入子组件本身不要生成数据,如果需要生成数据,只能在组件内部进行使用,不要
转载
2024-06-09 19:32:13
134阅读
1、loading.vue background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iM
原创
2021-12-28 14:27:09
1507阅读
vue中写好一个组件功能<template> <div id="app"> <div class="popwin"> <
原创
2023-01-03 15:06:36
462阅读
封装vue组件库1.新建项目新建一个vue项目vue create 项目名2.在src目录下新建一个packages文件夹,用来存放组件文件及字体图标等。目录如下:3.同在packages文件夹下新建一个index.js文件,用来注册所有组件,引入字体图标import Button from './button'
const components = [Button]
// 定义install方法
vue如何封装一个通用组件vue如何封装一个全局组件vue封装公共头部组件
转载
2020-04-24 14:26:00
693阅读
2评论
<template> <view> <view class="cu-avatar margin-left" :class="[false ? 'radius' : 'round', ['sm', 'lg', 'xl', ''][3], ]" style="background-image:url(http...
原创
2022-10-13 17:07:18
323阅读
//根组件<template> <div class="hello"> <Time v-model="value"></Time> </div></template><script>import formate from '../utils/formate'import Time ...
原创
2021-09-03 13:42:00
1303阅读
效果封装的组件<template> <el-form-item :label="label"> <el-checkbox :indeterminate="isIndeterminateBool" v-model="checkAll"
原创
2023-03-14 09:25:51
357阅读
vue组件三要素props参数slot定制插槽event自定义事件基本用法在使用 vue-cli 创建的项目中,组件的创建非常方便,只需要新建一个 .vue 文件,然后在 template 中写好 HTML 代码,一个简单的组件就完成了
一个完整的组件,除了 template 以外,还有 script和 style<template>
<div class="headComp
原创
2024-04-12 21:05:53
72阅读
一、前言 之前的博客聊过 vue2.0和react的技术选型;聊过vue的axios封装和vuex使用。今天简单聊聊 vue 组件的封装。 vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼容性问题突出。像 Mint-UI 等说实话已经很不错了,但是坑也是不少,而且项目中很多功能仅凭这些也实现不了,这需要我们去封装自
转载
2023-10-30 14:12:30
215阅读
文章目录封装vue组件的原则和方法父组件使用props对子组件进行传参:2.在父组件中处理事件记得留一个slot4.不要依赖vuex5.合理使用scoped6.组件具有单一职责 封装vue组件的原则和方法vue组件封装思路,可以说是实现vue项目的基础。在构建项目的过程中,开发者使用的是vue框架的组件,而将一个功能抽象成多个组件,有利于提升开发效率,并且促进代码的可维护性。 以下将封装出来的通用
转载
2023-12-14 10:52:22
79阅读
1.1 封装1.1.1 封装体现1.方法就是一个封装体。2.关键字private也是一种封装。1.1.2 封装的含义封装:把抽象出的数据和对数据的操作封装在一起,数据被保护在内部,程序的其他部分只有通过被授权的成员方法才能对数据进行操作。1.1.3 封装的好处1 提高了代码的复用性。2 隐藏了实现细节,还要对外提供可以访问的方式,便于调用者的使用。3 提高了安全性。1
转载
2023-12-27 14:21:05
42阅读
1. 文件目录结构在views目录中放页面基础结构的组件在components里放页面中各个功能模块的组件2. 使用组件(1)在页面中单独引用<template>
<Nav></Nav>
</template>
<script>
import nav from '@/components/Nav.vue'
export defaul
转载
2024-04-07 08:51:11
831阅读
大部分项目都需要一个菜单栏进行切换,所以学习了一下怎样封装一个tabbar组件,这样以后使用的时候可以直接拿来使用。1.路由router首先是路由的设置,这个在之前的随笔中已经写过相关的使用方法。说一下使用tabbar,在标签栏下面点击切换页面的时候,跟随到不同的路径,就需要配置相关的router,根据不同的路径展示不同的页面。入口App中的div:<div id="app">