input & collapse & tags

input & collapse & tags

https://ant.design/components/tag-cn/

https://www.iviewui.com/components/tag

<template>
    <section>
        <div>
            <!-- <h-tag
                v-for="item in tags"
                :key="item"
                :name="item"
                :closable="false">
                标签{{ item + 1 }}
            </h-tag>
            <h-tag
                v-for="item in tags"
                :key="item"
                :name="item"
                :closable="true">
                标签{{ item + 1 }}
            </h-tag> -->
            <!-- <h-tag
                v-for="(item, index) of tags"
                :key="item"
                :name="item"
                closable
                @on-close="handleCloseTag(index)">
                标签{{ item + 1 }}
            </h-tag> -->
            <h-tag
                v-for="(item, index) of tags"
                :key="item"
                :name="item"
                closable
                @on-close="handleCloseTag">
                标签{{ item + index }}
            </h-tag>
            <!-- <h-tag
                v-for="item in tags"
                :key="item"
                :name="item"
                closable
                @on-close="handleCloseTag">
                标签{{ item + 1 }}
            </h-tag> -->
        </div>
    </section>
</template>

    /**
     *
     * @author xgqfrms
     * @copyright xgqfrms
     *
     * @created 2019.02.27
     * @modified 2019.02.27
     *
     * @description dissociation-maintenance
     * @augments AuditNewsDissociationMaintenance
     * @example
     *
     */
    import {
        TODAY,
        TODAY_Begin,
        TODAY_End,
        TODAY_TimeStamp,
    } from "./utils";
    export default {
        name: "AuditNewsDissociation-maintenance",
        data () {
            return {
                tags: [
                    "标签 a",
                    "标签 b",
                    "标签 c",
                ],
            }
        },
        methods: {
            handleCloseTag (event, name) {
                const index = this.tags.indexOf(name);
                this.tags.splice(index, 1);
            },
            // handleCloseTag (e) {
            //     console.log(`tag =`, e);
            //     console.log(`tag =`, e.target.innerText);
            // },
            // tags
        },
        mounted() {
            this.init();
            // let isGobalBindKS = window.sessionStorage.getItem(`isGobalBindKeyboardShortcuts`);
            // // isGobalBindKS === "true"
            // if (isGobalBindKS) {
            //     // only bind once
            //     console.warn(`dissociation-maintenance, KeyboardShortcuts, only need bind once!`, isGobalBindKS);
            // } else {
            //     // init bind
            //     console.info(`dissociation-maintenance, KeyboardShortcuts, bind once!`, isGobalBindKS);
            //     this.globalBindKeyboardShortcuts();
            //     window.sessionStorage.setItem(`isGobalBindKeyboardShortcuts`, true);
            // }
        },
        activated() {
            // console.log(`keep-alive 组件激活时调用`);
            if (this.isAutoRefreshTable) {
                this.onClickButton(`search`);
            } else {
                // no need!
            }
        },
    }

转载于:https://www.cnblogs.com/xgqfrms/p/10574387.html