iview 下拉菜单折行

 

 

<template>
  <div>
    <Alert show-icon>当前 iView 版本为 3.4.2</Alert>
     <Dropdown>
        <a href="javascript:void(0)">
            下拉菜单
            <Icon type="ios-arrow-down"></Icon>
        </a>
        <DropdownMenu slot="list">
            <DropdownItem style="white-space: pre-wrap" v-for="item in itemoPtions" :value ="item.value" :key="item.value" >{{item.label}}</DropdownItem>
        </DropdownMenu>
    </Dropdown>

  </div>
</template>
<script>
  export default {
    data () {
      return {
        itemoPtions:[
          
        ]
      }
    },
    created() {
      
       
    },
    methods: {
      
    },
    mounted () {
      
         this.itemoPtions = [ 
            {value:'1',label:'炸酱面炸酱面炸酱面炸酱面炸酱面炸酱面炸酱面炸酱面炸酱面炸酱面炸酱面炸酱面炸酱面炸酱面'},
            {value:'2',label:'豆汁儿'},
            {value:'3',label:'冰糖葫芦'},
            {value:'4',label:'冰糖葫芦冰糖葫芦冰糖葫芦冰糖葫芦'},
            {value:'5',label:'北京烤鸭'}
          ]
      
        this.itemoPtions= this.itemoPtions.filter(
          item =>
         item.label = item.label.replace(/[^\x00-\xff]/g, "$&\x01").replace(/.{15}\x01?/g, "$&\n").replace(/\x01/g, "")
           )
      
      //  this.str = str.replace(/[^\x00-\xff]/g, "$&\x01").replace(/.{10}\x01?/g, "$&\n").replace(/\x01/g, ""); 
    }
  }
</script>
<style>

</style>

  我写了一个测试的码源   https://run.iviewui.com/QVULXO29

posted @ 2019-07-18 15:28  龙旋风  阅读(448)  评论(0编辑  收藏  举报