vue实现一个单独的组件注释
作者：润朱 发布时间：2024-04-27 15:47:04
一个单独的组件注释
写了一个组件 加了一些注释
效果图如下
分页一类的功能都已经写好了 下面就上代码，不知道有几个老哥能看的懂，有不足之处，还望老哥们指正
/**
* 活动菜单 活动列表
* 注释菜单
* 最后修改 2020/8/8 10:25
* HTML组成：上中下结构 上为导航 中为展示列表 下为分页表
* JS：
* loadActSize 用于载入获取到一共有多少个活动的API接口 方法为Get
* loadActByPage 用于载入获取单页的活动
* cancelAct 用于撤销删除活动
* editAct 用于编辑改变活动（在这里封装后用于将活动的in_banner）属性转变为true 从而添加至轮播图
* Pagination 为组件中的分页组件 （element-UI）
* data属性：
* formInline 用于储存分页的页数内容
* addToBannerI 用于储存添加至轮播图的内容
* dialogFormVisible 用于控制撤销原因填写框是否出现
* form 储存撤销原因和活动ID
* listData 用于储存列表中的数据
* pageparm 分页参数
* method：
* created 创建时调用getdata方法获取数据
* addToBanner 将活动添加到轮播图
* getdata 调用获取到一页的轮播图列表
* callFather 更新分页参数
* deleteActivity 撤销活动
* jump 跳转到新的页面
* CSS:
* user-search 搜索栏的属性
*/
<template>
<div>
<!-- 面包屑导航 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>活动列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 搜索筛选 -->
<el-form :inline="true" :model="formInline" class="user-search">
<el-form-item label="搜索：">
<el-input size="small" v-model="formInline.deptName" placeholder="输入活动名称"></el-input>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
<el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
</el-form-item>
</el-form>
<!--列表-->
<el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100％;">
<el-table-column align="center" type="selection" width="60">
</el-table-column>
<el-table-column sortable prop="id" label="序号" width="110">
</el-table-column>
<el-table-column sortable prop="image" label="图片" width="100">
<template slot-scope="scope">
<el-image :src="scope.row.image"></el-image>
</template>
</el-table-column>
<el-table-column sortable prop="name" label="发起者昵称" width="200">
</el-table-column>
<el-table-column sortable prop="originator_id" label="发起者id" width="100">
</el-table-column>
<el-table-column align="center" label="操作" min-width="300">
<template slot-scope="scope">
<el-button size="mini" type="warning" @click="jump(scope.row.id)">查看</el-button>
<el-button size="mini" type="warning" @click="addToBanner(scope.row)">添加至轮播图</el-button>
<el-button size="mini" type="danger" @click="dialogFormVisible = true">撤销</el-button>
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="删除原因" :label-width="formLabelWidth">
<el-input v-model="form.reason" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="deleteActivity(scope.$index,scope.row)">确 定</el-button>
</div>
</el-dialog>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
</div>
</template>
<script>
import {loadActSize,loadActByPage,cancelAct,editAct} from "../../api/basisMG"
import Pagination from '../../components/Pagination'
export default {
data() {
return {
formInline: {
page: 1,
limit: 10,
size:10,
},
addToBannerI:{
actID:'',
activity:{
in_banner:true
},
image:{}
},
dialogTableVisible: false,
dialogFormVisible: false,
form: {
actID:1,
reason: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
formLabelWidth: '120px',
// 删除
userparm: [], //搜索权限
listData: [], //用户数据
// 分页参数
pageparm: {
currentPage: 1,
pageSize: 10,
total: 11
}
}
},
// 注册组件
components: {
Pagination
},
/**
* 数据发生改变
*/
/**
* 创建完毕
*/
created() {
this.getdata(this.formInline)
},
/**
* 里面的方法只有被调用才会执行
*/
methods: {
//添加至轮播图
addToBanner(act){
console.log(act)
this.addToBannerI.actID=act.id
console.log(this.addToBannerI)
editAct(this.addToBannerI)
.then(res=>{
console.log(res)
})
},
// 获取公司列表
getdata(parameter) {
this.loading = true
/***
* 调用接口，注释上面模拟数据 取消下面注释
*/
loadActSize(parameter).then(res=>{
console.log(res);
this.pageparm.total = res.data
loadActByPage(parameter)
.then(res => {
console.log(res);
this.loading = false
this.listData = res.data
// 分页赋值
this.pageparm.currentPage = this.formInline.page
this.pageparm.pageSize = this.formInline.limit
})
.catch(err => {
this.loading = false
this.$message.error('菜单加载失败，请稍后再试！')
})
})
},
callFather(parm) {
this.formInline.page = parm.currentPage
this.formInline.limit = parm.pageSize
this.getdata(this.formInline)
},
// 搜索事件
search() {
this.getdata(this.formInline)
},
//删除活动
deleteActivity(index,row){
this.dialogFormVisible = false
this.$confirm('是否确认删除该活动','提示',{
confirmButtonText:'确定',
cancelButtonText:'取消',
type:'warning'
}).then(() =>{
console.log(index);
console.log(this.listData)
this.form.actID = this.listData[index].id
cancelAct(this.form)
.then(res=>{
console.log(res)
})
this.$message({
type:'success',
message:'删除了该活动'
});
}).catch(() =>{
this.$message({
type:'info',
message:'已取消删除该活动'
})
})
},
jump(activityId){
this.$router.push({path:"/Activity/activityDetail",query:{activityId:activityId}});
}
}
}
</script>
<style scoped>
.user-search {
margin-top: 20px;
}
.userRole {
width: 100％;
}
</style>
vue代码注释规范,代码规范
其实关于这一点我是深恶痛绝呀，你说我们吧eslint开了，来敲代码，就能把你的代码给规范了吧，关于组件命名和src结构都是按照VUE目录给的(项目成员已构造)，功能注释和调试代码（模拟数据的部分，已注释，用于和客户方展示，判定好才可删除）和后期需求优化的地方注释。
开发过程上到svn是不是要每日update和晚上commit来管理代码呢，当然是。可是当我把这部分注释留在svn库里就不行了，同事说我代码不规范呀，给我郁闷的。
我就想知道你以后维护代码是要从仓库里面拉出来看的吧，你回头维护还要再想想是吧。仓库里面只能有功能注释不能有其他的注释，说是有其他的不规范，我的妈，我问你要怎么管理你这部分东西，对方提出把代码存到你的本地文件夹里面，svn里上传无注释的（仅有功能注释），我是手动狗头了，老铁。如果是这个样子，我咋开发东西呀，一口如何吃个大胖子。（注释在weabpck打包的时候会被压缩去掉的不在dist文件里面），当然我也觉得尽量少的注释会很简洁，可问题是你咋确定你的思路效果就是客户需要的呢，比如你有个颜色ui给的不好，那你要注释一下此处颜色要改吧，等需求给你了新的，你再来改的吧，不行，我的吗。有部分table你要本地看，但是没数据接口，你要上假数据吧，不行，你调试可以有但是上svn不能有，我的妈，我问你咋搞，你让我每次提交代码都要手动在电脑文件夹copy出来一份，改掉代码结构再上传？每天都要干这个事，不累呀。我有非功能注释就是为了review来慢慢完善再去掉的。哎呀，吐槽了这么多，跑题了。下面说主要的注释部分规范。
注释规范
总的说一下，就是注释尽量少，(显得我们专业，但维护性很差)，注释要为功能性的，不能有类似待完善的说明，这种说明要自己偷偷的写出来，不放到代码里面。我看我以后还是写个说明文档，放在本地，把哪部分功能需要完善的地方（文件路径和部分代码和关键字方便定位代码区）给写在文档里面。刚好可以和SA来对接。嗯，就这么干。这比同事的专业方式（存文件夹）要强多了。
最后得说明一点，就是最好有一个解释文件，可以是readme里面，也可以是单独文件，用来说明每一部分的功能（中文）和作者和代码修改状态，我比较推荐在readme里面写
1.TEMPLATE结构内容注释
（1）大区块之间需要回车换行，且有有单独的中文注释
2.STYLUS注释
（1）每个大区块的样式的需要有单独的中文注释
（2）每个大区块样式之间需要回车换行
（3）在STYLUS自定义函数库文件类似于mixin.styl，则需要对每个语言函数进行单独的批注，或者一些功能类似的语言函数可以根据功能分类注释
3.SCRIPT注释
（1）尽可能多用单行注释，注释需要与被注释的地方对齐
（2）生命周期created()、mounted()下的所有方法调用需要单独注释，methods里面涉及接口调用的方法一定要注释，filters里面的过滤器需要注释说明功能
命名规范：
1.组件文件夹命名：
（1）按照功能英文命名，过长则用 ” - ” 连接
（2）其内部的组件名称和样式名称与文件夹同名
（3）其风格一致
2.静态资源文件夹static命名：
（1）英文命名，过长则用 ” - ” 连接
（2）其主目录需要创建一个解释文件（annotation.txt/annotation.md），在这个解释文件中使用中文批注好每个目录的内容，以及每个目录正在被哪些组件调用
3.图片文件命名：
（1）如果是精灵图，则需按功能命名
（2）如果是列表渲染图片，则需要按照1-100编号命名
（3）如果是ICON图片，则需要添加 ”icon-”前缀
解释文件：
1.定义：一个对当前目录下所有的文件夹的一个解释性文档，中文批注每个文件夹下的组件功能或者资源类型，如果是资源类型文件夹，则还需批注调用该文件夹的组件名称和路径
2.名称：统一命名annotation.txt/annotation.md
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
来源：https://blog.csdn.net/qq_43681850/article/details/107875870
0
投稿猜你喜欢
1、数据库架构1.1、MySQL 的基础架构图给面试官讲一下 MySQL 的逻辑架构，有白板可以把下面的图画一下，图片来源于网络。Mysql- 前言千位分隔符，其实就是数字中的逗号。依西方的习惯，人们在数字中加进一个符号，以免因数字位数太多而难以看出它的值。所以人们在数字中，每隔三位
- 1.前言在 Python 中，说到函数，大家都很容易想到用 def 关键字来声明一个函数：def Hello():
- 一、数据库的备份1、选择要备份的数据库“accountInfo”，点击鼠标右键 → 任务 → 备份2、在打开的“备份数据库 —account
- pytorch中如何只让指定变量向后传播梯度？（或者说如何让指定变量不参与后向传播？）有以下公式，假如要让L对xvar求导：（1）中，L对x
- 前言： 在项目中，我用到了vue +iview + vue-router 开发； 然后导航条就使用了iview的Menu组件，结果发觉导航条
- 在用户注册中最常见的安全验证之一就是邮箱验证。根据行业的一般做法，进行邮箱验证是避免潜在的安全隐患一种非常重要的做法，现在就让我们来讨论一下
- # 递归满足的条件# 1.自己调用自己# 2.必须有一个明确的结束条件# 优点:逻辑简单\定义简单# 缺点:防止内存消耗过多,容易导致栈溢出
- 导言到目前为止的讨论编辑DataList的教程里，没有包含任何验证用户的输入，即使是用户非法输入— 遗漏了product的name或者负的p
- Windows下将gvim8配置为Python IDE大概分为以下四步，每步介绍的都非常详细，一起看看吧。1.准备工作将下面的安装包或者文件
- 根本原因：python定义函数时，一般都会有指定返回值，如果没有显式指定返回值，那么python就会默认返回值为None我们输入的代码如下：
- 1、需求用户输入当前目录下任意文件名，程序完成对该文件的备份功能。备份文件名为xx[备份]后缀，例如：test[备份].txt。2、步骤接收
- 以前没怎么仔细的研究过ajax,只是用到了就直接拿过来用,发现了问题再找解决方法.以下是我在找解决问题的过程中的一点小小的总结. 一.谈Aj
- pandas.read_csv()遇到读进来乱码问题1.设置encoding='gbk'或者encoding='ut
- 来源：http://stackoverflow.com/questions/3806562/ways-to-move-up-and-down
- 常用Mysql查询语句记录一、授权1.授权本地用户对所有数据库具有所有权限> grant all privileges on
- 在编写程序时，数据库结构会经常变化，所以经常需要编写一些数据库脚本，编写完成后需发往现场执行，如果已经存在或者重复执行，有些脚本会报错，所以
- Pycharm是一款很好用的python开发工具，开发Python爬虫和Python web方面都很不错这里我为大家提供了两种pycharm
- 本文实例讲述了Python操作串口的方法。分享给大家供大家参考。具体如下：首先需确保安装了serial模块，如果没安装的话就安装一下pyth
- 本文实例讲述了Python实现对文件进行单词划分并去重排序操作。分享给大家供大家参考，具体如下：文件名：test1.txt文件内容：But
