|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<el-dialog
|
|
|
custom-class="full-text-settings"
|
|
|
- width="400px"
|
|
|
+ width="470px"
|
|
|
:close-on-click-modal="false"
|
|
|
:visible="visible"
|
|
|
:before-close="handleClose"
|
|
|
@@ -20,22 +20,37 @@
|
|
|
<el-select v-model="unified_attrib.font" placeholder="请选择字体">
|
|
|
<el-option v-for="{ label, value } in fontList" :key="value" :label="label" :value="value" />
|
|
|
</el-select>
|
|
|
+ <el-button type="primary" class="row-button" @click="applySingleAttrToSelectedComponents('font')">
|
|
|
+ 应用选中组件
|
|
|
+ </el-button>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="字号">
|
|
|
<el-select v-model="unified_attrib.font_size" placeholder="请选择字号">
|
|
|
<el-option v-for="size in fontSizeList" :key="size" :label="size" :value="size" />
|
|
|
</el-select>
|
|
|
+ <el-button type="primary" class="row-button" @click="applySingleAttrToSelectedComponents('font_size')">
|
|
|
+ 应用选中组件
|
|
|
+ </el-button>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="拼音字号">
|
|
|
<el-select v-model="unified_attrib.pinyin_size" placeholder="请选择拼音字号">
|
|
|
<el-option v-for="size in fontSizeList" :key="size" :label="size" :value="size" />
|
|
|
</el-select>
|
|
|
+ <el-button type="primary" class="row-button" @click="applySingleAttrToSelectedComponents('pinyin_size')">
|
|
|
+ 应用选中组件
|
|
|
+ </el-button>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="行距">
|
|
|
<el-input-number v-model="unified_attrib.line_height" :min="0" :max="20" :step="0.1" />
|
|
|
+ <el-button type="primary" class="row-button" @click="applySingleAttrToSelectedComponents('line_height')">
|
|
|
+ 应用选中组件
|
|
|
+ </el-button>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="文字颜色">
|
|
|
<el-color-picker v-model="unified_attrib.text_color" />
|
|
|
+ <el-button type="primary" class="row-button" @click="applySingleAttrToSelectedComponents('text_color')">
|
|
|
+ 应用选中组件
|
|
|
+ </el-button>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="对齐方式">
|
|
|
<el-select v-model="unified_attrib.align" placeholder="请选择对齐方式">
|
|
|
@@ -43,9 +58,15 @@
|
|
|
<el-option label="居中" value="MIDDLE" />
|
|
|
<el-option label="右对齐" value="RIGHT" />
|
|
|
</el-select>
|
|
|
+ <el-button type="primary" class="row-button" @click="applySingleAttrToSelectedComponents('align')">
|
|
|
+ 应用选中组件
|
|
|
+ </el-button>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="拼音">
|
|
|
<el-switch v-model="unified_attrib.view_pinyin" active-value="true" inactive-value="false" />
|
|
|
+ <el-button type="primary" class="row-button" @click="applySingleAttrToSelectedComponents('view_pinyin')">
|
|
|
+ 应用选中组件
|
|
|
+ </el-button>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="拼音位置">
|
|
|
<el-radio-group v-model="unified_attrib.pinyin_position" :disabled="!isEnable(unified_attrib.view_pinyin)">
|
|
|
@@ -53,6 +74,14 @@
|
|
|
{{ label }}
|
|
|
</el-radio>
|
|
|
</el-radio-group>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ class="row-button"
|
|
|
+ :disabled="!isEnable(unified_attrib.view_pinyin)"
|
|
|
+ @click="applySingleAttrToSelectedComponents('pinyin_position')"
|
|
|
+ >
|
|
|
+ 应用选中组件
|
|
|
+ </el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
|
|
|
@@ -137,6 +166,14 @@ export default {
|
|
|
this.$emit('update:visible', false);
|
|
|
this.$emit('applyToSelectedComponents', this.unified_attrib);
|
|
|
},
|
|
|
+ /**
|
|
|
+ * 仅应用单个属性到选中组件
|
|
|
+ * @param {String} attr - 属性名
|
|
|
+ */
|
|
|
+ applySingleAttrToSelectedComponents(attr) {
|
|
|
+ this.$emit('update:visible', false);
|
|
|
+ this.$emit('applySingleAttrToSelectedComponents', { attr, value: this.unified_attrib[attr] });
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -155,6 +192,19 @@ export default {
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ :deep .el-form-item__content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ > :first-child {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .row-button {
|
|
|
+ margin-left: 12px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|