菜单 vue3 h函数创建组件
目录
index/.vue
![]()
menu.js
import { createVNode, render } from "vue";
import menuElement from "./index.vue";
// 定义一个div容器
const div = document.createElement("div");
document.body.appendChild(div);
export default {
addMenu(locat, menuList, params) {
const vnode = createVNode(menuElement, { locat, menuList, params });
// 调用渲染方法：将虚拟节点渲染到dom中
render(vnode, div);
},
};
export const removeMenu = function () {
render(null, div);
};
menuData.js
export default {
viewArr : [
{
label: "左对齐",
tips: "Stop",
disabled: value >= 2 ? false : true,
icon: {
show: true,
type: "img",
value:
value >= 2
? "statics/icons/proicons/alignLeft_active.svg"
: "statics/icons/proicons/alignLeft.svg",
},
line: false,
fn: (row) => {
this.alignLeft();
},
},
{
label: "水平居中对齐",
tips: "Add",
disabled: value >= 2 ? false : true,
icon: {
show: true,
type: "img",
value:
value >= 2
? "statics/icons/proicons/alignHorizontalCenter_active.svg"
: "statics/icons/proicons/alignHorizontalCenter.svg",
},
line: false,
fn: (row) => {
this.horizontalCenter();
},
},
{
label: "右对齐",
disabled: value >= 2 ? false : true,
icon: {
show: true,
type: "img",
value:
value >= 2
? "statics/icons/proicons/alignRight_active.svg"
: "statics/icons/proicons/alignRight.svg",
},
tips: "Edit",
line: false,
fn: (row) => {
this.alignRight();
},
},
{
label: "上对齐",
tips: "Delete",
disabled: value >= 2 ? false : true,
icon: {
show: true,
type: "img",
value:
value >= 2
? "statics/icons/proicons/alignTop_active.svg"
: "statics/icons/proicons/alignTop.svg",
},
line: false,
fn: (row) => {
this.alignTop();
},
},
{
label: "垂直居中对齐",
tips: "Stop",
disabled: value >= 2 ? false : true,
icon: {
show: true,
type: "img",
value:
value >= 2
? "statics/icons/proicons/alignVerticalCenter_active.svg"
: "statics/icons/proicons/alignVerticalCenter.svg",
},
line: false,
fn: (row) => {
this.verticalCenter();
},
},
{
label: "下对齐",
tips: "Add",
disabled: value >= 2 ? false : true,
icon: {
show: true,
type: "img",
value:
value >= 2
? "statics/icons/proicons/alignBottom_active.svg"
: "statics/icons/proicons/alignBottom.svg",
},
line: false,
fn: (row) => {
this.alignBottom();
},
},
{
label: "中心对齐",
disabled: value >= 2 ? false : true,
icon: {
show: true,
type: "img",
value:
value >= 2
? "statics/icons/proicons/centerAlignment_active.svg"
: "statics/icons/proicons/centerAlignment.svg",
},
tips: "Edit",
line: false,
fn: (row) => {
this.controlCenter();
},
},
{
label: "垂直等间距",
tips: "Stop",
disabled: value >= 3 ? false : true,
icon: {
show: true,
type: "img",
value:
value >= 3
? "statics/icons/proicons/verticalEqualSpacing_active.svg"
: "statics/icons/proicons/verticalEqualSpacing.svg",
},
line: true,
fn: (row) => {
this.verticallyEquallySpaced();
},
},
{
label: "水平等间距",
tips: "Add",
disabled: value >= 3 ? false : true,
icon: {
show: true,
type: "img",
value:
value >= 3
? "statics/icons/proicons/horizontalEqualSpacing_active.svg"
: "statics/icons/proicons/horizontalEqualSpacing.svg",
},
line: false,
fn: (row) => {
this.horizontallEquidistant();
},
},
{
label: "垂直无间距",
disabled: value >= 2 ? false : true,
icon: {
show: true,
type: "img",
value:
value >= 2
? "statics/icons/proicons/verticalNoSpace_active.svg"
: "statics/icons/proicons/verticalNoSpace.svg",
},
tips: "Edit",
line: false,
fn: (row) => {
this.nohorizontallEquidistant();
},
},
{
label: "水平无间距",
tips: "Delete",
disabled: value >= 2 ? false : true,
icon: {
show: true,
type: "img",
value:
value >= 2
? "statics/icons/proicons/horizontalNoSpace_active.svg"
: "statics/icons/proicons/horizontalNoSpace.svg",
},
line: false,
fn: (row) => {
this.noverticallyEquallySpaced();
},
},
{
label: "等宽",
tips: "Add",
disabled: value >= 2 ? false : true,
icon: {
show: true,
type: "img",
value:
value >= 2
? "statics/icons/proicons/sameWidth_active.svg"
: "statics/icons/proicons/sameWidth.svg",
},
line: true,
fn: (row) => {
this.sameHeight();
},
},
{
label: "等高",
disabled: value >= 2 ? false : true,
icon: {
show: true,
type: "img",
value:
value >= 2
? "statics/icons/proicons/sameHeight_active.svg"
: "statics/icons/proicons/sameHeight.svg",
},
tips: "Edit",
line: false,
fn: (row) => {
this.sameWidth();
},
},
{
label: "等大小",
tips: "Delete",
disabled: value >= 2 ? false : true,
icon: {
show: true,
type: "img",
value:
value >= 2
? "statics/icons/proicons/sameSize_active.svg"
: "statics/icons/proicons/sameSize.svg",
},
line: false,
fn: (row) => {
this.sameSize();
},
},
{
label: "上移一层",
tips: "Stop",
disabled: value >= 1 ? false : true,
icon: {
show: true,
type: "img",
value:
value >= 1
? "statics/icons/proicons/bringForward_active.svg"
: "statics/icons/proicons/bringForward.svg",
},
line: true,
fn: (row) => {
this.putOnTop();
},
},
{
label: "下移一层",
tips: "Add",
disabled: value >= 1 ? false : true,
icon: {
show: true,
type: "img",
value:
value >= 1
? "statics/icons/proicons/bringBackward_active.svg"
: "statics/icons/proicons/bringBackward.svg",
},
line: false,
fn: (row) => {
this.putOnBottom();
},
},
{
label: "移到最上层",
disabled: value === 1 ? false : true,
icon: {
show: true,
type: "img",
value:
value === 1
? "statics/icons/proicons/bringToTop_active.svg"
: "statics/icons/proicons/bringToTop.svg",
},
tips: "Edit",
line: false,
fn: (row) => {
this.moveUpOneLevel();
},
},
{
label: "移到最下层",
tips: "Delete",
disabled: value === 1 ? false : true,
icon: {
show: true,
type: "img",
value:
value === 1
? "statics/icons/proicons/bringToBack_active.svg"
: "statics/icons/proicons/bringToBack.svg",
},
line: false,
fn: (row) => {
this.moveDownOneLevel();
},
},
{
label: "编辑",
disabled: spValue ? false : true,
icon: {
show: true,
type: "img",
value: spValue
? "statics/icons/proicons/edit_active.svg"
: "statics/icons/proicons/edit.svg",
},
tips: "Edit",
line: true,
fn: (row) => {
this.changeNone();
},
},
{
label: "打组",
disabled: value >= 2 ? false : true,
icon: {
show: true,
type: "img",
value:
value >= 2
? "statics/icons/proicons/group_active.svg"
: "statics/icons/proicons/group.svg",
},
tips: "Edit",
line: false,
fn: (row) => {
this.packGroup();
},
},
{
label: "解组",
tips: "Delete",
disabled: spValue ? false : true,
icon: {
show: true,
type: "img",
value: spValue
? "statics/icons/proicons/ungroup_active.svg"
: "statics/icons/proicons/ungroup.svg",
},
line: false,
fn: (row) => {
this.unpackGroup();
},
},
]
}