Fork me on GitHub

vue 多选月份组件

字数统计: 6.2k字   |   阅读时长≈ 34分

📅多选月份

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
<template>
   <div class="selectMonthBoxSquare rel clearFixed" id="boxArea">
       <!-- el-input输入框：readonly和clearable属性不能同时使用 -->
        <el-input class="inputStyle" v-model="inputValue" type="text" placeholder="请选择查询月份" readonly @focus="showBox = true">
            <i slot="prefix" class="el-input__icon el-icon-date"></i>
            <!-- 清空图标：有内容的时候渲染出来，鼠标hover到input框的时候再显示出来（即：输入框有内容并且鼠标悬浮时显示该图标） -->
            <i slot="suffix" class="el-input__icon el-icon-circle-close clearIconStyle" v-if="showClear" @click="resetMonth"></i>
        </el-input>
        <!-- 年份月份选择弹框 -->
        <div class="selectContentBox" v-if="showBox">
           <div class="contentArea">
               <!-- 年份 -->
                <div class="flex flex-wrap flex-around" style="padding: 15px 0;border-bottom: 1px solid #e5e5e5;">
                    <div class="cursor" v-if="curIndex == DateList.length - 1" style="width: 15%;"><img src="../../../images/left_icon_gray.png" alt="" /></div>
                    <div class="cursor" v-else @click="reduceYear" style="width: 15%;"><img src="../../../images/left_icon.png" alt="" /></div>
                    <div>{{OneY}}年</div>
                    <div class="cursor t-r" v-if="curIndex == 0" style="width: 15%;"><img src="../../../images/right_icon_gray.png" alt="" /></div>
                    <div class="cursor t-r" v-else @click="addYear" style="width: 15%;"><img src="../../../images/right_icon.png" alt="" /></div>
                </div>
                <!-- 月份 -->
                <div class="conterList">
                    <el-checkbox-group class="flex flex-wrap" v-model="optTime[curIndex].queryTime" @change="onChange" >
                        <el-checkbox class="onSelect flex-x-center" v-for="(item,index) in DateList[curIndex].queryTime" :key="index" :label="`${DateList[curIndex].TimeYear}-${(item<=9)?`0${item}`:item}`">
                        {{monthMap[item]}}月
                        </el-checkbox>
                    </el-checkbox-group>
                </div>
            </div>
            <!-- 按钮 -->
            <div class="buttonBox t-r">
                <el-button class="buttonStyle" size="mini" type="primary" plain @click.stop="handleSubmit">确定</el-button>
                <el-button class="buttonStyle" size="mini" plain @click.stop="resetMonth">重置</el-button>
            </div>
       </div>
   </div>
