Tag 标签 #

<template>
  <div>
    <Tag
      v-for="(item, index) in the.tag.css"
      :key="index"
      :named="index"
      :css="item"
      closable
      @onEvent="onTagEvent"
    >
      {{ item }}
    </Tag>
  </div>
</template>

<script>
// import { reactive } from 'vue';

export default {
  setup(props, context) {
    // 使用外挂方式引入，具体查看demo
    const $plus = window.$plus;
    const reactive = $plus.vue.reactive;

    const the = reactive({
      tag: {
        key: '',
        css: ['default', 'info', 'primary', 'success', 'error', 'warning'],
      },
    });

    /** 标签事件 */
    const onTagEvent = (resp) => {
      switch (resp.cmd) {
        case 'close':
          // 关闭
          the.tag.css.splice(parseInt(resp.named), 1);
          break;
        case 'click':
          $plus.message.info(resp.event.target.innerHTML + ':' + resp.named);
          // console.log('onTagEvent:', resp.named, resp.event.target.innerHTML);
          // $plus.router.push('/Api/ClassTree/' + resp.named + '?title=' + resp.event.target.innerHTML)
          break;
        default:
          console.log('onTagEvent:', resp);
          break;
      }
    };
    return { the, onTagEvent };
  },
};
</script>