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. 强连通分量 与 2-SAT

    近期一直在刷这方面的题 因为没法学新知识 但又想写点什么 就水篇博文吧 引理 简单来说,在一个有向图中,若所有点之间两两互相直接可达,则将这个图成为强连通分量 强连通分量可以是某个有向图中的子图 求强 ...

  2. C# 给Word不同页面设置不同背景

    给Word文档设置背景时,通常只能针对整篇文档设置统一的背景,如果需要对某些页面单独设置背景,则需要通过另外的方式来实现.本文通过C# 程序代码演示如何来实现.并附VB.NET代码作参考. 思路:通过 ...

  3. Spark Streaming状态管理函数updateStateByKey和mapWithState

    Spark Streaming状态管理函数updateStateByKey和mapWithState 一.状态管理函数 二.mapWithState 2.1关于mapWithState 2.2mapW ...

  4. Django(静态文件or路由)

    静态文件 在开发中同创会使用到 css,js,img等静态文件,这里带大家简单的介绍一下django如何处理静态页面, 配置 setting.py文件 STATIC_URL = '/static/' ...

  5. C/C++ New与Delete （小例子）

    转自:http://blog.csdn.net/chenzujie/article/details/7011639   先来看两段小程序: 1). #include <iostream.h> ...

  6. Java泛型学习--第一篇

    还是那句话,学习某个知识一定要想想为什么要学它,这方面的知识用来解决什么问题的,怎么用,并且要总结的体系化,不能散的到处都是,方便以后查看博客. 今天参考廖雪峰老师官网学习并总结下泛型廖老师官网 1. ...

  7. AC自动机(转载)

    ac自动机学习博客 本来以为是很高级的算法 其实理解以后并不难 只是在字典树的基础上用fail数组标记一下回朔的位置 加速查找 就可以实现多模式串的匹配查找 模版如下: #include<cst ...

  8. 2018-2019 ACM-ICPC, NEERC, Southern Subregional Contest, Qualification Stage（11/12）

    2018-2019 ACM-ICPC, NEERC, Southern Subregional Contest, Qualification Stage A. Coffee Break 排序之后优先队 ...

  9. HDU - 2328 Corporate Identity（kmp+暴力）

    传送门:http://acm.hdu.edu.cn/showproblem.php?pid=2328 题意:多组输入,n==0结束.给出n个字符串,求最长公共子串,长度相等则求字典序最小. 题解:(居 ...

  10. tomacat配置虚拟主机 && 配置缺省页面

    在conf文件夹下的server.xml文件中 在c盘建立一个sina文件夹,里面建立一个mail文件夹,在mail文件夹下面建立一个1.html网页 你配置完如果直接访问http://www.sin ...