</template>
<script>
export default {
    data(){
        return{
            DateList: [], // 年份月份数组
            optTime: [], // 月份选中结果数组
            OneY: '', // 当前年份
            curIndex: 0, // 当前年份下标值
            optTimes: [], // 点击月份时的所有选中结果
            resultTimes: [], // 点击“确定”按钮后的选择结果
            showBox: false, // 是否显示月份选择弹框
            inputValue: '', // 输入框的绑定值
            showClear: false, // 是否显示输入框右边的“清空”小图标
            monthMap: { // 月份显示为中文
                '1': '一',
                '2': '二',
                '3': '三',
                '4': '四',
                '5': '五',
                '6': '六',
                '7': '七',
                '8': '八',
                '9': '九',
                '10': '十',
                '11': '十一',
                '12': '十二',
            }
        }
    },
    created(){
        this.init();
    },
    mounted() {
        //点击弹框外的任意位置关闭区域弹窗
        document.addEventListener('click',(e) => {
            //获取弹窗对象
            const boxArea = document.getElementById('boxArea');
            //判断弹窗对象中是否包含点击对象
            if(boxArea &&　!boxArea.contains(e.target)) {
                // 判断当前选中月份与上次点击“确定”按钮时的选择结果是否一致
                let equalArr = this.resultTimes.sort().toString() == this.optTimes.sort().toString()
                if(!equalArr) {
                    // 如果不一致（因为是多选，所以必须是点击了“确定”按钮后才能进行查询）：
                    // 将选择结果恢复到上次点击“确定”按钮时的结果
                    this.optTimes = this.resultTimes
                    // 将输入框的值恢复到上次点击“确定”按钮时的值
                    this.inputValue = this.optTimes.join(',')
                    // 根据输入框是否有值来判断清空图标是否渲染
                    this.showClear = this.inputValue == '' ? false : true
                    // 将月份选中结果恢复到上次点击“确定”按钮时的选中月份
                    let _opt = this.resultTimes.map(v => { return v.substring(0,4) });
                    for( let item in this.optTime ){
                        this.optTime[item].queryTime = []
                        _opt.map((items,indexs)=>{
                            if( items == this.optTime[item].TimeYear ){
                                this.optTime[item].queryTime.push(this.resultTimes[indexs])
                            }
                        })
                    }
                }
                // 关闭弹框
                this.showBox = false;
            }
        })
    },
    methods:{
        // 初始化数据，获取前20年，然后循环 每一年里面都有12个月的 得到数组 opTime 和 DateList
        init(){
            const _this = this;
            let _opt = [];
            let _optTime = []
            let arr = new Array(12);
            let optDate = this.getDateList();
            optDate.map((item,index)=>{
                // 月份选择时el-checkbox-group绑定的值
                _optTime[index] = {
                    TimeYear: item,
                    queryTime: []
                }
                // 给每一年份设置12个月份，el-checkbox初始化显示时使用
                _opt[index] = {
                    TimeYear: item, 
                    queryTime: []
                }
                for(let i = 1; i<= arr.length; i++){
                     _opt[index].queryTime.push(i)
                }
            })
            _this.optTime = _optTime
            _this.DateList = _opt;
        },
        // 获取近20年年份列表，倒序排列，最新一年在最前面
        getDateList(){
            let Dates = new Date();
            let year = Dates.getFullYear();
            this.OneY = year;
            let  optDate = [];
            for( let i = year - 20; i <= year; i++ ){
                optDate.push(i)
            }
            return optDate.reverse()
        },
        // 确定
        handleSubmit(){
            const _this = this;
            // 更新输入框的值
            _this.inputValue = _this.optTimes.join(',')
            // 根据输入框是否有值来判断清空图标是否渲染
            _this.showClear = _this.inputValue == '' ? false : true
            // 将点击“确定”按钮的选择结果保存起来（该值将在哪里使用：在点击弹框以外区域关闭弹框时使用，mounted中）
            _this.resultTimes = _this.optTimes
            // 关闭弹框
            _this.showBox = false
            _this.$emit('submitBtn',_this.resultTimes)
        },
        // 重置
        resetMonth() {
            const _this = this;
            // 将年份重置到当前年份
            let Dates = new Date();
            let year = Dates.getFullYear();
            _this.OneY = year;
            // 将已选择的月份清空
            _this.optTimes = [];
            for( let i in _this.optTime  ){
                _this.optTime[i].queryTime =[]
            }
            // 将输入框清空
            _this.inputValue = ''
            // 根据输入框是否有值来判断清空图标是否渲染，此处必然不渲染
            this.showClear = false
            // 将点击“确定”按钮的选择结果清空
            _this.resultTimes = []
            // 关闭月份选择弹框
            _this.showBox = false
            _this.$emit('resetBtn')
        },
        // 左上角年份减少
        reduceYear() {
            const _this = this;
            // 如果已经是最后一年了，则年份不能再减少了
            if(_this.curIndex == _this.DateList.length - 1) return;
            // 当前下标值+1，根据下标值获取年份值
            _this.curIndex = _this.curIndex + 1
            _this.OneY = _this.DateList[_this.curIndex].TimeYear
        },
        // 左上角年份增加
        addYear() {
            const _this = this;
            // 如果已经是当前年份了，则年份不能再增加了
            if(_this.curIndex == 0) return;
            // 当前下标值-1，根据下标值获取年份值
            _this.curIndex = _this.curIndex - 1
            _this.OneY = _this.DateList[_this.curIndex].TimeYear
        },
        // 选择月份
        onChange(){
            const _this = this;
            // 遍历optTime中已选择的月份，将已选结果塞到optTimes数组中
            let _opt = _this.optTime;
            let arr = [];
             for(let item in _opt ){
                if(_opt[item].queryTime.length > 0)  _opt[item].queryTime.filter( v => { arr.push(v) })
             }
            _this.optTimes = arr
            // 更新输入框的值
            _this.inputValue = _this.optTimes.join(',')
            // 根据输入框是否有值来判断清空图标是否渲染
            _this.showClear = _this.inputValue == '' ? false : true
        }
    }
}
</script>
<style lang="scss">

