个人总结（前端）

2022.08.10

前端使用graceui时，使用相关标签时，需要引入对应的插件，例如：gui-datetime插件，

<gui-datetime @confirm="confirm2":value="demo" @change="chang2":isSecond=false>
	<text class="demo gui-border-radius-large gui-bg-blue gui-icons gui-color-white">&#xe6d1;{demo}}
    </text>
</gui-datetime>

<script>
import guiDatetime from '@/GraceUI5/components/gui-datetime.vue';
export default {
		components: {
			guiDatetime,
		},
}
</script>

props使用目的

props{}对象是用于子组件接收父组件输出过来的数据对象，且不会更改父组件的任何数据。

父组件的每次更新都会更新props对象数据，子组件也不应修改props对象数据。（如此是为了避免逻辑混乱，导致数据的传递异常）

使用iview框架时DatePicker 时间格式转换（moment）

DatePicker标签和v-model连用时，会使时间数据错乱，在返回时间数据给后端时，可用moment格式化统一格式。

let dateTime = moment(this.date).format("YYYY-MM-DD")

使用时需要安装依赖

npm i moment --save

使用时，在需要的vue文件中引入moment组件

import moment from 'moment'

在main.js中注册全局组件

import moment from 'moment'
Vue.prototype.dateFormat = moment

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

Object.assign(target, ...sources)将来源对象值赋值到目标对象，并改变目标对象，可通过空对象接收不改变目标对象（将目标对象作为源对象）

2022.09.27

使用tree 树形控件时，自定义节点的功能按钮,在render节点中添加按钮

js模块method方法中：

<template>
	<div slot="extra">
		<Tooltip content="新增分类">
			<Icon type="md-add" size="16" style="margin-right: 10px;cursor: pointer;" @click="toaddTagType()" />
		</Tooltip>
	</div>
	<Tree ref="tree" :data="treedata" :render="renderContent">
	</Tree>
</template>

<script>
	components: {},
		created() {},
		mounted() {},
		data() {
			return {
				treedata: [], //后端获取的list集合
			}
		},
		methods: {
			renderContent(h, {
				root,
				node,
				data
			}) {
				return h(
					"div", {
						on: {
							click: (e) => {
								this.gettags(data);
							},
						},
					}, [
						h('div', {
							style: {
								display: 'inline-block',
								width: '100px',
							}
						}, data.name),
						// 定义按钮
						h('span', {
								class: "btnNone",
								style: {
									marginLeft: '1rem'
								}
							},
							[
								// 编辑按钮
								h('Button', {
									props: Object.assign({}, this.buttonProps, {
										icon: 'ios-create',
										type: "text", //定义按钮样式
									}),
									style: {
										marginRight: '8px',
										width: '1.5rem',
										lineHeight: '0',
										padding: '0',
										height: '1.4rem',
									},
									on: {
										click: () => {
											this.editTagType(data)
										}
									}
								}),
								// 删除按钮
								h('Button', {
									props: Object.assign({}, this.buttonProps, {
										icon: 'md-trash',
										type: "text",
									}),
									style: {
										marginRight: '8px',
										width: '1.5rem',
										padding: '0',
									 lineHeight: '0',
										height: '1.4rem',
									},
									on: {
										click: () => {
											this.DeleteTagType(data)
										}
									}
								})
							]
						),
					]
				);
			},

		},
</script>