TerryZ / v-selectmenu

SelectMenu for Vuejs, A simple, easier and highly customized menu solution
https://terryz.github.io/docs-vue/#/selectmenu
MIT License
187 stars 25 forks source link

Documentation? #8

Closed xeroxstar closed 6 years ago

xeroxstar commented 6 years ago

Great UI and i gave u a star and forked this UI but where is the documentation? Simple things should be explained better, for example, how do i change "select an option" ? I don't want use i18n but i have too, and i can't change the title without language.js. I need a dynamic option to change the title but i couldn't find anything on GH (i am sure there is a way to do it). I don't want to use Vue.use(), how do i use it without "use()"? How can i use the {options} without use()? These small things should have examples or documentation. As i said, great UI(loved it), but not many will use it only because we don't have examples or documentation and running through the code to understand how it works some dev have no time. The documentation or good examples solve these problems. What i found is a short briefing and this is not enough to make the development enjoyable.

TerryZ commented 6 years ago
  1. <v-selectmenu :title="'your customize title'"> or <v-selectmenu title="your customize title"> to change title text.
  2. Only Vue.use(...) to install plugin so far, component mode will be added in future release.
  3. All options are used as follows <v-selectmenu :regular="false" :title="'My title'" ... >
xeroxstar commented 6 years ago

Thx but i ended up to use custom button inside the select like this:

<v-selectmenu><div class='btn'/>Select my option</v-selectmenu>

Like this, i have more control over the button 🥇 I will keep playing with it, nice UI 👍

xeroxstar commented 6 years ago

I run in another issue, how do i make one of the options been selected by default? I guess i have to put "selected" in the menu array like this

menu: [
                {
                  title: 'Limits',
                  list: [
                    {content:'+100 -500'},
                    {content:'+500 -1000',selected:true},
                    {content:'+1000 -2000'},
                  ]
                }
              ]

But it wont make the option selected on load, any suggestions?

TerryZ commented 6 years ago

The regular menu can not be selected, mey be you can try advance menu mode.

xeroxstar commented 6 years ago

I am not sure what is "advance menu mode"? I have this code(is it advanced or no i am not sure):

<v-selectmenu
      :data="menu">
      <div class="select-btn"> <font-awesome-icon icon="filter" style="margin-right: 10px"/> Filter settings 
    </div>
</v-selectmenu>

export default {
  name: 'App',
  data:function(){

    return{    
      menu: [
        {
          title: 'Limits',
          list: [
            {index:0,content:'+100 -500'},
            {index:1,content:'+500 -1000',selected:'selected'},
            {index:2,content:'+1000 -2000'},
          ]
        }
      ]
    }
  }
}
xeroxstar commented 6 years ago

this example for advanced menu i found only here but it does not show how you select them by default. When i click on show the code i get this example with 2 rows of items and this is it:

<v-selectmenu :data="menu" key-field="id" show-field="name" title="MyTitle" v-model="value1" >
</v-selectmenu>

//data
data(){
    return {
        value1: '',
        menu: [
            list: [
                {id:1 ,name:'Chicago Bulls',desc:'芝加哥公牛'},
                {id:2 ,name:'Cleveland Cavaliers',desc:'克里夫兰骑士'},
                {...}
            ]
        ]
    }
}
xeroxstar commented 6 years ago

Never mind, i found the solution, i have to set the value on v-model="value"

return { value:1}

to select the option on default

TerryZ commented 6 years ago

Yeah, set 'v-model' to set default selected item