建设中...,关于AttributeSelector的用法先列出源代码,后续要继续完善:
AttributeSelector.vue
props | 示例图 |
---|
# 属性选择器 AttributeSelector
v-model: (__必填__)目标类的属性名,string类型 - className: - 类型:string - __必填__ - 说明:目标类的类名。通常使用`this.targetClass` 或者已绑定的类名
<AttributeSelector :class-name="'foobar'" v-model="args.attr1"></AttributeSelector>
| Image Modified |
- dataTypes: - 类型: Array - 说明:允许的数据类型,用于缩小选择范围。提前设定。 - 默认值:允许所有类型
<AttributeSelector :class-name="'foobar'" :data-types="['String', 'Integer']" v-model="args.attr2"></AttributeSelector>
|
|
示例: 代码块 |
---|
| <!--- 在template的editbox中使用 ---->
<ClassNameSelector v-model="args.classNameForAttr3"></ClassNameSelector>
<AttributeSelector :class-name="args.classNameForAttr3" v-model="args.attr3"></AttributeSelector>
<script>
export default {
data () {
return {
args: {
classNameForAttr3: '',
attr3: ''
}
}
}
}
</script> |
|
|
ClassNameSelector:
props | 示例图 |
---|
# 类选择器 ClassNameSelector
用于选择一个实体类或者关系类。返回选定类的类名(可能需要进一步判断是否为关联类)
v-model: (__必填__)目标类的属性名,string类型 <ClassNameSelector v-model="args.clsname1"/> | Image Modified |
示例: 提供一个带有标题的类选择器,用于选择一个类,选定的类名保存为组件的'args.clsname1'。标题名叫"目标类" 代码块 |
---|
|
<!--- 在template的editbox中使用 ----->
<div>
<p>目标类</p>
<ClassNameSelector v-model="args.clsname1"/>
</div>
|
|
|
ImageSelector
props | 示例图 |
---|
# 图片选择器 ImageSelector
用于选择一个上传的图片,或网络图片 props: - value - 类型:object - __必填__ - 说明:用于存储选定图片信息的对象。要求带有以下两个属性: - imgOrigin: 使用图片库还是自定义图片。字符串值,取值有两个: + `imgBase`:使用图片库 + `imgSelf`:使用自定义图片 (?) - back_picture:图片地址。oid值或者url(?)
实际使用时,可以将以上两个属性初始化为空字符串('') | Image Added |
示例: 代码块 |
---|
| <ImageSelector v-model="args.imageData"></ImageSelector>
<script>
export default {
data () {
return {
args: {
imageData: {imgOrigin: 'imgBase', back_picture: ''}
}
}
}
}
</script> |
| 使用图片库时 Image Added |
ColorSelector
props |
|
---|
# 颜色选择器 ColorSelector
用于选择一个颜色值,可以通过开关控制是否带有透明度
v-model: (__必填__)颜色值,是一个字符串,开启alpha时为"rgb(x, y, z, a)", 否则为 #rrggbb - alpha 类型:Boolean 说明:是否支持透明度选择 默认值:false
| Image Added |
示例:- 提供一个颜色选择器,用于选择一个颜色。颜色值保存为组件的'args.color' 代码块 |
---|
|
<!-- 使用选中图片作为div的背景 -->
<div :style="{'backgroundColor': args.color}" style="width: 500px; height: 400px;"></div>
<!-- Editbox中 -->
<ColorSelector v-model="args.color"></ColorSelector>
|
|
|