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. Spring Security OAuth2.0认证授权六：前后端分离下的登录授权

    历史文章 Spring Security OAuth2.0认证授权一:框架搭建和认证测试 Spring Security OAuth2.0认证授权二:搭建资源服务 Spring Security OA ...

  2. c++11之override关键字

    明确是用来 覆盖 用来对虚函数的  从新实现  加上后编译器就会帮我们去检查这个语法 总结就是:c++11允许派生类显示的注明它将使用那个成员函数改写基类的虚函数 https://blog.csdn. ...

  3. epoll在fork子进程中的问题

    epoll_create 创建的 文件描述符和其他文件描述符一样,是被fork出的子进程继承的,那也就是子进程可以使用这个epoll fd添加感兴趣的io(epoll_ctl),然后是可以影响到父进程 ...

  4. IntelliJ Idea 解决 Could not autowire. No beans of 'xxxx' type found 的错误提示

    IntelliJ Idea 解决 Could not autowire. No beans of 'xxxx' type found 的错误提示哈,在使用 @Autowired 时,今天又遇一坑,这俩 ...

  5. 【算法】ST表

    想学习一下LCA倍增,先 水一个黄题 学一下ST表 ST表 介绍: 这是一个运用倍增思想,通过动态规划来计算区间最值的算法 算法步骤: 求出区间最值 回答询问 求出区间最值: 用f[i][j]来存储从 ...

  6. 接口鉴权之sign签名校验与JWT验证

    需求描述: 项目里的几个Webapi接口需要进行鉴权,同接口可被小程序或网页调用,小程序里没有用户登录的概念,网页里有用户登录的概念,对于调用方来源是小程序的情况下进行放权,其他情况下需要有身份验证. ...

  7. Fiddler扩展——自定义列数据&Tunnel to 443解决办法

    在平时日常工作中,使用Fiddler的占比还是蛮大的.使用过程,也会遇到一些小问题,问题虽小,但抓不到包,分析不了问题与数据,那也是件麻烦的事情. 以前也分享过一些小技巧,可以找以前的博文查看,具体地 ...

  8. （六）整合 QuartJob ,实现定时器实时管理

    整合 QuartJob ,实现定时器实时管理 1.QuartJob简介 1.1 核心API 2.SpringBoot整合QuartJob 2.1 项目结构 2.2 定时器配置 2.3 定时器管理工具 ...

  9. Spring cloud-Bus (消息总线)

    <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring ...

  10. dedecms织梦的安全问题解决办法

    很多新手用户在使用织梦CMS程序过程中,难免会碰到挂马中毒现象,所以事先我们要对网站及服务器安全做好预防备份处理. 织梦作为国内第一大开源免费CMS程序,无疑是很多HACK研究的对象,在本身不安全的互 ...