vant组件库-dropdownMenu组件自定义title
 
在利用vue开发h5页面时，通常我们选择的是vant作为我们的组件库，它提供60多个高质量组件，覆盖移动端各类场景。正如大多数组件库一样，很多都有这样或那样的bug，vant也是如此，本文要说的是vant中dropdownMenu组件自定义title无法及时更新title内容的bug。
 1、首先看下面一段代码
 
<template>
  <div class="test">
    <van-dropdown-menu>
      <van-dropdown-item v-model="value" :options="option1" >
        <template slot="title">
          <span>{{ customizeTitle }}</span>
        </template>
      </van-dropdown-item>
    </van-dropdown-menu>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 0,
        option1: [
          { text: '全部商品', value: 0 },
          { text: '新款商品', value: 1 },
          { text: '活动商品', value: 2 },
        ],
        customizeTitle: '',
      };
    },
  };
</script>
 
2、上面的代码看起来似乎没什么问题，customizeTitle即为自定义的title，option1为下拉菜单的内容，value为绑定的当前下拉菜单的value值。然而当在不进行下拉操作，而直接改变customizeTitle时，你会发现页面并没有把你要改的这个customizeTile正常的渲染在页面上，当你再次改变customizeTile时，你回发现上一次改变的customizeTile渲染在了页面上，也就是页面只渲染上一次更改的customizeTile，当前更改的内容需要再下一次更改customizeTile 时才会渲染出来，不过当你点击一下菜单，customizeTile就会正常渲染出来。推测应该是该逐渐内部渲染逻辑的问题，希望广大网友有兴趣的可以研究一下这个问题，一起探讨。
 
3、解决方法
 为了解决这个问题，我用van-button做了一个样子一样的菜单，利用dropdown的toggle方法，点击van-button会出发dropdown的下拉菜单打开，然后再正常选择菜单即可。
 
PS：欢迎加入vue技术交流群（864583465）进行更多问题的探讨，你的问题将是我们大家共同进步的关键

 
 
好像没有现成的api可能获取menu完美方法，只有在创建menu时，用全局的menuItem记下，
 
在需要修改时修改。
 

 
 

 
 
1）全局量：
 
MenuItem  gMenuItem=NULL;
 
 

 
 
2）//创建菜单时keep
 
 
    @Override
     public boolean onCreatePanelMenu(int featureId, Menu menu){
         getMenuInflater().inflate(R.menu.menu, menu);
         gMenuItem= menu.findItem(R.id.action_Seach);
         return true;
     }
 

 
 
3）需要时修改
 
 
//ANY PLACE
 
if(gMenuItem!=NULL){
 
 
          gMenuItem.setTitle("Changed");
 
}
 

标题有点繁琐：
 
直接上图和上代码看清楚点：
 
menu文件中：
 

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.secondhandbook.aty.MainActivity" >

        <item
        android:id="@+id/setting_edit"
        android:orderInCategory="100"
        android:showAsAction="always"
        android:title="@string/personal_setting_edit"/>

</menu>

 Java文件中：
 

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.main_setting, menu);
		return true;
	}
	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		// TODO Auto-generated method stub
		return super.onOptionsItemSelected(item);
	}

 然后结果就是酱紫的：
 

 
 
这忒难看，于是就要改，于是第一印象去menu文件中定义
 
android:textSize = "18sp"
 
发现没！作！用！
 

 
 
后来是这么改的：
 
修改style文件：
 

    <style name="AppTheme" parent="AppBaseTheme">

        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
        <item name="android:actionMenuTextAppearance">@style/MenuTextStyle</item>
    </style>

    <style name="MenuTextStyle">
        <item name="android:textColor">@android:color/white</item>
        <item name="android:textSize">18sp</item>
    </style>
然后结果就是酱紫的：
 

 
 
 
大功告成！！！！
 

 
 
2015快过去了，迎来2016。祝所有人快乐，幸福！

项目中需要修改element-ui中NavMenu的样式，在修改划过样式时，发现.el-menu-item可以直接修改，但.el-submenu__title修改样式不生效
 
网友分析原因：二级菜单是使用slot添加的，单独给这个slot添加样式，等渲染出来，样式没有了，需要有深选择器。
 
解决办法：
 
1.
 
/* 深选择器：如果相对设置了scoped的子组件里的元素进行控制可以使用'>>>'或者'deep'设置选中或悬浮的颜色*/
 .el-submenu /deep/ .el-submenu__title {
     height: 50px !important;
     line-height: 50px !important;
   }
 测试没效果..应该是我的问题
 
2.
 
按照在操作台中看到的class名，写在全局（非scoped）的style中，
 此处的class名是.el-submenu__title
 
<style>
 .el-submenu__title{
   font-size: 1.8em !important;
 }
 </style>
 
测试有效