shit mint-ui & navbar click event bug

時間 2019-11-16

標籤 shit mint navbar click event bug 简体版

原文原文鏈接

# Vue 2.0
npm install mint-ui -S

// 引入所有組件
import Vue from 'vue';
import Mint from 'mint-ui';
Vue.use(Mint);

// 按需引入部分組件
import { Cell, Checklist } from 'minu-ui';
Vue.component(Cell.name, Cell);
Vue.component(Checklist.name, Checklist);

https://github.com/ElemeFE/mint-ui/tree/master/examplecss

no click eventhtml

https://elemefe.github.io/mint-ui/#/navbarvue

https://github.com/ElemeFE/mint-ui/blob/master/example/pages/navbar.vuegit

bugs

https://github.com/ElemeFE/mint-ui/issues?utf8=%E2%9C%93&q=navbargithub

shit docs & shit demo

https://mint-ui.github.io/docs/#/en2/navbarnpm

https://github.com/ElemeFE/mint-ui/issues/501post

Q: mt-navbar 不支持動態 mt-tab-item數據，默認選中效果失效
A: item.id的類型是整形，而selected裏面的是字符串，類型不匹配ui

https://github.com/ElemeFE/mint-ui/blob/master/example/pages/navbar.vueurl

// data

{
                selected: "2",
                // selected: "1",
                // selected: 1,
}

solutions

@click.nativespa

<mt-button
        data-btn="primary-button"
        @click="btnClickHandler"
        type="primary">
        primary
    </mt-button>
    <mt-button
        data-btn="primary-button"
        @click.native="btnClickNativeHandler"
        type="primary">
        primary
    </mt-button>

// @click.native="handleClick"

     <div class="search-tabs-container" v-if="isShowSearchResult">
            <mt-navbar v-model="selected">
                <mt-tab-item
                    @click.native="handleClick"
                    id="1"
                    v-if="isShowAll">
                    所有
                </mt-tab-item>
                <mt-tab-item id="2" v-if="isShowCorp">公司</mt-tab-item>
            </mt-navbar>
            <mt-tab-container v-model="selected">
                <mt-tab-container-item
                    data-tabs="tab-01"
                    id="1"
                    v-if="isShowAll">
                    <div
                        v-for="obj in all"
                        :key="obj.title">
                        <div v-if="obj.datas.length && obj.type === 'corp'">
                            <p class="search-all-item-title-box">
                                <span class="search-all-item-title">
                                    {{obj.title}}
                                </span>
                            </p>
                            <div
                                class="search-all-item-content-box"
                                v-for="(item, i) in obj.datas"
                                :key="i">
                                <div class="search-all-item-content">
                                    <img
                                        :src="item.Logo ? item.Logo : defaultImage"
                                        alt=""
                                        srcset=""
                                        class="search-all-item-logo"
                                    />
                                    <div class="search-highlight-others-box">
                                        <span class="search-highlight-others">
                                            {{getHighlightOthers(item.Name, `prefix`)}}
                                        </span>
                                        <span class="search-highlight-keywords">
                                            {{getHighlightKeyword(item.Name)}}
                                        </span>
                                        <span class="search-highlight-others">
                                            {{getHighlightOthers(item.Name, `suffix`)}}
                                        </span>
                                    </div>
                                    <div class="search-highlight-others-box2">
                                        <span class="search-highlight-others">
                                            {{getHighlightOthers(item.BrandName, `prefix`)}}
                                        </span>
                                        <span class="search-highlight-others">
                                            {{item.BrandName ? "簡稱: " : ""}}
                                        </span>
                                        <span class="search-highlight-keywords">
                                            {{getHighlightKeyword(item.BrandName)}}
                                        </span>
                                        <span class="search-highlight-others">
                                            {{getHighlightOthers(item.BrandName, `suffix`)}}
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <p class="search-all-item-more-box">
                                <span class="search-all-item-more">查看更多</span>
                            </p>
                            <mt-button
                                data-btn="primary-button"
                                @click="btnClickHandler"
                                type="primary">
                                primary
                            </mt-button>
                            <mt-button
                                data-btn="primary-button"
                                @click.native="btnClickNativeHandler"
                                type="primary">
                                primary
                            </mt-button>
                        </div>
                        <div v-if="obj.datas.length && obj.type === 'newsinfo'">
                            <p class="search-all-item-title-box">
                                <span class="search-all-item-title">
                                    {{obj.title}}
                                </span>
                            </p>
                            <div
                                class="search-all-item-content-box"
                                v-for="(item, i) in obj.datas"
                                :key="i">
                                <div class="search-all-item-content">
                                    <span class="search-all-item-content-logo">
                                        {{item.Logo ? item.Logo : "logo url"}}
                                    </span>
                                    <span class="search-all-item-content-name">
                                        {{item.Name ? item.Name : ""}}
                                    </span>
                                    <span class="search-all-item-content-brandname">
                                        {{item.BrandName ? item.BrandName : ""}}
                                    </span>
                                </div>
                            </div>
                            <p>
                                <span class="search-all-item-more">查看更多</span>
                            </p>
                        </div>
                    </div>
                </mt-tab-container-item>
                <mt-tab-container-item id="2" v-if="isShowCorp">
                    <mt-cell v-for="n in corp" :key="n" :title="'content ' + n" />
                </mt-tab-container-item>
            </mt-tab-container>
        </div>

handleClick(value) {
        console.log(`@click.native's value = `, value);
    },
    btnClickHandler(value) {
        console.log(`@click's value = `, value);
    },
    btnClickNativeHandler(value) {
        console.log(`@click.native's value = `, value);
    },