import galleryResource from 'ehais-resource-plug/src/gallery'
import documentResource from 'ehais-resource-plug/src/document'
import audioResource from 'ehais-resource-plug/src/audio'
import videoResource from 'ehais-resource-plug/src/video'
components: { galleryResource, documentResource, videoResource, audioResource }
-
示例一
<galleryResource ref="组件名称" controller="组件类型:ueditor|image|gallery" :classify="classify" tname="article" :tid="form.articleId" @event="确定图片的事件" @remove="删除原来图片事件" :model="初始化图片的对象(image)" identity="admin(默认)|user">
-
示例二
<galleryResource ref="组件名称" controller="组件类型:ueditor|image|gallery" :classify="classify" tname="article" :tid="form.articleId" @event="确定图片的事件" @remove="删除原来图片事件" :path="初始化图片的路径(image)" identity="admin(默认)|user">
参数 | 类型 | 必填 | 描述 |
---|---|---|---|
ref | String | Y | 组件名称 |
controller | String | Y | 组件类型 :ueditor | image | gallery |
model | String | Y | controller = image时必填,参数类型为:{website:null,thumb:null,img:null,original:null} |
path | String | Y | controller = image时必填,参数类型为:URL |
identity | String | N | 默认是:admin(管理后台使用),开放网站使用user |
classify | String | Y | controller = gallery时必填 |
tid | String | Y | controller = gallery时必填 |
tname | String | Y | controller = gallery时必填 |
data(){
return {
imageModel : null, classify: null, tid: null, tname : null, path : null
}
}
<galleryResource ref="resourceUEditor" controller="ueditor" @event="onResourceUEditorEvent" identity="admin" />
<galleryResource ref="resourceImage" controller="image" @event="onResourceImageEvent" @remove="onResourceImageRemove" :model="imageModel" identity="admin" />
<galleryResource ref="resourceGaller" controller="gallery" @event="onResourceGallerEvent" @remove="onResourceGalleryRemove" :gallery="gallery" identity="admin" />
<galleryResource ref="resourceImage" controller="image" :model="imageModel" identity="admin" />
<galleryResource ref="resourceGaller" controller="gallery" :classify="classify" :tname="tname" :tid="tid" identity="admin" />
例:
<galleryResource ref="resourceGaller" controller="gallery" :classify="classify" tname="article" :tid="form.articleId" identity="admin" />
this.imageModel = Object.assign({}, this.form)
var resource = this.$refs.resourceImage.getData();
this.form.thumb = resource.thumb;
this.form.img = resource.img;
this.form.original = resource.original;
this.form.website = resource.website;
import VueUeditorWrap from 'vue-ueditor-wrap'
import { ueConfig } from 'ehais-resource-plug/src/util'
components: { VueUeditorWrap },
<VueUeditorWrap ref="vUeditor" v-model="form.content" :config="ueConfig" />
<galleryResource ref="resourceUEditor" controller="ueditor" @event="onResourceUEditorEvent"></galleryResource>
mounted () {
var that = this;
this.ueConfig = ueConfig({ resourceImageEvent: function () { that.$refs.resourceUEditor.open(); } });
},
this.$refs.resourceGaller.onGallerySave(res.model.id);
<template>
<div>
<VueUeditorWrap ref="vUeditor" v-model="content" :config="ueConfig" />
<galleryResource ref="resourceUEditor" controller="ueditor" @event="onResourceUEditorEvent" identity="admin" />
<galleryResource ref="resourceImage" controller="image" @event="onResourceImageEvent" @remove="onResourceImageRemove" :model="imageModel" identity="admin" />
<galleryResource ref="resourceGaller" controller="gallery" @event="onResourceGallerEvent" @remove="onResourceGalleryRemove" :gallery="gallery" identity="admin" />
或者
<galleryResource ref="resourceImage" controller="image" :model="imageModel" identity="admin" />
<galleryResource ref="resourceGaller" controller="gallery" :classify="classify" :tname="tname" :tid="tid" identity="admin" />
</div>
</template>
<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
import { ueConfig } from 'ehais-resource-plug/src/util'
import galleryResource from 'ehais-resource-plug/src/gallery'
import documentResource from 'ehais-resource-plug/src/document'
import videoResource from 'ehais-resource-plug/src/video'
export default {
name: 'software-product',
components: { VueUeditorWrap, galleryResource, documentResource, videoResource },
data () {
return {
ueConfig: null, content: null, controller: null, visible: false, imageModel: {}, gallery: []
}
},
mounted () {
var that = this;
this.ueConfig = ueConfig({ resourceImageEvent: function () { that.$refs.resourceUEditor.open(); } });
},
methods: {
onResourceUEditorEvent (data) {
this.$refs.vUeditor.editor.execCommand('insertHtml', "<img src='" + data.website + data.img + "'>")
},
onResourceImageEvent (data) {//对象
this.form.website = data.website;
this.form.thumb = data.thumb;
this.form.img = data.img;
this.form.original = data.original;
},
onResourceImageRemove () {
this.imageModel = null;
},
onResourceGallerEvent (data) {//数组
console.log("onResourceGallerEvent", JSON.stringify(data));
this.gallery = data;
},
onResourceGalleryRemove (index) {
this.gallery.splice(index, 1);
}
}
}
</script>
<style>
</style>
import articleCatResource from 'ehais-resource-plug/src/article-cat'
components: { articleCatResource },
<articleCatResource :classify="classify" :module="module" :image="true" :parent="true" title="分类" />
import catSelectResource from 'ehais-resource-plug/src/select/cat'
import { catData } from 'ehais-resource-plug/src/data'
components: { catSelectResource },
data () {
return {
classify: "classify", module: "module", catDataSource:[]
}
},
async mounted () {
this.catDataSource = await catData({ classify: this.classify, module: this.module });
},
<catSelectResource v-model="form.catId" :data="catDataSource" />
<a-form-model-item label="类型" help="备注信息">
<catSelectResource v-model="form.catId" :data="catDataSource" />
</a-form-model-item>
import catMasterSelectResource from 'ehais-resource-plug/src/select/cat-master'
import { catMasterData } from 'ehais-resource-plug/src/data';
components: { catMasterSelectResource },
<a-form-model-item label="隶属上级" prop="" help="">
<catMasterSelectResource v-model="form.parentUuid" :classify="classify" :module="module"/>
</a-form-model-item>
catMasterData({ classify: this.classify, module: this.module }, true)//保存成功后刷新缓存
import catMasterTreeSelectResource from 'ehais-resource-plug/src/select/cat-master-tree'
import { catMasterTreeData } from 'ehais-resource-plug/src/data';
components: { catMasterTreeSelectResource },
<a-form-model-item label="隶属上级" prop="" help="">
<catMasterTreeSelectResource v-model="form.parentUuid" :classify="classify" :module="module"/>
</a-form-model-item>
catMasterTreeData({ classify: this.classify, module: this.module }, true).then(res => {
this.dataSource = res.treeData;
})//刷新缓存并返回最新的列表数据
import catTreeSelectResource from 'ehais-resource-plug/src/select/cat-tree'
import { catTreeData } from 'ehais-resource-plug/src/data'
components: { catTreeSelectResource },
data () {
return {
classify: "classify", module: "module", catTreeDataSource:[]
}
},
async mounted () {
this.catTreeDataSource = await catTreeData({ classify: this.classify, module: this.module });
},
<catTreeSelectResource v-model="form.catId" :data="catTreeDataSource" />
<a-form-model-item label="类型" help="备注信息">
<catTreeSelectResource v-model="form.catId" :data="catTreeDataSource" />
</a-form-model-item>
- 更新本项目:git pull
- 首次安装依赖包:cnpm install
- 生成链接:npm link
- 在需要调用的项目引用:npm link ehais-resource-plug
- npm install rimraf -g
- rimraf node_modules