CustomHeader.vue

<script setup lang="ts">
import { ref } from 'vue';
import { useQuasar } from 'quasar';
import emitter from '../../eventbus';
import ICONS from 'src/config/icons';
const props = defineProps<{
  params: any;
}>();

const $q = useQuasar();

const prompt = ref(false);
const msg = ref(null);

function delCol() {
  const msg = `确定<strong>删除</strong>当前列<span class="text-red text-weight-bold">${props.params.displayName}</span>？`;

  $q.dialog({
    title: '<i class="bi bi-exclamation-circle text-warning"></i>&nbsp;提示',
    message: msg,
    cancel: true,
    persistent: true,
    html: true,
  }).onOk(() => {
    emitter.emit('delCol', props.params);
  });
}

function onDblclick() {
  const data = props.params.column;
  if (data.instanceId === 0 || data.colId === 'del') return;
  msg.value = props.params.displayName;
  prompt.value = true;
}

function oncancel() {
  onreset();
}

function onok() {
  const params = {
    data: props.params,
    value: msg.value,
  };
  emitter.emit('upDataHeader', params);
  onreset();
}

function onreset() {
  prompt.value = false;
  msg.value = null;
}
</script>

<template>
  <div class="ag-grid-head-cell">
    <q-btn
      flat
      round
      :icon="ICONS.delete"
      size="11px"
      v-if="
        props.params.column.instanceId !== 0 &&
        props.params.column.colId !== 'del'
      "
      @click="delCol"
    />
    <div @dblclick="onDblclick">{{ props.params.displayName }}</div>
  </div>

  <q-dialog v-model="prompt" persistent>
    <q-card style="min-width: 350px">
      <q-card-section class="q-mt-lg">
        <q-input dense v-model="msg" autofocus @keyup.enter="onok" />
      </q-card-section>

      <q-card-actions align="right" class="text-primary">
        <q-btn label="取消" flat @click="oncancel" size="11px" />
        <q-btn
          label="确定"
          unelevated
          color="primary"
          @click="onok"
          size="11px"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<style lang="scss">
.ag-grid-head-cell {
  width: 100%;
  height: 100%;
  //   border: 1px solid red;
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>