Vue3自定义组件（四）

1、目的

        在使用naive-ui组件data-table时发现操作栏位通过h()来绑定按钮，使用起来不是很灵活，需要整个可以 完全自定义的组件，然后再绑定到操作栏位，这样才更方便，所以就改了下之前的操作栏位实现方式；

2、实现

      （1）  首先创建自定义操作栏位的组件

        创建CommonTableAction.vue，初步完成功能后内容如下：

<template>
    <div>
        <template v-for=" action in actionColumns">
            <n-button v-if="action.buttonType=='NButton'" :onclick="action.onClick" class="action-button">
                {{action.title}}
            </n-button>
            <n-popconfirm
                    v-else-if="action.buttonType=='NPopconfirm'"
                    :on-positive-click="action.onPositiveClick"
                    :on-negative-click="action.onNegativeClick"
            >
                <template #trigger>
                    <n-button>
                        {{action.title}}
                    </n-button>
                </template>
                {{action.confrimMessage}}
            </n-popconfirm>
        </template>

    </div>
</template>

<script setup>
    import {tableActionProps} from './props'
    import {reactive} from 'vue'
    import {NButton,NPopconfirm} from 'naive-ui'
    const props = defineProps({
        ...tableActionProps
    });
    const actionColumns=reactive(props.actionColumns);

</script>

<style scoped>
.action-button{
    margin: 2px;
}
</style>

这里实现了普通按钮和确认按钮两种操作按钮功能；

在props.ts中新增了新组件的几个参数：（这些用于规范我自定按钮的参数有哪些，方便后续拓展有依据）

export const tableActionProps = {
    actionColumns: {
        type:  null as TableActionOption | null,
        default: null,
    },
}
export interface TableActionOption extends NButton,NPopconfirm{
    buttonType:{
        type: String,
        default: "NButton",
    }
    confrimMessage:{
        type: String,
        default: "你确定继续操作吗?",
    }
}

 注意新组件也要导出后，才能在父组件使用

 （2）使用

        在父组件使用方式就变了，我自己本地的根据需要改成如下内容（具体按钮操作方法自己创建就行）：

tableOptins.actionColumns = reactive({
        title: '操作',
        key: 'action',
        render: (row) => {
            return [
                h(
                    CommonTableAction,
                    {
                        actionColumns: [

                            {
                                buttonType: "NButton",
                                title: '查看',
                                size: 'small',
                                onClick: () => searchData(row),
                            },
                            {
                                buttonType: "NButton",
                                title: '编辑',
                                size: 'small',
                                onClick: () => editData(row),
                            },
                            {
                                buttonType: "NPopconfirm",
                                title: '删除',
                                confrimMessage: '你确定删除该用户吗？',
                                onPositiveClick: () => confirm(row),
                                onNegativeClick: () => cancel(row),
                            }

                        ]
                    },
                ),
            ]
        }
    });

（3）效果

 踩过的坑：

（1）自定义操作按钮操作方法传递给子组件失败

        比如NButton的onClick方法，父组件虽然定义了，但是子组件没有绑定成功，自己写成了@click='action.onClick'，应该用v-bind(简写就是：)绑定属性，写法如下：

:οnclick="action.onClick"

（2）自定义组件参数时想复用naive-ui已有组件的参数

        可以使用extends来继承已有组件：

export interface TableActionOption extends NButton,NPopconfirm{
    buttonType:{
        type: String,
        default: "NButton",
    }
    confrimMessage:{
        type: String,
        default: "你确定继续操作吗?",
    }
}

这样子组件就无需重复定义已有组件参数；

 （3）引入naive-ui组件内置内容是英文，如确认按钮显示confirm

        须在全局引入naive-ui的地方加上中文语言参数，我是在App.vue引入的：

        引入前：

<template>
    <AppProvider  class="provieder-class">
      <router-view></router-view>
    </AppProvider>
</template>
<script setup lang="ts">
import {RouterView} from 'vue-router'
import { AppProvider } from '@/components/Application';
</script>

效果：

引入后：

<template>
    <AppProvider  :locale="zhCN" :date-locale="dateZhCN" class="provieder-class">
      <router-view></router-view>
    </AppProvider>
</template>
<script setup lang="ts">
import {RouterView} from 'vue-router'
import { AppProvider } from '@/components/Application';
import { zhCN, dateZhCN } from "naive-ui";
</script>

效果：