1.现象
使用ivewd form表单并且在from中添加了多个颜色选择器,最终颜色选择器在页面上显示不全
2.对比
图1-1在iview的form中使用了iview自己的颜色组件
图1-2在iview的form中使用element ui的颜色组件
3.最终选择在iview中使用element ui的颜色组件
代码:
<Form :model="form" :label-width="100" style="width:300px">
<FormItem label="节点文本">
<Input size="small" v-model="form.labelText" placeholder="节点名称"
@on-change="changeNode('labelText', form.labelText)"
></Input>
</FormItem>
<FormItem label="字体大小">
<Slider :step="1" size="small" v-model="form.fontSize" show-input
@on-change="changeNode('fontSize', form.fontSize)"
></Slider>
</FormItem>
<FormItem label="字体颜色">
//element ui
<el-color-picker v-model="form.fontFill" show-alpha @change="changeNode('fontFill', form.fontFill)"></el-color-picker>
</FormItem>
<FormItem label="节点背景颜色">
<Row>
<Col span="30">
//iview
<ColorPicker v-model="form.fill" alpha @on-change="changeNode('fill',form.fill)"/>
</Col>
</Row>
</FormItem>
<FormItem label="边框颜色">
<Row>
<Col span="22">
<ColorPicker v-model="form.stroke" alpha @on-change="changeNode('stroke',form.stroke)"/>
</Col>
</Row>
</FormItem>
</Form>
…不全换成element ui 的原因 是因为我需要使用的组件element ui没有我需要的组件.两者可以混用