<template> <el-dialog top='5px' :visible.sync="dialogVisible" width="80%" title='列样式设置' :append-to-body='true' :close-on-click-modal='false'> <el-form :inline="true" :model="formInline" class="demo-form-inline" size='mini'> <el-form-item label="字体颜色"> <el-select v-model="formInline.color" placeholder="颜色" clearable> <el-option v-for="(item,index) in colorOptions" :key='index' :label="item.label" :value='item.value'></el-option> </el-select> </el-form-item> <el-form-item label="字体大小"> <el-select v-model="formInline.fontSize" placeholder="字体大小" clearable> <el-option v-for='(item,index) in fontSizeOptions' :key='index' :label="item.label" :value='item.value'> </el-option> </el-select> </el-form-item> <el-form-item label="背景色"> <el-select v-model="formInline.background" placeholder="颜色" clearable> <el-option v-for="(item,index) in colorOptions" :key='index' :label="item.label" :value='item.value'></el-option> </el-select> </el-form-item> <el-form-item label="文本的修饰"> <el-select v-model="formInline['text-decoration']" placeholder="文本的修饰" clearable> <el-option v-for="(item,index) in textDecorationOptions" :key='index' :label="item.label" :value='item.value'></el-option> </el-select> </el-form-item> <el-form-item label="对齐方式"> <el-select v-model="formInline['text-align']" placeholder="对齐方式" clearable> <el-option v-for="(item,index) in textAlignOptions" :key='index' :label="item.label" :value='item.value'></el-option> </el-select> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button size='mini' type="primary" @click="onSubmitStyle">确定</el-button> </div> </el-dialog> </template> <script> export default { props: { formInline: { default() { return {} } }, value: Boolean }, watch: { value(val) { this.dialogVisible = val }, dialogVisible(val) { this.$emit('input', val) } }, data() { return { dialogVisible: false, fontSizeOptions: [ { value: '10px', label: '10px' }, { value: '12px', label: '12px' }, { value: '14px', label: '14px' }, { value: '16px', label: '16px' }, { value: '18px', label: '18px' }, { value: '20px', label: '20px' }, { value: '22px', label: '22px' }, { value: '24px', label: '24px' } ], colorOptions: [ { value: '#000000', label: '黑色' }, { value: '#C0C0C0', label: '银色' }, { value: '#808080', label: '灰色' }, { value: '#FFFFFF', label: '白色' }, { value: '#FF0000', label: '红色' }, { value: '#800080', label: '紫色' }, { value: '#FF00FF', label: '紫红' }, { value: '#008000', label: '绿色' }, { value: '#00FFFF', label: '浅绿' }, { value: '#00FF00', label: '亮绿' }, { value: '#808000', label: '橄榄' }, { value: '#000080', label: '深蓝' }, { value: '#0000FF', label: '蓝色' }, { value: '#008080', label: '青色' } ], textDecorationOptions: [ { value: 'line-through', label: '删除线' }, { value: 'underline', label: '下划线' }, { value: 'overline', label: '上划线' } ], textAlignOptions: [ { value: 'left', label: '左对齐' }, { value: 'right', label: '右对齐' }, { value: 'center', label: '中间' } ] } }, methods: { onSubmitStyle() { this.$emit('submit', this.formInline) } } } </script>