1, the preface

This article has participated in the activity of “New person creation Ceremony”, and started the road of digging gold creation together. In the account hosting function of background management system or ToB business, we often encounter switching between multiple accounts, and most of the presentation forms of multi-account switching include the typical feature attributes of profile picture, nickname and account user portrait. From the account type dimension, including enterprise number, personal number, etc. It is divided from the dimension of authority role, including super administrator and role (RBAC authority model). And the extraction of other dimensions.

2, achieve the effect

  • Static figure

  • Dynamic figure

3, analysis,

  1. Trouble spots

Do native select and Options not support img Element insertion wySIWYG or WYSIWYG? Implement or introduce a third party library?

  1. Implementation approach
  • The UE diagram is abstracted into the sketch that our code will implement as follows:

  • The project itself has been integrated with Element UI, and the above sketches fit perfectly with El-Select, which is a fast implementation based on el-Select without reinventing the wheel.

4. Data layer

Const data = [{id: 'XXX', nickname: 'Li Tuanchang, avatar:' http:// * * *. PNG, eaccountRole: 'individual number,}].Copy the code

5. Presentation layer

<el-select> <! -- prefix--> <template slot="prefix" > <img :src="selectNode.avatar" /> </template> <el-option v-for="item in data" :key="item.id" :label="item.label" > <div class="item-wrapper"> <img :src="item.avatar"/> {{ item.nickname }} {{ item.eaccountRole }} </div> </el-option> </el-select>Copy the code