qjkankan_v1.1.1/packages/qjkankan-editor/src/views/material/popup/rename.vue

<template>
  <popup>
    <div class="ui-message ui-message-confirm" style="width: 400px">
      <div class="ui-message-header">
        <span>{{$i18n.t(`material.components.rename_material`)}}</span>
        <span @click="$emit('close')">
          <i class="iconfont icon_close"></i>
        </span>
      </div>
      <input class="ui-input" type="text" maxlength="50" :placeholder="$i18n.t(`edit_settings.please_input`)" @input="emojistr" v-model="key" />
      <div class="ui-message-footer">
        <div class="btn">
          <button @click="$emit('close')" class="ui-button ui-button-rect cancel">
            {{$i18n.t(`gather.cancel`)}}
          </button>
          <button @click="emitname" class="ui-button ui-button-rect submit" :class="{disable:!key}">
            {{$i18n.t(`gather.comfirm`)}}
          </button>
        </div>
      </div>
    </div>
  </popup>
</template>

<script>
import Popup from "@/components/shared/popup";

export default {
  props: ['item'],
  components: {
    Popup
  },
  watch: {
    show() {
      this.key = this.item.name
    }
  },
  data() {
    return {
      key: this.item.name
    }
  },
  methods: {
    emojistr() {
      this.key = this.key.replace(/(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f])|(\ud83d[\ude80-\udeff])/g, function (char) {
        if (char.length === 2) {
          return ""
        } else {
          return char;
        }
      });
    },
    emitname() {
      if (!this.key.trim()) {
        return this.$alert({ content: "请输入名字" });
      }
      this.$emit('rename', this.key)
    }
  }
}
</script>

<style lang="less" scoped>
.ui-message-confirm {
  width: 400px;
  height: 230px;

  .ui-message-header {
    .icon_close {
      color: #969799;
    }
  }

  .ui-input {
    margin: 40px 0;
    height: 36px;
    color: #323233;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid #EBEDF0;

    &:focus {
      border: 1px solid @color;
    }
  }

  .ui-message-footer {
    width: 100%;

    .btn {
      display: flex;
      justify-content: flex-end;

      .ui-button {
        max-width: 104px
      }
    }

  }
}
</style>

<style lang="less" scoped>
@import '../style.less';
</style>