qjkankan_v1.1.1/packages/qjkankan-editor/src/views/base/Toolbar.vue

<template>
  <!-- 编辑器-基础-中间部分 -->
  <div class="app-view-toolbar app-view-full-toolbar">
    <div class="main">
      <div class="ui-title-big">基础设置</div>
      <div class="upload-con">
        <div class="uc-l">
          <div class="preview">
            <img :src="info.icon || require('@/assets/images/default/img_cover_default_2.png')" alt="" />
            <button class="ui-button submit setting-cover-btn" @click="onClickSettingCover">设置封面</button>
          </div>
          <div class="ui-remark">512*512px，支持jpg/png格式</div>
        </div>
        <div class="uc-r">
          <div class="ui-title">
            <span class="">标题</span>
          </div>
          <div class="title-input-wrapper">
            <input
              v-model.trim="info.name"
              @input="emojistr" 
              @keydown.enter="onTitleInputEnter"
              type="text"
              autocomplete="new-password"
              maxlength="50"
              placeholder="请输入作品标题"
            />
            <span class="count">{{titleLength}}/50</span>
          </div>
          <div class="ui-title jianjie"><span>简介</span></div>
          <div class="jianjie-textarea-wrapper">
            <!-- <textarea
              v-model.trim="info.description"
              maxlength="500"
              placeholder="请输入作品简介"
              type="text"
            /> -->

            <editor ref="editor" :html="info.description" :placeholder="'请输入文字内容，限500字'" :maxlength="500" @change="onEditorChange"></editor>

            <span class="count">{{jianjieLength}}/500</span>
          </div>
        </div>
      </div>
      <menu>
        <li
          v-for="(item) in tabs"
          :key="item"
          :class="{active: activeTab === item}"
          @click="activeTab = item"
        >
          {{item}}
        </li>
      </menu>
      <div class="settings-view-wrapper">
        <OpeningTipSettings v-show="activeTab === '开场提示'"></OpeningTipSettings>
        <OpeningAnimationSettings v-show="activeTab === '开场动画'"></OpeningAnimationSettings>
        <PasswordSettings v-show="activeTab === '访问密码'"></PasswordSettings>
        <AutoCruiseSettings v-show="activeTab === '自动巡游'"></AutoCruiseSettings>
        <BackgroundMusicSettings v-show="activeTab === '背景音乐'"></BackgroundMusicSettings>
        <CustomLogoSettings v-show="activeTab === '自定义LOGO'"></CustomLogoSettings>
        <CustomMaskSettings v-show="activeTab === '自定义遮罩'"></CustomMaskSettings>
        <CustomButtonSettings v-show="activeTab === '自定义按钮'"></CustomButtonSettings>
      </div>
    </div>

    <div class="dialog" style="z-index: 2000" v-if="isShowSettingCoverWindow">
      <MaterialSelectorForEditor
        :selectableType="['image', 'pano', '3D']"
        title="选择素材"
        @cancle="isShowSettingCoverWindow = false"
        @submit="onCoverSelected"
      />
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import MaterialSelectorForEditor from "@/components/materialSelectorForEditor.vue";
import OpeningTipSettings from '@/views/base/openingTipSettings.vue'
import OpeningAnimationSettings from '@/views/base/openingAnimationSettings.vue'
import PasswordSettings from "@/views/base/passwordSettings.vue";
import AutoCruiseSettings from '@/views/base/autoCruiseSettings.vue'
import BackgroundMusicSettings from "@/views/base/backgroundMusicSettings.vue";
import CustomLogoSettings from "@/views/base/customLogoSettings.vue";
import CustomMaskSettings from "@/views/base/customMaskSettings.vue";
import CustomButtonSettings from "@/views/base/customButtonSettings.vue";
import Editor from "@/components/shared/Editor"

