Highlight

Basic usage

<div>
    <el-input placeholder="Please input" v-model="newSearch"></el-input>

    <mu-highlight 
        :result="arrayForSearch" 
        :search="newSearch" 
        string="name" 
        :style="{ paddingLeft: `${15}px`}"
    />
</div>
1
2
3
4
5
6
7
8
9
10
export default {
    data() {
        return {
            arrayForSearch: [],
            newSearch: ''
        }
    },
    watch: {
        newSearch(){
            if (this.newSearch !== ''){
                this.arrayForSearch = [{
                    attributes: {
                        name: "AliExpress",
                        url: 'ali'
                    },
                    id: '1',
                    type: 'offers'
                },
                {
                    attributes: {
                        name: "Aviasales",
                        url: 'aviasales',
                    },
                    id: '28',
                    type: 'offers'
                },
                {
                    attributes: {
                        name: "FocalPrice",
                        url: 'focalprice',
                    },
                    id: '59',
                    type: 'offers'
                },
                {
                    attributes: {
                        name: "Alltime",
                        url: 'alltime',
                    },
                    id: '75',
                    type: 'offers'
                },
                {
                    attributes: {
                        name: "NYX Professional Makeup",
                        url: 'nyxcosmetic',
                    },
                    id: '101',
                    type: 'offers'
                }]
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<div>
    <el-input placeholder="Please input" v-model="newSearchWithParams"></el-input>

    <mu-highlight 
        :result="arrayForSearch" 
        :search="newSearchWithParams" 
        text="in shops" 
        link="/cashback/shops/" 
        string="name" 
        url="url" 
        :style="{ paddingLeft: `${15}px`}"
    />
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
export default {
    data() {
        return {
            arrayForSearch: [],
            newSearchWithParams: ''
        }
    },
    watch: {
        newSearchWithParams(){
            if (this.newSearchWithParams !== ''){
                this.arrayForSearch = [{
                    attributes: {
                        name: "AliExpress",
                        url: 'ali'
                    },
                    id: '1',
                    type: 'offers'
                },
                {
                    attributes: {
                        name: "Aviasales",
                        url: 'aviasales',
                    },
                    id: '28',
                    type: 'offers'
                },
                {
                    attributes: {
                        name: "FocalPrice",
                        url: 'focalprice',
                    },
                    id: '59',
                    type: 'offers'
                },
                {
                    attributes: {
                        name: "Alltime",
                        url: 'alltime',
                    },
                    id: '75',
                    type: 'offers'
                },
                {
                    attributes: {
                        name: "NYX Professional Makeup",
                        url: 'nyxcosmetic',
                    },
                    id: '101',
                    type: 'offers'
                }]
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

Highlight Attributes

Attribute Description Type Accepted Values Default
result results array Array any empty array
search text for search String any empty string
string attribute of the object for search String any 'name'
text adding text to an array element String any empty string
link link for all elements of the array String any empty string
url attribute of the object to be added to the link String any empty string
stylePadding left-padding for array element String any '0'