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( ' ...
随机推荐
- 《Effective C#》之减少装箱和拆箱
<Effective C#>之减少装箱和拆箱_天极网 http://dev.yesky.com/msdn/359/3486359.shtml <Effective C#>之减少 ...
- WPF Selector、SelectIndex、SelectedValue、SelectedValuePath、SelectedItem这几兄弟你分的清楚嘛?
Selector Selector是一个抽象类,继承ItemsControl类(包含任何类型的对象(例如字符串,图像或面板)的集合),而本文的4个兄弟都是Selector类下的4个属性. Select ...
- LOJ10163 Amount of Degrees
题目描述 求给定区间 [X,Y] 中满足下列条件的整数个数:这个数恰好等于 KK 个互不相等的 BB 的整数次幂之和.例如,设 X=15,Y=20,K=2,B=2,则有且仅有下列三个数满足题意 输入格 ...
- 利用Javascript制作网页特效(其他常见特效)
设置为首页和加入收藏夹 ①:在body标签内输入以下代码: <a onclick="this.style.behavior='url(#default#homepage)'; this ...
- Spark练习之wordcount,基于排序机制的wordcount
Spark练习之wordcount 一.原理及其剖析 二.pom.xml 三.使用Java进行spark的wordcount练习 四.使用scala进行spark的wordcount练习 五.基于排序 ...
- jquery的ajax提交时加载处理方法
1.定义全局的,就是所有的ajax的请求的加载都会出现相同的提示 $(function(){ //加载成功显示的状态 $("#showLoading").ajaxSuccess(f ...
- DEDECMS:安装百度UEDITOR编辑器
第一步:下载相对应编辑器的版本 首先,去百度搜索"百度ueditor编辑器",然后点击进入官网,找到下载页面.找到我们想要的编辑器的版本,看自己网站的编码是UTF-8还是GBK,下 ...
- Flink-v1.12官方网站翻译-P028-Custom Serialization for Managed State
管理状态的自定义序列化 本页面的目标是为需要使用自定义状态序列化的用户提供指导,涵盖了如何提供自定义状态序列化器,以及实现允许状态模式演化的序列化器的指南和最佳实践. 如果你只是简单地使用Flink自 ...
- S - Layout (最短路&&差分约束)
Like everyone else, cows like to stand close to their friends when queuing for feed. FJ has N (2 < ...
- codeforces632D. Longest Subsequence (最小公倍数)
You are given array a with n elements and the number m. Consider some subsequence of a and the value ...