export default {
  components: {
    Editor,
    MaterialSelectorForEditor,
    OpeningTipSettings,
    OpeningAnimationSettings,
    PasswordSettings,
    AutoCruiseSettings,
    BackgroundMusicSettings,
    CustomLogoSettings,
    CustomMaskSettings,
    CustomButtonSettings,
  },
  data() {
    return {
      isShowSettingCoverWindow: false,
      tabs: [
        '开场提示',
        '开场动画',
        '访问密码',
        '自动巡游',
        '背景音乐',
        '自定义LOGO',
        '自定义遮罩',
        '自定义按钮',
      ],
      activeTab: '开场提示',
      jianjieLength:0
    }
  },
  computed: {
    ...mapGetters({
      info: 'info'
    }),
    titleLength() {
      return this.info.name.length || '0'
    }
  },
  mounted() {
  },
  watch: {
  },
  methods: {
    emojistr() {
      this.info.name = this.info.name.replace(/(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f])|(\ud83d[\ude80-\udeff])/g, function (char) {
        if (char.length === 2) {
          return ""
        } else {
          return char;
        }
      });
    },
    onEditorChange(content){
      console.log(content);
      this.info.description = content.html
      this.jianjieLength = content.size
    },
    onClickSettingCover() {
      this.isShowSettingCoverWindow = true
    },
    onCoverSelected(selected) {
      if (selected[0].materialType === 'image') {
        this.info.icon = selected[0].icon
      } else if (selected[0].materialType === 'pano') {
        this.info.icon = selected[0].icon
      } else if (selected[0].materialType === '3D') {
        this.info.icon = selected[0].thumb
      }
      this.isShowSettingCoverWindow = false
    },
    onTitleInputEnter(e) {
      e.target.blur()
    },
  },
}
</script>

<style lang="less" scoped>
.main {
  position: fixed;
  width: 930px;
  top: 90px;
  left: calc(50% - (930px) / 2);
}

.upload-con {
  display: flex;
  margin-bottom: 30px;
  .uc-l {
    .preview {
      overflow: hidden;
      position: relative;
      border: 1px solid #404040;
      img {
        height: 100%;
      }
      .setting-cover-btn {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 16px;
      }
    }
    .ui-remark{
      margin-top: 16px;
    }
  }
  .uc-r {
    width: 100%;
    max-width: 660px;
    > .title-input-wrapper {
      position: relative;
      border: 1px solid rgba(151, 151, 151, 0.2);
      padding: 0 16px;
      background: #252526;
      border-radius: 2px;
      height: 36px;
      width: 100%;
      &:focus-within {
        border-color: #0076F6;
      }
      > input {
        border: none;
        background: transparent;
        outline: none;
        height: 100%;
        width: calc(100% - 50px);
        padding: 0;
        color: #fff;
        letter-spacing: 1px;
        font-size: 14px;
      }
      > .count {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 16px;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.2);
      }
    }
    > .jianjie {
      margin-top: 20px;
    }
    > .jianjie-textarea-wrapper {
      position: relative;
      border: 1px solid rgba(151, 151, 151, 0.2);
      background: #252526;
      border-radius: 2px;
      height: 123px;
      width: 100%;
      &:focus-within {
        border-color: #0076F6;
      }
      > textarea {
        padding: 9px 16px 30px 16px;
        resize: none;
        border: none;
        background: transparent;
        outline: none;
        width: 100%;
        height: calc(100% - 30px);
        color: #fff;
        letter-spacing: 1px;
        font-size: 14px;
      }
      > .count {
        position: absolute;
        right: 16px;
        bottom: 9px;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.2);
      }
    }
  }
}

menu {
  display: inline-block;
  width: 133px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  padding-left: 0;
  margin: 0;
  vertical-align: top;
  li {
    display: block;
    height: 47px;
    padding-left: 16px;
    cursor: pointer;
    &::after {
      content: "";
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }
    &.active {
      font-size: 16px;
      font-weight: bold;
      color: #FFFFFF;
      background: #252526;
      &::before {
        content: "";
        display: inline-block;
        width: 2px;
        height: 10px;
        border-radius: 1px;
        background: #0076F6;
        margin-right: 4px;
        vertical-align: middle;
      }
    }
  }
}

.settings-view-wrapper {
  vertical-align: top;
  display: inline-block;
  width: 797px;

}
</style>