shit mint-ui & navbar click event bug All In One

shit mint-ui & navbar click event bug All In One

# 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/example

---

navbar

no click event

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

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

bugs

https://github.com/ElemeFE/mint-ui/issues?utf8=✓&q=navbar

shit docs & shit demo

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

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

Q: mt-navbar 不支持 动态 mt-tab-item数据，默认选中效果失效
A: item.id的类型是整形，而selected里面的是字符串，类型不匹配

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

// data

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

solutions

@click.native

    <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);
    },

vue & css & @component-namespace

button

https://github.com/ElemeFE/mint-ui/blob/master/example/pages/button.vue

https://github.com/ElemeFE/mint-ui/issues/179

CSS Modules & BEM

https://github.com/kezzbracey/postcss-bem

https://github.com/ElemeFE/postcss-salad

refs

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---