526互联

TDesign——Input指定光标插入内容

发布时间 2023-06-13 17:50:05作者: 。思索

前言

setRangeText: setRangeText

在线预览:wordPackage

内容

一个很简单的Demo,细节没做处理

<template>
  <t-form>
    <!-- 标题 -->
    <t-card
      :title="
        '标题(' +
        formData.dynamic_creative_elements.title_options.length +
        '/10)'
      "
      header-bordered
      :style="{ width: '800px', margin: '20px 0 0 20px' }"
    >
      <t-form-item
        v-for="(titles, index) in formData.dynamic_creative_elements
          .title_options"
        :key="index"
        label="标题(1-30字)"
        name="title_options"
      >
        <t-input
          :id="'title_' + index"
          v-model="titles.title"
          placeholder="请输入标题"
          :maxlength="30"
          show-limit-number
        >
        </t-input>
        <t-dropdown
          :options="wordPackageOptions"
          :min-column-width="100"
          @click="handleWordsPackage($event, 1, index)"
        >
          <span>
            <t-button variant="text">
              <template #icon><wallet-icon /></template>
              插入词包
            </t-button>
          </span>
        </t-dropdown>
        <span
          v-if="formData.dynamic_creative_elements.title_options.length > 1"
          @click="handleRemoveElement(1, index)"
        >
          <t-button shape="square">
            <template #icon><remove-icon size="2em" /></template>
          </t-button>
        </span>
      </t-form-item>
      <div>
        <t-button
          block
          :disabled="
            formData.dynamic_creative_elements.title_options.length === 10
          "
          @click="handleAddElement(1)"
        >
          还可以添加{{
            10 - formData.dynamic_creative_elements.title_options.length
          }}个
        </t-button>
      </div>
    </t-card>
  </t-form>
</template>

<script setup lang="ts">
import { RemoveIcon, WalletIcon } from 'tdesign-icons-vue-next';
import { ref } from 'vue';

const formData = ref({
  dynamic_creative_elements: {
    title_options: [{ title: '' }],
    description_options: [{ description: '' }],
  },
});

const wordPackageOptions = [
  { content: '城市', value: 1, extends: '{{city}}' },
  { content: '日期', value: 2, extends: '{{day}}' },
  { content: '星期', value: 3, extends: '{{week}}' },
  // { content: '关键词', value: 4 },
];

// 处理标题元素的移除
const handleRemoveElement = (option: number, index: number) => {
  formData.value.dynamic_creative_elements.title_options.splice(index, 1);
};

// 处理标题元素添加
const handleAddElement = (option: number) => {
  formData.value.dynamic_creative_elements.title_options.push({
    title: '',
  });
};

// 处理词包插入 | NOTE 这里不考虑IE浏览器
const handleWordsPackage = (val: any, type: number, index: number) => {
  const id = `#${['title_', 'desc_'][type - 1]}${index} input`;
  const input = document.querySelector(id) as HTMLInputElement;
  input.setRangeText(val.extends);
  formData.value.dynamic_creative_elements.title_options[index].title =
    input.value;
};
</script>

<style lang="less" scoped>
:deep(.t-tab-panel) {
  margin-left: var(--td-comp-margin-xxxl);
}
.promote-label {
  margin-right: var(--td-comp-margin-xxl);
}

:deep(.t-input) {
  border: transparent;
  border-bottom: 1px solid var(--td-border-level-2-color) !important;
}

:deep(.t-card__title) {
  margin-right: var(--td-comp-margin-xs);
}

:deep(.t-icon) {
  vertical-align: sub;
}

:deep(.t-button--variant-text) {
  border-bottom: 1px solid var(--td-border-level-2-color);
  color: var(--td-text-color-secondary);
}

.sub-text {
  margin-top: 5px;
  font: var(--td-font-body-small);
  color: var(--td-text-color-placeholder);
}

:deep(.t-collapse-panel__icon--left) {
  position: relative;
  top: -26px;
}
</style>