步骤

创建一个自定义组件需要三部

  • 第一步：创建组件定义类
  • 第二步：创建Vue组件
  • 第三部：注册Vue组件

Form字段组件

表单编辑字段自定义，需要注意表单字段的数据结构与类型

后端组件定义

在 src/components下创建一个组件定义类，格式如下，必须继承SmallRuralDog\Admin\Components\Component

建议以大写字母 F开头命名，以便于区分

  1. <?php
  4. use SmallRuralDog\Admin\Components\Component;
  5. //需要继承 Component
  6. class FMyInput extends Component
  7. {
  8.     //组件的名称，等下注册vue组件的时候名称需要一致
  9.     protected $componentName = "FMyInput";
  11.     //需要隐藏的属性，设置后不会在json中输出，这个功能由父类实现
  12.     public $hideAttrs = [];
  14.     //定义一个make，这里的$value 是你组件的默认值，类型由你来决定
  15.     public static function make($value=null)
  16.     {
  17.         return new MyInput($value);
  18.     }
  20.     //自定义字段输出值，在表单编辑时会调用这个方法获取值，如果没定义则使用默认值
  21.     public function getValue($data)
  22.     {
  23.         return $data;
  24.     }
  25. }

前段组件定义

在resources\js\components下创建vue文件，例如FMyInput.vue

  1. <template>
  2.   <!--这是属性示例用法,具体要实现什么功能，自由发挥-->
  3.   <el-input
  4.     :style="attrs.style"
  5.     :class="attrs.className"
  6.     :value="value"
  7.     @input="onChange"
  8.   >
  9.   </el-input>
  10. </template>
  11. <script>
  12.     export default {
  13.         mixins: [FormItemComponent],//混入FormItemComponent
  14.         //下面写你自己的逻辑吧
  15.     };
  17.     //拷贝下面定义好的公共代码，可以把它写到一个文件，然后引入！！
  18.     const FormItemComponent = {
  19.       data() {
  20.           return {
  21.               vm: this._.cloneDeep(this.value)
  22.           }
  23.       },
  24.       props: {
  25.           //当前值
  26.           value: {
  27.               default: null
  28.           },
  29.           formItem: Object,
  30.           //当前表单数据
  31.           formData: Object,
  32.           //当前组件属性
  33.           attrs: Object
  34.       },
  35.       model: {
  36.           prop: "value",
  37.           event: "change"
  38.       },
  39.       methods: {
  40.           onChange(value) {
  41.               this.$emit("change", value);
  42.           }
  43.       },
  44.       watch: {
  45.           value(value) {
  46.               try {
  47.                   this.vm = value;
  48.               } catch (error) {
  50.               }
  52.           }
  53.       }
  54.   }
  55. </script>

注册组件

然后在extend.js中注册组件

  1. VueAdmin.booting((Vue, router, store) => {
  2.     //....................
  3.     Vue.component("FMyInput", require('./components/FMyInput').default)
  4. });

使用组件

在代码中使用组件

  1. $form->item("field", "FMyInput")->component(FMyInput::make())

Grid字段组件

自定义表格展现组件

后端组件定义

在 src/components下创建一个组件定义类，格式如下，必须继承SmallRuralDog\Admin\Components\Component

建议以大写字母 G 开头命名，以便于区分

<?php

use SmallRuralDog\Admin\Components\Component;

class GBoole extends Component
{
    protected $componentName = "GBoole";

      //需要隐藏的属性，设置后不会在json中输出，这个功能由父类实现
    public $hideAttrs = [];

    public static function make($value = null)
    {
        return new GBoole($value);
    }

}

前段组件定义

在resources\js\components下创建vue文件GBoole.vue

<template>
  <span>
    <i class="el-icon-success status" v-if="value"></i>
    <i class="el-icon-error status" v-else></i>
  </span>
</template>
<script>
    //组件公共定义
    const GridColumnComponent = {
        props: {
            attrs: Object,
            row: Object,
            columnValue: {
                default: null
            },
            value: {
                default: null
            }
        }
    }

    export default {
          mixins: [GridColumnComponent]//混入
        //..... 你自己的代码
    };
</script>
<style lang="scss" scoped>
    .status {
      font-size: 20px;
    }
    .el-icon-success {
      color: #67c23a;
    }
    .el-icon-error {
      color: #f56c6c;
    }
</style>

注册组件

然后在extend.js中注册组件

VueAdmin.booting((Vue, router, store) => {
    //....................
    Vue.component("GBoole", require('./components/GBoole').default)
});

使用组件

$grid->column('status', "状态")->width(100)->align("center")->component(GBoole::make());

通用型组件

无父级组件传入的 attrs props，使用灵活，随处可用

后端组件定义

在 src/components下创建一个组件定义类，格式如下，必须继承SmallRuralDog\Admin\Components\Component

建议以大写字母 W 开头命名，以便于区分

<?php

use SmallRuralDog\Admin\Components\Component;

class WMarkdown extends Component
{
    protected $componentName = "WMarkdown";

      //需要隐藏的属性，设置后不会在json中输出，这个功能由父类实现
    public $hideAttrs = [];

    protected $content;


    public function __construct($content)
    {

        $this->content = $content;
    }

    public static function make($content=""){
        return new WMarkdown($content);
    }


    public function content($content)
    {
        $this->content = $content;
        return $this;
    }


}

前段组件定义

这个组件使用了mavon-editor，所以先安装一下

npm i mavon-editor

在resources\js\components下创建vue文件WMarkdown.vue

<template>
  <mavon-editor
    :style="attrs.style"
    :class="attrs.className"
    :value="attrs.content"
    :editable="false"
    :subfield="false"
    defaultOpen="preview"
    :toolbarsFlag="false"
    :boxShadow="false"
  />
</template>
<script>
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
export default {
  components: {
    MavonEditor: mavonEditor,
  },
  mixins: [BaseComponent],
  //通用组件只有一个自身的attrs
  props: {
    attrs: Object,
  },
};

//通用组件混入代码，这里实现了动态代码注入的功能，复制即刻
const BaseComponent = {
    mounted() {
        if (this.attrs && this.attrs.ref) {
            this.$bus.on(this.attrs.ref, ({ data, self }) => {
                let _this = this;
                new Function('ref', 'self', data)(_this, self)
            })
        }
        if (this.formItem && this.formItem.ref) {
            this.$bus.on(this.formItem.ref, ({ data, self }) => {
                let _this = this;
                new Function('ref', 'self', data)(_this, self)
            })
        }
    },
    destroyed() {
        if (this.attrs && this.attrs.ref) {
            this.$bus.off(this.attrs.ref);
        }
        if (this.formItem && this.formItem.ref) {
            this.$bus.off(this.formItem.ref);
        }
    },
}
</script>

注册组件

然后在extend.js中注册组件

VueAdmin.booting((Vue, router, store) => {
    //....................
    Vue.component("WMarkdown", require('./components/WMarkdown').default)
});

使用组件

<?php
public function index(Content $content){
     $content->className('p-10');
   $content->row(WMarkdown::make("markdown content"));//这里是一种使用方法，你可以在任何无需父级属性的地方使用
   return $content;
}