🖼️ Vue 组件

ThinkAdmin 提供完善的 Vue 通用组件库，支持多种常用功能的组件化开发。

🚀 主要功能

Vue 集成: 与 Vue.js 框架完美集成
通用组件: 提供多种通用 Vue 组件
图片上传: 支持图片上传组件
表单组件: 提供丰富的表单组件
数据绑定: 支持双向数据绑定
事件处理: 完善的事件处理机制

📋 组件类型

图片上传组件

UploadImage: 通用图片上传组件
双向绑定: 支持 v-model 双向数据绑定
文件类型: 支持多种图片格式
预览功能: 支持图片预览功能

表单组件

输入组件: 提供各种输入组件
选择组件: 支持下拉选择等组件
验证组件: 支持表单验证组件
自定义组件: 支持自定义组件开发

⚙️ 技术特点

Vue 特性

组件化: 基于 Vue 组件化开发
响应式: 支持响应式数据绑定
生命周期: 完整的组件生命周期
事件系统: 完善的事件处理系统

集成优势

无缝集成: 与 ThinkAdmin 无缝集成
样式兼容: 与 LayUI 样式完美兼容
功能丰富: 提供丰富的组件功能
易于使用: 简单易用的组件接口

// <upload-image v-model="item" />

// 图片上传组件
Vue.component('UploadImage', {
    data: () => ({eid: '', mclass: 'layui-show'}),
    model: {prop: 'image', event: 'change'},
    props: {
        image: {type: String, default: ''},
        showinput: {type: Boolean, default: true}
    },
    template:
        '<div class="relative">' +
        '   <input class="layui-input layui-bg-gray" :class="mclass" v-model="image" readonly :id="eid" placeholder="请上传图片">' +
        '   <a class="input-right-icon" :class="mclass" data-type="jpg,png,gif" :data-upbtn="eid"><i class="layui-icon layui-icon-upload"></i></a>' +
        '</div>',
    created() {
        if (this.showinput === false) this.mclass = 'layui-hide';
        this.eid = Math.random().toString().replace('0.', 'upimg-');
    },
    watch: {
        image() {
            this.$nextTick(() => $('#' + this.eid).trigger('change'));
        }
    },
    mounted() {
        this.$nextTick(() => {
            let $ele = $('#' + this.eid).uploadOneImage();
            $ele.on('change', e => this.$emit('change', e.target.value));
            $('[data-upbtn=' + this.eid + ']').uploadFile(src => $ele.val(src).trigger('change'));
        });
    }
});

使用示例

<!-- 在模板中使用 Vue 组件 -->
<div id="app">
    <upload-image v-model="user.avatar" :showinput="true"></upload-image>
    <button @click="saveUser">保存</button>
</div>

<script>
// 初始化 Vue 实例
var app = new Vue({
    el: '#app',
    data: {
        user: {
            avatar: '',
            name: ''
        }
    },
    methods: {
        saveUser: function() {
            // 保存用户数据
            $.post('{:url("save")}', this.user, function(res) {
                if (res.code === 1) {
                    $.msg.success(res.info);
                }
            });
        }
    }
});
</script>

自定义 Vue 组件

// 自定义表单输入组件
Vue.component('FormInput', {
    props: {
        value: {type: String, default: ''},
        placeholder: {type: String, default: '请输入'},
        type: {type: String, default: 'text'}
    },
    template: `
        <div class="layui-form-item">
            <input 
                class="layui-input" 
                :type="type"
                :value="value"
                :placeholder="placeholder"
                @input="$emit('input', $event.target.value)"
            />
        </div>
    `
});

// 使用自定义组件
Vue.component('UserForm', {
    data: () => ({
        form: {
            username: '',
            email: '',
            phone: ''
        }
    }),
    template: `
        <div>
            <form-input v-model="form.username" placeholder="请输入用户名"></form-input>
            <form-input v-model="form.email" type="email" placeholder="请输入邮箱"></form-input>
            <form-input v-model="form.phone" type="tel" placeholder="请输入手机号"></form-input>
        </div>
    `
});

与 ThinkAdmin 集成

<!-- 在 ThinkAdmin 模板中使用 Vue -->
{extend name="../../admin/view/main"}

{block name='content'}
<div id="vue-app">
    <upload-image v-model="image"></upload-image>
    <button class="layui-btn" @click="submit">提交</button>
</div>
{/block}

{block name='script'}
<script>
require(['vue'], function(Vue) {
    // 注册组件
    Vue.component('UploadImage', {
        // ... 组件代码
    });
    
    // 初始化 Vue 实例
    new Vue({
        el: '#vue-app',
        data: {
            image: ''
        },
        methods: {
            submit: function() {
                $.post('{:url("save")}', {image: this.image}, function(res) {
                    $.msg.success(res.info);
                });
            }
        }
    });
});
</script>
{/block}

后端处理 base64 图片

<?php
declare(strict_types=1);

namespace app\admin\controller;

use think\admin\Controller;
use think\admin\Storage;

/**
 * 示例控制器
 * @class Example
 * @package app\admin\controller
 */
class Example extends Controller
{
    /**
     * 保存内容（处理 base64 图片）
     * @auth true
     */
    public function save()
    {
        $content = input('content');
        
        // 抓取内容的 base64 图片并上传到云端
        $content = preg_replace_callback(
            '/"data:image\/([a-zA-Z]+);base64,(.*)"/', 
            function ($matches) {
                // 保存 base64 图片到云存储
                $result = Storage::saveImage(trim($matches[0], '"'));
                return '"' . $result['url'] . '"';
            }, 
            $content
        );
        
        // 保存处理后的内容
        // ...
        
        $this->success('保存成功');
    }
}