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. java-数据类型复习

    java中共有8种基本的数据类型,分别为 字节型byte(8字节,32位),短整型short(16字节),整型int(32字节),长整型long(64字节), 字符型char(16字节),浮点型flo ...

  2. VMware vSphere (EXSI) 安装使用

    VMware vSphere 镜像下载 VMware vSphere Hypervisor (ESXi) 6.7 https://my.vmware.com/cn/web/vmware/downloa ...

  3. Hugo 博客中文指南（基础教程）

    1. 安装 Hugo 从 Hugo 项目主页下载 Releases 文件,解压 hugo.exe 文件到 C:\Windows\System32 目录下. 2. 创建站点 hugo new site ...

  4. (转载)微软数据挖掘算法:Microsoft 神经网络分析算法原理篇（9）

    前言 本篇文章继续我们的微软挖掘系列算法总结,前几篇文章已经将相关的主要算法做了详细的介绍,我为了展示方便,特地的整理了一个目录提纲篇:大数据时代:深入浅出微软数据挖掘算法总结连载,有兴趣的童鞋可以点 ...

  5. Spring Boot使用MongoDB GridFS进行文件的操作

    1. GridFS简介 GridFS 用于存储和恢复那些超过16M(BSON文件限制)的文件(如:图片.音频.视频等),但是它是存储在MonoDB的集合中. GridFS 会将文件对象分割成多个的ch ...

  6. Python学习【第9篇】：python中的局部变量与全局变量

    1.全局变量 全局变量定义后可被下面所有函数进行调用 例子: name = "xiao"def chang_name(): print("chang_name" ...

  7. XCTF-phoenix100

    前期工作 查壳无壳,界面是普通的输入flag点击验证 逆向分析 文件结构只有一个MainActively,查看MainActively代码 public class MainActivity exte ...

  8. Spring5源码，@Autowired

    一.@Autowired所具有的功能 二.在Spring中如何使用@Autowired 三.@Autowired注解背后的工作原理 一.@Autowired所具有的功能 @Autowired是一个用来 ...

  9. 设计模式（九）——装饰者模式(io源码分析）

    1 星巴克咖啡订单项目(咖啡馆): 1) 咖啡种类/单品咖啡:Espresso(意大利浓咖啡).ShortBlack.LongBlack(美式咖啡).Decaf(无因咖啡) 2) 调料:Milk.So ...

  10. 提升NginxTLS/SSL HTTPS 性能的7条优化建议

    自2018年7月起,谷歌浏览器开始将" HTTP"网站标记为"不安全".在过去的几年中,互联网已经迅速过渡到HTTPS,Chrome浏览器的流量超过70%,并且 ...