shit mint-ui & navbar click event bug
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的更多相关文章
- svg click event bug & css pointer-events
svg click event bug & css pointer-events svg click event not working Error OK ??? css class /* d ...
- vue mint ui 手册文档对于墙的恐惧
http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm ...
- vue mint ui 手册文档
npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本 ...
- 基于VUE.JS的移动端框架Mint UI
Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...
- Atitit vod click event design flow 视频点播系统点击事件文档
Atitit vod click event design flow 视频点播系统点击事件文档 重构规划1 Click cate1 Click mov4 重构规划 事件注册,与事件分发管理器分开 ...
- Mint UI文档
Mint UI文档:http://elemefe.github.io/mint-ui/#/ 一.Mint UI的安装和基本用法. 1.NPM :npm i mint-ui -S 建议使用npm进行安装 ...
- vue stop event bug
vue stop event bug [Vue warn]: Error in v-on handler: "TypeError: e.prevntDefault is not a func ...
- js trigger click event & dispatchEvent & svg element
js trigger click event & dispatchEvent & svg element but svg element not support trigger cli ...
- nodejs phantom add click event
page.evaluate( function() { // find element to send click to var element = document.querySelector( ' ...
随机推荐
- 变量隐藏Accidental Variable Shadowing
6.5 - Variable shadowing (name hiding) | Learn C++ https://www.learncpp.com/cpp-tutorial/variable-sh ...
- 精通MySQL之锁篇
老刘是即将找工作的研究生,自学大数据开发,一路走来,感慨颇深,网上大数据的资料良莠不齐,于是想写一份详细的大数据开发指南.这份指南把大数据的[基础知识][框架分析][源码理解]都用自己的话描述出来,让 ...
- 分布式缓存 — kafka
Kafka是一个分布式.支持分区的(partition).多副本的(replica),基于zookeeper协调的分布式消息系统,它的最大的特性就是可以实时的处理大量数据以满足各种需求场景:比如基于h ...
- HTMl5 特点 标签语法 以及标签
知识点关于HTML5 的特点以及其标签和标签语法.. <!-- [HTMl5 特点] 向下兼容 用户至上 化繁为简 无插件范围 访问通用性 引入语义 引入原生媒体支持--> <!-- ...
- SQL操作数据——SQL组成，查询基础语法，where，Oracle常用函数等
SQL组成 DML数据操作语言 DCL数据控制语言 DQL数据查询语言 DDL数据定义语言 查询基础语法 记录筛选 where 子句 记录筛选 where 子句 实例练习 实例练习 Select语句中 ...
- 使用Docker Registry管理Docker镜像
文章目录 使用Docker Registry管理Docker镜像 1.使用Docker Hub管理镜像 1.1注册与登录 1.2创建仓库 1.3推送镜像 2. 使用私有仓库管理镜像 2.1 搭建私有仓 ...
- 2019 徐州网络赛 M Longest subsequence t
对于答案来说,一定是 前 i-1 个字符和 t的前 i 个一样,然后第 i 个字符比 t的 大 \(i\in [1,m]\) 前缀为t,然后长度比t长 对于第一种情况,枚举这个 i ,然后找最小的 p ...
- [AHOI2009] [BZOJ1799] 月之迷 （数位DP)
给出两个数a,ba,b,求出\([a,b]\)中各位数字之和能整除原数的数的个数. 我们按照模板的做法来想,枚举到第pos位时,要确定这一位的数字,可以更新现在所填数字的和,但对于最终的和无从得知,是 ...
- POJ - 2406 Power Strings （后缀数组DC3版）
题意:求最小循环节循环的次数. 题解:这个题其实可以直接用kmp去求最小循环节,然后在用总长度除以循环节.但是因为在练后缀数组,所以写的后缀数组版本.用倍增法会超时!!所以改用DC3法.对后缀数组还不 ...
- Educational Codeforces Round 88 (Rated for Div. 2) A. Berland Poker（数学）
题目链接:https://codeforces.com/contest/1359/problem/A 题意 $n$ 张牌可以刚好被平分给 $k$ 个人,其中有 $m$ 张 joker,当一个人手中的 ...