.selectMonthBoxSquare {
    margin-top: 10px;
    width: 250px;
    .inputStyle {
        width: 250px;
    }
    .clearIconStyle {
        display: none;
    }
    .inputStyle:hover .clearIconStyle{
        display: block;
    }
    .selectContentBox {
        position: absolute;
        top: 35px;
        left: 0;
        z-index: 2021;
        background: #ffffff;
        border: 1px solid #e5e5e5;
        border-radius: 3px;
        
        .contentArea {
            width: 330px;
        }
    }
    .conterList{
        .onSelect{
            width: 25% !important;
            margin: 20px 0 !important;
        }
        .columWidth {
            width: 33.33%;
        }
        .el-checkbox__input {
            display: none !important;
        }
        .el-checkbox__label {
            padding-left: 0px !important;
        }
    }
    .selectBox {
        width: 100px;
        
        input {
            height: 25px;
            line-height: 25px;
        }
        .el-input .el-input__icon {
            line-height: 25px;
        }
    }
    .tagStyle {
        margin-right: 10px;
        height: 25px;
        line-height: 25px;
    }
    .lableStyle {
        font-size: 14px;
    }
    .el-button--mini {
        padding: 5px 15px;
        font-size: 12px;
        border-radius: 3px;
    }
    .buttonBox {
        border-top: 1px solid #e5e5e5;
        padding: 10px 10px 10px 0;
    }
}
</style>

多选年份

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!--
 * @Description: 实现年份多选
 * @Author:  wyf
 * @Date: 2022-03-09 10:24:45
 * @LastEditTime: 2022-03-09 17:25:51
 * @LastEditors:  wyf
-->
<template>
   <div class="selectMonthBoxSquare" id="boxArea">
        <el-popover
            placement="bottom"
            width="290"
            trigger="focus"
            popper-class="my-selects-popper"
            :disabled="disabled"
        >
            <!-- 年份月份选择弹框 -->
            <div class="selectContentBox">
                <div class="contentArea"   v-if="DateList.length">
                    <!-- 标题 -->
                    <div class="title-tip" style="padding: 15px 0;border-bottom: 1px solid #e5e5e5;">
                        <div class="cursor" v-if="curIndex == DateList.length - 1" style="width: 15%;"><i class="el-icon-arrow-left" style="color:#ccc;"></i></div>
                        <div class="cursor" v-else @click="reduceYear" style="width: 15%;"><i class="el-icon-arrow-left" ></i></div>
                        <div>{{rangeYearString}}年</div>
                        <div class="cursor t-r" v-if="curIndex == 0" style="width: 15%;"><i class="el-icon-arrow-right"  style="color:#ccc;"></i></div>
                        <div class="cursor t-r" v-else @click="addYear" style="width: 15%;"><i class="el-icon-arrow-right" ></i></div>
                    </div>
                    <!-- 年份-->
                    <div class="conterList">
                        <el-checkbox-group class="flex flex-wrap"  v-model="optTime"  @change="onChange" >
                            <el-checkbox class="onSelect flex-x-center" v-for="(item) in DateList[curIndex]" :key="item" :label="item">
                            {{item}}年
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>
                </div>
            </div>
            <!-- el-input输入框：readonly和clearable属性不能同时使用 -->
            <el-input slot="reference" class="inputStyle" v-model="inputValue" type="text" placeholder="请选择查询月份" readonly >
                <i slot="prefix" class="el-input__icon el-icon-date"></i>
                <!-- 清空图标：有内容的时候渲染出来，鼠标hover到input框的时候再显示出来（即：输入框有内容并且鼠标悬浮时显示该图标） -->
                <i slot="suffix" class="el-input__icon el-icon-circle-close clearIconStyle" v-if="showClear" style="position: relative;z-index: 9999999999;" @click.stop="resetMonth"></i>
            </el-input>
        </el-popover>
        
   </div>
