<style lang="less" scoped>
@import "./index.less";
</style>
<template>
  <div :class="wrapClass" :style="wrapStyle">
    <div v-if="showPlaceholde && content === ''">
      <p>点此编辑『富文本』内容 ——&gt;</p>
      <p>
        你可以对文字进行<strong>加粗</strong>、<em>斜体</em>、<span style="text-decoration: underline;">下划线</span>、<span style="text-decoration: line-through;">删除线</span>、
        文字<span style="color: rgb(0, 176, 240);">颜色</span>、<span style="background-color: rgb(255, 192, 0); color: rgb(255, 255, 255);">背景色</span>、以及字号<span style="font-size: 20px;">大</span><span style="font-size: 14px;">小</span>等简单排版操作。
      </p>
      <p>还可以在这里加入表格了</p><table><tbody><tr><td width="93" valign="top" style="word-break: break-all;">排名</td><td width="93" valign="top" style="word-break: break-all;">用户</td><td width="93" valign="top" style="word-break: break-all;">成绩</td></tr><tr><td width="93" valign="top" style="word-break: break-all;">1</td><td width="93" valign="top" style="word-break: break-all;">小明</td><td width="93" valign="top" style="word-break: break-all;"><em><span style="color: rgb(255, 0, 0);">99</span></em></td></tr><tr><td width="93" valign="top" style="word-break: break-all;">2</td><td width="93" valign="top" style="word-break: break-all;">小红</td><td width="93" valign="top" style="word-break: break-all;"><a href="javascript: void(0);" target="_blank">88</a></td></tr></tbody></table><p style="text-align: left;"><span style="text-align: left;">也可在这里插入图片、并对图片加上超级链接，方便用户点击。</span></p>
    </div>
    <div v-else v-html="content" />
  </div>
</template>
<script>
export default {
  name: 'rich-text',
  /**
   * 组件的属性列表
   */
  props: {
    /**
     * 是否在没有内容时显示占位图（注：目前在微页面的编辑时用到判断）
     */
    showPlaceholde: {
      type: Boolean,
      default: false
    },
    /**
     * 内容
     */
    content: {
      type: String,
      default: ''
    },
    /**
     * 是否全屏
     */
    fullScreen: {
      type: Boolean,
      default: false
    },
    /**
     * 背景颜色
     */
    backgroundColor: {
      type: String,
      default: '#ffffff'
    }
  },
  coumputed: {
  },
  /**
   * 组件的初始数据
   */
  data () {
    return {

    };
  },
  computed: {
    /**
     * 包装class
     */
    wrapClass () {
      let wrapClass = ' richtext ';
      if (this.fullScreen) {
        wrapClass += 'richtext--fullscreen ';
      }
      return wrapClass;
    },
    wrapStyle () {
      const style = `background-color:${this.backgroundColor}`;
      return style;
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
};
</script>
