🖼️ 前端 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'));
        });
    }
});

其他案例代码

use think\admin\Storage;

// 抓取内容的 base64 图片并上传到云端
$content = preg_replace_callback('/"data:image\/([a-zA-Z]+);base64,(.*)"/', function ($matches) {
    return '"' . Storage::saveImage(trim($matches[0], '"'))['url'] . '"';
}, $content);