</template>
<script>
export default {
    props: {
        value: {
            type: String,
            default: ''
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    model: {
        prop: "value",//指定自己的pfoo属性接受数值
        event: "input"//指定自己的event1事件回送数据给父组件
    },
    data(){
        return {
            DateList: [], // 年份数组
            optTime: [], // 年份选中结果数组
            rangeYear: [], // 当前年份范围
            curIndex: 0, // 当前年份下标值
            inputValue: '', // 输入框的绑定值
            showClear: false, // 是否显示输入框右边的“清空”小图标
        }
    },
    mounted(){
        this.init();
    },
    computed: {
        rangeYearString: function () {
            return `${this.rangeYear[0]}~${this.rangeYear[1]}`
        }
    },
    watch: {
        value:{
            handler: function(val) {
                this.inputValue = val;
            },
            immediate: true
        },
        inputValue: {
            handler: function(val) {
                this.showClear = !!val && !this.disabled
            },
            immediate: true
        }
    },
    methods:{
        // 初始化数据，获取前20年， DateList
        init(){
            const _this = this;
            let optDate = this.getDateList();
            _this.DateList = optDate;
            setTimeout(()=> {
                this.optTime = this.value?this.value.split(',').map(ele=>+ele): []
            })
        },
        // 获取近XXX年年份列表，倒序排列，最新一年在最前面
        getDateList(){
            let Dates = new Date();
            let year = Dates.getFullYear();
            this.rangeYear = [year, year+9];
            let  optDate = [];
            let pointer = 0;
            let sub = 0;
            for( let i = year - 100; i <= year + 100; i++ ){
                pointer += 1
                if(!optDate[sub]) optDate[sub] = [];
                optDate[sub].push(i)
                // 设置当前年份页数
                if(i === year) {
                    this.curIndex = sub;
                }
                if(pointer == 10) {
                    pointer = 0
                    sub += 1
                }
            }
            return optDate.reverse()
        },
        // 左上角年份减少
        reduceYear() {
            const _this = this;
            // 如果已经是最后一年了，则年份不能再减少了
            if(_this.curIndex == _this.DateList.length - 1) return;
            // // 当前下标值+1，根据下标值获取年份值
            _this.curIndex += 1
            _this.rangeYear = [_this.rangeYear[0] - 10, _this.rangeYear[0] - 1]
        },
        // 左上角年份增加
        addYear() {
            const _this = this;
            // 如果已经是当前年份了，则年份不能再增加了
            if(_this.curIndex == 0) return;
            // 当前下标值-1，根据下标值获取年份值
            _this.curIndex -= 1
            _this.rangeYear = [_this.rangeYear[1] + 1,_this.rangeYear[1] + 10]
        },
        // 选择月份
        onChange(){
            const _this = this;
            this.inputValue = this.optTime.toString()
            this.$emit('input', this.inputValue)
        },
        resetMonth() {
            this.optTime = []
            this.inputValue = ''
            this.$emit('input', '')
        }
    }
}
</script>
<style lang="scss" scoped>
.selectContentBox {
    .title-tip {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .cursor {
        text-align: center;
    }
    .contentArea {
        width: 290px;
        color: #fff;
    }
    .conterList{
        .onSelect{
            width: 25% !important;
            margin: 20px 0 !important;
        }
        .columWidth {
            width: 33.33%;
        }
        .el-checkbox__input {
            display: none !important;
        }
        .el-checkbox__label {
            padding-left: 0px !important;
        }
    }

    .buttonBox {
        border-top: 1px solid #e5e5e5;
        padding: 10px 10px 10px 0;
    }
}

</style>
<style lang="scss">
    .my-selects-popper {
        background: #0a353b !important;
        .el-checkbox__input {
            display: none;
        }
    }
</style>

element-ui 实现表格多行显示超出省略

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!--
 * @Description: 
 * @Author:  
 * @Date: 2022-11-09 14:10:15
 * @LastEditTime: 2022-11-09 15:30:35
 * @LastEditors:  

 <overflow-text slot-scope="{row}" :row="row" keyName="workContent" :clamp="2" />
 row：本行数据
 keyName: 要显示内容的键名
 clamp： 展示几行省略，默认3
-->
<template >
  <el-tooltip
    placement="top"
    v-model="row[flag]"
    :open-delay="200"
    effect="dark"
    :enterable="false"
    :disabled="!row[flag]">
        <div slot="content">{{row[keyName]}}</div>
        <div @mouseenter="showTips($event)" class='overflow' :class="'line'+clamp">{{row[keyName]}}</div>
    </el-tooltip>
</template>

<script>
export default {
    props: {
        row: {
            type: Object,
            required: true
        },
        keyName: {
            type: String,
            required: true,
        },
        clamp: {
            type: Number,
            default: 3
        },
    },
    data(){
        return {
            // 每个实例返回唯一键值标识
            flag: String(Date.now()+parseInt(Math.random()*10000000000))
        }
    },

    methods: {
        showTips(obj) {
            let row = this.row;
            let key = this.keyName;
            /*cellWidth为表格容器的宽度*/
            const cellWidth = obj.target.offsetWidth
            const cellHeight = obj.target.offsetHeight

            let TemporaryTag = document.createElement('div');
            TemporaryTag.style.width = cellWidth + 'px'
            TemporaryTag.innerText = row[key];
            TemporaryTag.className = 'getTextHeight';
            document.querySelector('body').appendChild(TemporaryTag);
            let currentHeight = document.querySelector('.getTextHeight').offsetHeight;
            document.querySelector('.getTextHeight').remove();
            
            /*当文本高度大于||等于容器高度时，代表文本显示未超过指定行数*/
            if(currentHeight >= cellHeight) {
                row[this.flag] = true
            }

        }
    }
}
</script>

<style lang="scss" scoped>
.overflow {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-box-orient: vertical;
    white-space: normal;
}
.line3 {
    -webkit-line-clamp: 3;
}
.line2 {
    -webkit-line-clamp: 2;
}
</style>

基于element ui 封装下拉树

参考文章, vue3 element-plus 有treeSelect 组件

使用

1
2
3
4
5
6
7
8
9
10
 <!-- 下拉树 -->
<selectbutton
  :props="props"
  :options="optionData"
  :value="valueId"
  :clearable="isClearable"
  :accordion="isAccordion"
  @getValue="getValue($event)"
  height="200"
></selectbutton>

封装

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<template>
  <el-select :value="valueTitle" :clearable="clearable" @clear="clearHandle"  ref="treeSelect">
    <el-input
      class="selectInput"
      :placeholder="placeholder"
      v-model="filterText">
    </el-input>

    <el-option :value="valueTitle" :label="valueTitle" class="options">
      <el-tree  id="tree-option"
        ref="selectTree"
        :accordion="accordion"
        :data="options"
        :props="props"
        :node-key="props.value"    
        :default-expanded-keys="defaultExpandedKey"
        :filter-node-method="filterNode"
        @node-click="handleNodeClick">
      </el-tree>
    </el-option>
  </el-select>
</template>
<script>
export default {
  name: "el-tree-select",
  props:{
    /* 配置项 */
    props:{
      type: Object,
      default:()=>{
        return {
          value:'id',             // ID字段名
          label: 'title',         // 显示名称
          children: 'children'    // 子级字段名
        }
      }
    },
    /* 选项列表数据(树形结构的对象数组) */
    options:{
      type: Array,       
      default: ()=>{ return [] }
    },
    /* 初始值 */
    value:{
      type: Number,
      default: ()=>{ return null }
    },
    /* 可清空选项 */
    clearable:{
      type:Boolean,
      default:()=>{ return true }
    },
    /* 自动收起 */
    accordion:{
      type:Boolean,
      default:()=>{ return false }
    },
    placeholder:{
      type:String,
      default:()=>{return "检索关键字"}
    }
  },
  data() {
    return {
      filterText: '',
      valueId:this.value,    // 初始值
      valueTitle:'',
      defaultExpandedKey:[]    
    }
  },
  mounted(){
    this.initHandle()
  },
  methods: {
    // 初始化值
    initHandle(){
      if(this.valueId){
        this.valueTitle = this.$refs.selectTree.getNode(this.valueId).data[this.props.label]     // 初始化显示
        this.$refs.selectTree.setCurrentKey(this.valueId)       // 设置默认选中
        this.defaultExpandedKey = [this.valueId]      // 设置默认展开
      } 
      this.initScroll()
    },
    // 初始化滚动条
    initScroll(){
      this.$nextTick(()=>{
        let scrollWrap = document.querySelectorAll('.el-scrollbar .el-select-dropdown__wrap')[0]
        let scrollBar = document.querySelectorAll('.el-scrollbar .el-scrollbar__bar')
        scrollWrap.style.cssText = 'margin: 0px; max-height: none; overflow: hidden;'
        scrollBar.forEach(ele => ele.style.width = 0)
      })
    },
    // 切换选项
    handleNodeClick(node){
      this.valueTitle = node[this.props.label]
      this.valueId = node[this.props.value]
      this.$emit('getValue',this.valueId)
      this.defaultExpandedKey = []
      if(!node.children || !node.children.length) { //补录选择完选项弹框不能收起
        this.$refs.treeSelect.blur()
      }
    },
    // 清除选中
    clearHandle(){
      this.valueTitle = ''
      this.valueId = null
      this.defaultExpandedKey = []
      this.clearSelected()
      this.$emit('getValue',null)
    },
    /* 清空选中样式 */
    clearSelected(){
      let allNode = document.querySelectorAll('#tree-option .el-tree-node')
      allNode.forEach((element)=>element.classList.remove('is-current'))
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    }
  },
  watch: {
    value(){
      this.valueId = this.value
      this.initHandle()
    },
    filterText(val) {
      this.$refs.selectTree.filter(val);
    }
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .el-scrollbar .el-scrollbar__view .el-select-dropdown__item{
    height: auto;
    max-height: 274px;
    padding: 0;
    overflow: hidden;
    overflow-y: auto;
  }
  .el-select-dropdown__item.selected{
    font-weight: normal;
  }
  ul li >>>.el-tree .el-tree-node__content{
    height:auto;
    padding: 0 20px;
  }
  .el-tree-node__label{
    font-weight: normal;
  }
  .el-tree >>>.is-current .el-tree-node__label{
    color: #409EFF;
    font-weight: 700;
  }
  .el-tree >>>.is-current .el-tree-node__children .el-tree-node__label{
    color:#606266;
    font-weight: normal;
  }
  .selectInput{
    padding: 0 5px;
    box-sizing: border-box;
  }
</style>

基于element-plus的弹窗封装

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
<template>
  <el-dialog   v-bind="$attrs" class="default-size" :close-on-click-modal="false">
    <template #header>
        <slot name="header"></slot>
    </template>
    <div class="dialog__content" :style="{height: $attrs.height}">
      <div class="dialog-box">
        <slot name="default"></slot>

      </div>
    </div>

    <template #footer>
        <slot name="footer"></slot>
    </template>
  </el-dialog>
</template>

<script setup>
const props = defineProps({

})
import {} from "vue"
</script>

<style lang="scss" scoped>

</style>

使用,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<Dialog
    v-model="isShow"
    :title="dialogTitle"
    width="35%"
    height="300px"
    @close="closeDialog(addFormRef)"
>
    <div class="box" style="width: 95%;margin:0 auto;height: 300px; position: relative; ">

    </div>
    <template #footer>
        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit(addFormRef)"> 确认 </el-button>
    </template>
</Dialog>

基于element 的图片预览封装

preview/preview.vue

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
<template>
    <el-image-viewer
      v-if="showPreview"
      :urlList="previewImages"
      :on-close="closeViewer"
      :zIndex="99999"
    ></el-image-viewer>
  </template>
  <script>
  // 可自行去对应目录查看该组件
  import ElImageViewer from "element-ui/packages/image/src/image-viewer";
  export default {
    data() {
      return {
        showPreview: false,
        previewImages: []
      };
    },
    components: {
      ElImageViewer
    },
    methods: {
      closeViewer() {
        this.showPreview = false;
        document.querySelector('body').classList.remove('el-popup-imageView--hidden')
      }
    }
  };
  </script>

preview/index.js

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
import PreviewItem from "./Preview.vue";
 
const Preview = {};
 
// 注册
Preview.install = function(Vue) {
  const PreviewConstructor = Vue.extend(PreviewItem);
  const instance = new PreviewConstructor();
  let div = document.createElement("div")
  div.style.position = 'absolute'
  div.style.zIndex = '999999'
  instance.$mount(document.createElement(div));
  document.body.appendChild(instance.$el);
 
  /**
   * 挂载在vue原型上
   * @param {Array} imgs 需要预览的图片数组
   */
  Vue.prototype.$openPreview = function(imgs = []) {
    instance.showPreview = true;
    document.querySelector('body').classList.add('el-popup-imageView--hidden')
    instance.previewImages = imgs;
  };
};
 
export default Preview;

使用，在main.js 注册组件

1
2
3
// 图片弹窗
import preview from '@/components/CommonPreview'
Vue.use(preview)

全局调用

1
this.$openPreview(['url'])

基于element-plus 封装图片预览组件

命令式组件

Preview/index.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
    <div>
      <div class="demo-image__preview">
        <!-- element-plus内部组件 -->
        <el-image-viewer @close="props.close" v-if="props.imageList.length" :url-list="props.imageList" />
      </div>
    </div>
  </template>
   
  <script setup>
    import { ref } from 'vue'
    const props = defineProps({
      // 图片列表
      imageList: {
        type: Array,
        default: () => []
      },
      close: {
        type: Function,
        default: () => {}
      }
    })
  </script>

Preview/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import PreviewImg from './index.vue'
import { createApp } from 'vue'

PreviewImg.view = (props, callback) => {
    const previewImg = createApp(PreviewImg, {
        ...props,
        close
    });
    let PreviewBox = document.createElement('div');
    open();
    function open() {
        previewImg.mount(PreviewBox);
        document.body.appendChild(PreviewBox);
    }
    function close() {
        previewImg.unmount();
    }
}

export default PreviewImg;

使用

1
2
3
4
5
import previewImg from "@/components/PreviewImg"

previewImg.view({
    imageList: ['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg']
  })

vite 注册成全局 svg-icon 组件

vite 通过 使用 vite-plugin-svg-icons 插件使用 svg 图片

1
yarn add vite-plugin-svg-icons -D

在main.js 中

1
import 'virtual:svg-icons-register'

配置 vite.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//import path,{ resolve } from 'path'
import path from 'path'
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'
 
export default defineConfig((command) => {
 return {
    plugins: [
      createSvgIconsPlugin({
        // 指定要缓存的文件夹
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // 指定symbolId格式
        symbolId: '[name]'
      })
    ],
}
 
})

新增组件 icon-svg

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
<template>
  <svg aria-hidden="true">
    <use :class="fillClass" :href="symbolId" :xlink:href="symbolId" :fill="color" />
  </svg>
</template>

<script setup>
import {computed} from 'vue'

const props = defineProps({
    // 显示得SVG 图片名称
    name: {
        type: String,
        required: true
    },
    // 直接指定 SVG 图表颜色
    color: {
        type: String,
    },
    // 指定 svg 颜色的类名
    fillClass: {
        type: String
    }
})

const symbolId = computed(()=> `#icon-${props.name}`)
</script>

全局注册 组件， 使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { defineAsyncComponent } from 'vue'
export default {
  install(app) {
    // 获取当前路径任意文件夹下的 index.vue 文件
    const components = import.meta.glob('./*/index.vue')
    // 遍历获取到的组件模块
    for (const [key, value] of Object.entries(components)) {
      // 拼接组件注册的 name
      const componentName = 'm-' + key.replace('./', '').split('/')[0]
      // 通过 defineAsyncComponent 异步导入指定路径下的组件
      app.component(componentName, defineAsyncComponent(value))
    }
  }
}
1
<m-svg-icon class="w-1.5 h-1.5" name="hamburger"></m-svg-icon>

vue-cli 注册全局 svg-icon 组件

components/SvgIcon/index.vue

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
55
56
57
58
59
60
61
62
63
<template>
  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    isExternal() {
      return isExternal(this.iconClass)
    },
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    },
    styleExternalIcon() {
      return {
        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
      }
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.svg-external-icon {
  background-color: currentColor;
  mask-size: cover!important;
  display: inline-block;
}
</style>

assets/icons/svg 文件夹下放置 svg icon

assets/icons/index.js

1
2
3
4
5
6
7
8
9
10
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component

// register globally
Vue.component('svg-icon', SvgIcon)

// 缓存全部 svg
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

vue.config.js 配置 chainWebpack 加载 svg

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// set svg-sprite-loader
 chainWebpack: (config) => {
    config.module
      .rule('svg')
      .exclude.add(path.resolve('src/assets/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(path.resolve('src/assets/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
 }

在main.js 中注册

1
import './assets/icons' // icon

使用

1
<svg-icon :icon-class="iconName" class-name="icon" style="height: 25px;width: 16px;"/>

图标选择器组件

IconSelect/index.vue

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<template>
  <div class="icon-body">
    <el-input v-model="name" class="icon-search" clearable placeholder="请输入图标名称" @clear="filterIcons" @input="filterIcons">
      <i slot="suffix" class="el-icon-search el-input__icon" />
    </el-input>
    <div class="icon-list">
      <div class="list-container">
        <div v-for="(item, index) in iconList" class="icon-item-wrapper" :key="index" @click="selectedIcon(item)">
          <div :class="['icon-item', { active: activeIcon === item }]">
            <svg-icon :icon-class="item" class-name="icon" style="height: 25px;width: 16px;"/>
            <span>{{ item }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import icons from './requireIcons'
export default {
  name: 'IconSelect',
  props: {
    activeIcon: {
      type: String
    }
  },
  data() {
    return {
      name: '',
      iconList: icons
    }
  },
  methods: {
    filterIcons() {
      this.iconList = icons
      if (this.name) {
        this.iconList = this.iconList.filter(item => item.includes(this.name))
      }
    },
    selectedIcon(name) {
      this.$emit('selected', name)
      document.body.click()
    },
    reset() {
      this.name = ''
      this.iconList = icons
    }
  }
}
</script>

<style lang="less" scoped>
  .icon-body {
    width: 100%;
    padding: 10px;
    .icon-search {
      position: relative;
      margin-bottom: 5px;
    }
    .icon-list {
      height: 200px;
      overflow: auto;
      .list-container {
        display: flex;
        flex-wrap: wrap;
        .icon-item-wrapper {
          width: calc(100% / 3);
          height: 25px;
          line-height: 25px;
          cursor: pointer;
          display: flex;
          .icon-item {
            display: flex;
            max-width: 100%;
            height: 100%;
            padding: 0 5px;
            &:hover {
              background: #ececec;
              border-radius: 5px;
            }
            .icon {
              flex-shrink: 0;
            }
            span {
              display: inline-block;
              vertical-align: -0.15em;
              fill: currentColor;
              padding-left: 2px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .icon-item.active {
            background: #ececec;
            border-radius: 5px;
          }
        }
      }
    }
  }
</style>

IconSelect/requireIcons.js

1
2
3
4
5
6
7
8
9
10
11
const req = require.context('../../assets/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

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<el-col >
    <el-form-item label="菜单图标" prop="icon">
    <el-popover
        placement="bottom-start"
        width="460"
        trigger="click"
        @show="$refs['iconSelect'].reset()"
    >
        <IconSelect ref="iconSelect" @selected="selected" :active-icon="form.icon" />
        <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
        <svg-icon
            v-if="form.icon"
            slot="prefix"
            :icon-class="form.icon"
            style="width: 25px;"
        />
        <i slot="prefix"  v-else  class="el-icon-search el-input__icon" />
        </el-input>
    </el-popover>
    </el-form-item>
</el-col>

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

侠客行
作者：李白
赵客缦胡缨，吴钩霜雪明。
银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。
事了拂衣去，深藏身与名。
闲过信陵饮，脱剑膝前横。
将炙啖朱亥，持觞劝侯嬴。
三杯吐然诺，五岳倒为轻。
眼花耳热后，意气素霓生。
救赵挥金槌，邯郸先震惊。
千秋二壮士，烜赫大梁城。
纵死侠骨香，不惭世上英。
谁能书阁下，白首太玄经。