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. HTTPS学习（一）：准备知识

    div.example { background-color: rgba(229, 236, 243, 1); color: rgba(0, 0, 0, 1); padding: 0.5em; mar ...

  2. 进程通信类型 管道是Linux支持的最初Unix IPC形式之一 命名管道 匿名管道

    管道 Linux环境进程间通信(一) https://www.ibm.com/developerworks/cn/linux/l-ipc/part1/index.html 管道及有名管道 郑彦兴200 ...

  3. Linux 文件搜索神器 find 实战详解，建议收藏！

    大家好,我是肖邦,这是我的第 10 篇原创文章. 在 Linux 系统使用中,作为一个管理员,我希望能查找系统中所有的大小超过 200M 文件,查看近 7 天系统中哪些文件被修改过,找出所有子目录中的 ...

  4. Kepware软件基本操作及使用Java Utgard实现OPC通信

    一.环境搭建(基于win10 64位专业版) 1.Kepware 的下载.安装及使用 https://www.cnblogs.com/ioufev/p/9366877.html 2.重要:OPC 和 ...

  5. Spring框架——JDBC方式搭建项目

    学习Spring框架,使用JDBC的方式配置方式搭建一个项目,进行项目总结. 首先,采用MVC设计模式思想,搭建项目目录. 然后各个目录文件下面的相关源码附上: controller目录: impor ...

  6. CAS客户端和服务器配置https证书

    关于如何生成https证书可以看这篇文章: java生成Https证书,及证书导入的步骤和过程 下面整理cas如何整合https: cas服务器端部署(TLS[https]) 1.生成证书: 参照ja ...

  7. oracle根据日期计算星期几

    工作中用到的,在存储过程中的语句,简单记下: /** 判断输入日期是星期几 */ select decode(to_char(to_date(iv_date,'yyyy-mm-dd'), 'day') ...

  8. cartographer环境建立以及建图测试（详细级）

  9. WebApi Swagger 接口多版本控制 适用于APP接口管理

    最近研究了下swagger多版本的维护,网上的文章千篇一律,无法满足我的需求,分享下我的使用场景以及实现 演示环境:Visual Studio 2019.Asp.NET WebAPI.NET Fram ...

  10. Educational Codeforces Round 94 (Rated for Div. 2)【ABCD】

    比赛链接:https://codeforces.com/contest/1400 A. String Similarity 题意 给出一个长 $2n-1$ 的二进制串 $s$,构造一个长 $n$ 的字 ...