GCLS_Page_Book_Component_NPC/src/components/Adult/common/SegwordConfig.vue

<!--  -->
<template>
  <div class="seg-word-config">
    <el-table :data="data" border style="width: 75%">
      <el-table-column prop="chs" label="词" width="120"> </el-table-column>
      <el-table-column label="拼音" width="220">
        <template slot-scope="scope">
          <div class="adult-book-input-item">
            <el-input
              size="small"
              v-model="scope.row.pinyin"
              placeholder="请输入拼音"
              @blur="onBlur(scope.row, 'pinyin')"
              style="margin-right: 10px"
            ></el-input>
            <el-button size="small" @click="_createWordPinyin(scope.row)"
              >生成拼音</el-button
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column label="配置">
        <template slot-scope="scope">
          <div class="adult-book-input-item">
            <span class="adult-book-lable">字的大小:</span>
            <el-radio-group v-model="scope.row.fontSize">
              <el-radio label="12px">12px</el-radio>
              <el-radio label="16px">16px</el-radio>
              <el-radio label="20px">20px</el-radio>
              <el-radio label="24px">24px</el-radio>
              <el-radio label="28px">28px</el-radio>
            </el-radio-group>
          </div>
          <div class="adult-book-input-item">
            <span class="adult-book-lable">字的颜色:</span>
            <el-radio-group v-model="scope.row.fontColor">
              <el-radio
                v-for="(item, index) in colorList"
                :key="'colorList' + index"
                :label="item.value"
              >
                <span
                  :style="{
                    backgroundColor: item.value == 'sub' ? '' : item.value,
                  }"
                  :class="item.value != 'sub' ? 'colorItem' : ''"
                  >{{ item.value == "sub" ? "书的辅助色" : "" }}</span
                >
              </el-radio>
            </el-radio-group>
          </div>
          <div class="adult-book-input-item">
            <span class="adult-book-lable">字体:</span>
            <el-radio-group v-model="scope.row.fontFamily">
              <el-radio
                v-for="(item, index) in fontFamilyList"
                :key="'fontFamilyList' + index"
                :label="item.value"
              >
                <span>{{ item.name }}</span>
              </el-radio>
            </el-radio-group>
          </div>
          <div class="adult-book-input-item">
            <span class="adult-book-lable">设置下划线:</span>
            <el-checkbox v-model="scope.row.underLine">显示下划线</el-checkbox>
          </div>
          <div class="adult-book-input-item">
            <span class="adult-book-lable">设置间距:</span>
            <el-checkbox-group v-model="scope.row.wordPadding">
              <el-checkbox
                v-for="(item, index) in paddingList"
                :key="'colorList' + index"
                :label="item.value"
              >
                {{ item.name }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import "@/utils/pinyin_dict_withtone";
import "@/utils/pinyinUtil";
export default {
  components: {},
  props: ["data"],
  data() {
    return {
      colorList: [
        {
          value: "#000",
          name: "黑色",
        },
        {
          value: "sub",
          name: "主题色",
        },
      ],
      paddingList: [
        {
          value: "left",
          name: "要左边距",
        },
        {
          vaule: "right",
          name: "要右边距",
        },
      ],
      fontFamilyList: [
        {
          value: "FZJCGFKTK",
          name: "使用中文字体",
        },
        {
          value: "Sans-GBNPC",
          name: "使用拼音字体",
        },
        {
          value: "robot",
          name: "使用英文字体",
        },
      ],
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    onBlur(item, field) {
      item[field] = item[field] ? item[field].trim() : "";
    },
    _createWordPinyin(item) {
      let result = pinyinUtil.getPinyin(item.chs);
      item.pinyin = result;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.adult-book-input-item {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 10px;
}
.adult-book-lable {
  width: 80px;
  font-size: 14px;
  display: block;
  text-align: right;
  margin-right: 8px;

  font-weight: bold;
  &-bottom {
    margin-bottom: 10px;
    display: block;
  }
}
.el-radio-group {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  margin-top: 5px;
}
.el-radio {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 6px;
}
.colorItem {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  display: block;
}
</style>