Display component picture

I’ll put the packaged component picture here for you to see.

I believe that the front-end developers who are familiar with the background management system can understand what module I developed when they see this picture. When developing background management system, it is often necessary to choose icon. Although there are many packaged components on the Internet, it is best to package a similar component.

Show the code

First, create a new folder under the SRC/Componets folder to wrap the component. I created an SvgSelect folder so that we could semantic it so that the name of the folder would tell us what the component was for.

Then, we’re going to create a.vue file and a.js file. I used index.vue and requireicons.js. The index.vue file is obviously used to encapsulate components, and the requireicons. Js file is used to retrieve all SVG file information.

Having said so much, I will post the code directly to you, and then I will tell you the idea.

<! -- index.vue --> <template> <div class="icon-body"> <div class="icon-list"> <div v-for="(item,index) in iconList" :key="index" @click="selectedIcon(item)"> <svg-icon :icon-class="item" style="height:30px; width:16px;" /> <span>{{item}}</span> </div> </div> </div> </template> <script> import icons from './requireicons' export default { name: 'IconSelect', data() { return { iconList: icons } }, methods: { selectedIcon(name) { this.$emit('selected', name) document.body.click() } } } </script> <style lang="scss" scoped> .icon-body{ width: 750px; padding: 10px; .icon-list { overflow: scroll; div { display: inline-block; width: 25%; height: 30px; line-height: 30px; margin-bottom: -5px; cursor: pointer; } span{ display: inline-block; margin-left: 10px; line-height: 30px; fill: currentColor; overflow: hidden; } } } </style>Copy the code
// requireicons.js
const req = require.context('.. /.. /icons/svg'.false./\.svg$/)
const requireAll = requireContext= > requireContext.keys()

const re = /\.\/(.*)\.svg/

const icons = requireAll(req).map(i= > {
    return i.match(re)[1]})export default icons;
Copy the code

Train of thought

When encapsulating a component, it is important to keep things simple, in this case as if we were encapsulating a clickable list (which is exactly what we are doing). This should make it easy to look at the index.vue file (which is not hard). This is a vue-element-admin component wrapped in the SVG -icon framework, which can be easily interpreted as an IMG tag. Then we give the list item a click event. When clicked, we pass the icon name to the parent component and display it in the input box. You might wonder why you clicked on body, document.body.click(). This is because I use the Popover component from Elemnt-UI in the parent component, which must be clicked out of the component’s range to hide.

The requireicons. Js file is generally prepared to capture all.SVG image files. First we use require.context(), which many of you may be unfamiliar with, and which I found online to implement.

 require.context('.. /.. /icons/svg'.false./\.svg$/)
// Parameter one: the directory to query, the above code refers to the current directory
// Parameter two: whether to query descendant directories, method default value is false
// The suffix of the file to be matched is a regular expression
The require.context module returns a function that takes an argument.
// The exported method has three attributes: resolve, keys, and id.
// resolve is a function that returns the module ID when the request is resolved.
// keys is also a function that returns an array of all the requests that might be processed by the context module.
// id is the module ID contained in the context module. It may be used when you use module.hot.accept
Copy the code

We then define a requireAll method and re validation

const requireAll = requireContext= > requireContext.keys()
// This method takes an argument and exports an array of SVG file information using keys()
// This is distinguished from es6 keys()
// The function is similar, but the usage is quite different.
const re = /\.\/(.*)\.svg/
// Use the following to verify that the obtained file is correct
Copy the code

And then finally we’re going to call it together to get the value that we need

const icons = requireAll(req).map(i= > {
    return i.match(re)[1]})RequireAll (req) takes an array of VSG file information
// map traverses the array to see if it is. SVG ending
// Return the correct value
Copy the code

This gives us the collated SVG file information from the requireicons.js file.

call

When we call this component, we use elemen-UI’s popover component, which makes it easy to show and hide the IconSelect component. This is where the knowledge that you need to know about slots is used. If you don’t know about slots and the definition of the slot field in Element-UI. We define the Selected method on the IconSelect component to assign values thrown from within the component to our input box and to our SVG-icon component.

<template> <el-popover placement="bottom-start" trigger="click"> <icon-select @selected="selected" /> <el-input < svG-icon V-if ="form.menu_icon" slot="prefix" placeholder=" reference" V-model ="form.menu_icon" placeholder=" placeholder" :icon-class="form.menu_icon" style="height:40px; width:16px;" /> <span v-else slot="prefix" /> </el-input> </el-popover> </template> <script> import IconSelect from '@/components/IconSelect/index' export default { components: { IconSelect }, data() { return { form: { menu_icon: '' } } }, methods: { selected(name) { this.form.menu_icon = name } } } </script>Copy the code

This completes our most basic requirement.

P.S.

As a programmer who just started blogging, it took a lot of work for me to write these words. If you want to make it easy, if you want to write it really is not so, I hope my article can be helpful to you. If you have any questions and suggestions can leave a comment to me, I will reply to you when I see

Original is not easy, a praise to encourage it!