shit mint-ui & 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/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

xgqfrms 2012-2020

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

shit mint-ui & navbar click event bug的更多相关文章

  1. svg click event bug & css pointer-events

    svg click event bug & css pointer-events svg click event not working Error OK ??? css class /* d ...

  2. vue mint ui 手册文档对于墙的恐惧

    http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm ...

  3. vue mint ui 手册文档

    npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本 ...

  4. 基于VUE.JS的移动端框架Mint UI

    Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...

  5. Atitit vod click event design flow  视频点播系统点击事件文档

    Atitit vod click event design flow  视频点播系统点击事件文档 重构规划1 Click cate1 Click  mov4 重构规划 事件注册,与事件分发管理器分开 ...

  6. Mint UI文档

    Mint UI文档:http://elemefe.github.io/mint-ui/#/ 一.Mint UI的安装和基本用法. 1.NPM :npm i mint-ui -S 建议使用npm进行安装 ...

  7. vue stop event bug

    vue stop event bug [Vue warn]: Error in v-on handler: "TypeError: e.prevntDefault is not a func ...

  8. js trigger click event & dispatchEvent & svg element

    js trigger click event & dispatchEvent & svg element but svg element not support trigger cli ...

  9. nodejs phantom add click event

    page.evaluate( function() { // find element to send click to var element = document.querySelector( ' ...

随机推荐

  1. 《Effective C#》之减少装箱和拆箱

    <Effective C#>之减少装箱和拆箱_天极网 http://dev.yesky.com/msdn/359/3486359.shtml <Effective C#>之减少 ...

  2. WPF Selector、SelectIndex、SelectedValue、SelectedValuePath、SelectedItem这几兄弟你分的清楚嘛？

    Selector Selector是一个抽象类,继承ItemsControl类(包含任何类型的对象(例如字符串,图像或面板)的集合),而本文的4个兄弟都是Selector类下的4个属性. Select ...

  3. LOJ10163 Amount of Degrees

    题目描述 求给定区间 [X,Y] 中满足下列条件的整数个数:这个数恰好等于 KK 个互不相等的 BB 的整数次幂之和.例如,设 X=15,Y=20,K=2,B=2,则有且仅有下列三个数满足题意 输入格 ...

  4. 利用Javascript制作网页特效（其他常见特效）

    设置为首页和加入收藏夹 ①:在body标签内输入以下代码: <a onclick="this.style.behavior='url(#default#homepage)'; this ...

  5. Spark练习之wordcount，基于排序机制的wordcount

    Spark练习之wordcount 一.原理及其剖析 二.pom.xml 三.使用Java进行spark的wordcount练习 四.使用scala进行spark的wordcount练习 五.基于排序 ...

  6. jquery的ajax提交时加载处理方法

    1.定义全局的,就是所有的ajax的请求的加载都会出现相同的提示 $(function(){ //加载成功显示的状态 $("#showLoading").ajaxSuccess(f ...

  7. DEDECMS：安装百度UEDITOR编辑器

    第一步:下载相对应编辑器的版本 首先,去百度搜索"百度ueditor编辑器",然后点击进入官网,找到下载页面.找到我们想要的编辑器的版本,看自己网站的编码是UTF-8还是GBK,下 ...

  8. Flink-v1.12官方网站翻译-P028-Custom Serialization for Managed State

    管理状态的自定义序列化 本页面的目标是为需要使用自定义状态序列化的用户提供指导,涵盖了如何提供自定义状态序列化器,以及实现允许状态模式演化的序列化器的指南和最佳实践. 如果你只是简单地使用Flink自 ...

  9. S - Layout （最短路&&差分约束）

    Like everyone else, cows like to stand close to their friends when queuing for feed. FJ has N (2 < ...

  10. codeforces632D. Longest Subsequence (最小公倍数)

    You are given array a with n elements and the number m. Consider some subsequence of a and the value ...