• el-menu el-collapse 左右滚动联动，左右展开项联动

    需求：

    1. 左侧menu每次只保持一个子菜单的展开，右侧每次只能展开一个面板（手风琴效果）
    2. 滚动左侧的 menu 菜单，右侧的折叠面板（collapse）会跟随滚动到对应区域
    3. 滚动右侧的折叠面板，左侧的menu 菜单会跟随滚动到对应区域
    4. 展开左侧的menu 菜单，右侧的折叠面板对应的面板展开，滚动到顶部
    5. 点击左侧的 menu 子项item，右侧折叠面板中的二级菜单滚动到顶部
    6. 点击展开右侧的折叠面板，左侧对应的菜单项展开

    遇到的问题：

    1. 左侧menu 的数据获取是一个接口，右侧菜单的子项是根据左侧的一级菜单id获取，每次展开左侧右侧需要去异步获取数据填充到面板中，展开的时候数据没有填充完滚动条还未撑起来滚动位置会出错
    2. 左右侧滚动联动的时候，左侧滚动去滚动右侧，右侧滚动去设置左侧滚动，当左右两侧都设置了对方跟随自己滚动的时候，滚动时会出现卡顿，他们会互相循环调用

    解决问题：

    1. 动态计算前面有多少个兄弟节点，每个节点是固定高度，设置计算后的值
    2. 设置一个拦截标识，左侧滚动的时候禁止右侧去触发左侧的滚动；右侧滚动的时候禁止左侧去触发右侧的滚动

    效果：

    代码实现：

    menu 组件：

    2.  
    3. <script>
    4. import NavItem from './NavItem.vue'
    5. import { keywordLabels } from '@/api/modules/labelMiddleware.js'
    6. export default {
    7.   props: {
    8.     navList: {
    9.       type: Array,
    10.       default: () => []
    11.     },
    12.     curMenuId: {
    13.       type: Array
    14.     }
    15.   },
    16.   watch: {
    17.     curMenuId(arr) {
    18.       // 折叠面板展开时展开对应的menu
    19.       this.scrollToTarget(arr[0])
    20.     }
    21.   },
    22.   components: {
    23.     NavItem
    24.   },
    25.   data() {
    26.     return {
    27.       keyword: '',
    28.       isScroll: false,
    29.       // 定时器
    30.       scrollTimer: null
    31.     }
    32.   },
    33.   methods: {
    34.     // 展开右侧折叠面板的时候当前menu滚动到顶部
    35.     scrollToTarget(classificationId) {
    36.       // 设置当前为左侧滚动标识，不触发右侧滚动
    37.       window.rightScroll = true
    38.       window.clearTimeout(this.scrollTimer)
    39.       this.scrollTimer = setTimeout(_ => {
    40.         // 放开标识
    41.         window.rightScroll = false
    42.       }, 800)
    43.  
    44.       // 找到目标元素
    45.       const id = classificationId
    46.       let el = this.$refs['menu_' + id][0]
    47.       el = el.$el ? el.$el : el
    48.  
    49.       // 通过计算前面有多少元素来手动计算scrollTop高度
    50.       const scrollBox = document.querySelector('#label-mid-el-menu')
    51.       const children = Array.from(el.parentNode.children)
    52.       const prevSiblings = []
    53.       for (const child of children) {
    54.         if (child === el) {
    55.           break
    56.         }
    57.         prevSiblings.push(child)
    58.       }
    59.       const top = prevSiblings.length * 44
    60.       this.$nextTick(_ => {
    61.         scrollBox.scrollTo({
    62.           top: top,
    63.           behavior: 'smooth'
    64.         })
    65.       })
    66.     },
    67.     // 模糊搜索
    68.     async seachData() {
    69.       const { data } = await keywordLabels({
    70.         keyword: this.keyword
    71.       })
    72.       return data
    73.     },
    74.     // 搜索出来选择
    75.     handleSelect(label) {
    76.       this.$emit('setCurIdArea', label.firstClassificationId)
    77.     },
    78.     // 键入关键字搜索
    79.     async querySeachSync(keyworld, callback) {
    80.       const data = await this.seachData()
    81.       const res = data.map(item => {
    82.         return {
    83.           ...item,
    84.           value: item.labelName
    85.         }
    86.       })
    87.       callback(res)
    88.     },
    89.     // 设置菜单默认选中项为第一个
    90.     setDefaultActive(list) {
    91.       while (true) {
    92.         if (Array.isArray(list)) {
    93.           list = list[0]
    94.           continue
    95.         }
    96.         if (list.childList && list.childList.length > 0) {
    97.           list = list.childList
    98.           continue
    99.         }
    100.         break
    101.       }
    102.       this.defaultActive = list.classificationId
    103.     },
    104.     // 点击item
    105.     hanleClickNavItem(key) {
    106.     },
    107.     // 展开某个菜单列表
    108.     handleOpenMenu(key, keyPath) {
    109.       // console.log(key, keyPath, 'openMenu');
    110.       this.$emit('setCurIdArea', keyPath, 'menu')
    111.     },
    112.     // 选择菜单列表菜单
    113.     handleSelectMenu(key, keyPath) {
    114.       // console.log(typeof key, keyPath, 'itemMenu')
    115.       if (keyPath.length === 1) {
    116.         // 菜单没有子项，触发menu
    117.         this.$emit('setCurIdArea', keyPath, 'menu')
    118.       } else {
    119.         this.$emit('setCurIdArea', keyPath, 'item')
    120.       }
    121.     },
    122.     // 右侧滚动的时候左侧滚动到目标位置
    123.     menuScroll() {
    124.       // 右侧如果正在滚动不触发左侧滚动
    125.       if (window.rightScroll === true) {
    126.         return
    127.       }
    128.       // 设置左侧正在滚动的标识，此时不触发右侧滚动
    129.       window.leftScroll = true
    130.       window.clearTimeout(this.scrollTimer)
    131.       this.scrollTimer = setTimeout(_ => {
    132.         // 左侧滚动结束，放开标识，此时才能触发右侧的滚动
    133.         window.leftScroll = false
    134.       }, 600)
    135.       // 左侧滚动的menu
    136.       const menuEl = document.querySelector('#label-mid-el-menu')
    137.       // menu的滚动高度
    138.       const scrollMenu = menuEl.scrollHeight - menuEl.offsetHeight
    139.       // 右侧的折叠面板
    140.       const labelContent = document.querySelector('.label-middleware-list-wrapper .content')
    141.       // 折叠面板的滚动高度
    142.       const labelScroll = labelContent.scrollHeight - labelContent.offsetHeight
    143.       // 计算滚动比率
    144.       const ratio = scrollMenu / labelScroll
    145.       labelContent.scrollTo({
    146.         top: menuEl.scrollTop / ratio
    147.       })
    148.     }
    149.   },
    150.   mounted() {
    151.     this.setDefaultActive(this.navList)
    152.     const menuEl = document.querySelector('#label-mid-el-menu')
    153.     menuEl.addEventListener('scroll', this.menuScroll)
    154.   },
    155.   beforeDestroy() {
    156.     const menuEl = document.querySelector('#label-mid-el-menu')
    157.     menuEl.removeEventListener('scroll', this.menuScroll)
    158.   }
    159. }
    160. script>
    161.  
    162. <style lang="scss" scoped>
    163. .menuList {
    164.   height: 100%;
    165.   display: flex;
    166.   flex-direction: column;
    167.   padding-top: 16px;
    168.   border-right: solid 1px #e6e6e6;
    169.  
    170.   .search-box {
    171.     display: flex;
    172.     align-items: center;
    173.     width: 208px;
    174.     height: 32px;
    175.     background: #FFFFFF;
    176.     border-radius: 2px;
    177.     margin-left: 16px;
    178.     margin-bottom: 16px;
    179.  
    180.     .search-input {
    181.       flex: 1;
    182.       margin-right: -2px;
    183.       /deep/ .el-input__inner {
    184.         height: 32px;
    185.         line-height: 32px;
    186.         border-right: none;
    187.       }
    188.     }
    189.     .bth-search {
    190.       flex: 0 0 auto;
    191.       width: 32px;
    192.       height: 32px;
    193.       background: #E02D39;
    194.       color: #fff;
    195.       display: flex;
    196.       align-items: center;
    197.       justify-content: center;
    198.       position: relative;
    199.       z-index: 2;
    200.       cursor: pointer;
    201.     }
    202.   }
    203.   .el-menu {
    204.     flex: 1;
    205.     overflow: auto;
    206.     border-right: none;
    207.  
    208.     /deep/ {
    209.       .is-active:not(.el-submenu) {
    210.         color: #e02d39;
    211.         position: relative;
    212.         background: #F9F9FA;
    213.         font-weight: bold;
    214.         &::after {
    215.           content: "";
    216.           position: absolute;
    217.           left: 0;
    218.           top: 0;
    219.           width: 2px;
    220.           height: 100%;
    221.           background: #e02d39;
    222.         }
    223.       }
    224.     }
    225.   }
    226. }
    227. style>

    menu 里面的 item 组件：

    2.  
    3. <script>
    4. export default {
    5.   name: 'NavItem',
    6.   props: {
    7.     nav: {
    8.       type: Object,
    9.       default: () => {}
    10.     }
    11.   }
    12. }
    13. script>
    14.  
    15. <style lang="scss" scoped>
    16.   .el-submenu {
    17.     /deep/ {
    18.       .el-menu-item,
    19.       .el-submenu__title  {
    20.         height: 44px;
    21.         line-height: 44px;
    22.       }
    23.       // .el-submenu__title {
    24.       //   padding-right: 32px !important;
    25.       // }
    26.       // .el-submenu .el-menu-item {
    27.       //   padding: 0 32px;
    28.       // }
    29.       .is-active:not(.el-submenu) {
    30.         color: #e02d39;
    31.         position: relative;
    32.         background: #F9F9FA;
    33.         font-weight: bold;
    34.         &::after {
    35.           content: "";
    36.           position: absolute;
    37.           left: 0;
    38.           top: 0;
    39.           width: 2px;
    40.           height: 100%;
    41.           background: #e02d39;
    42.         }
    43.       }
    44.     }
    45.   }
    46.   /*菜单关闭*/
    47.   .el-submenu /deep/ .el-submenu__title .el-submenu__icon-arrow{
    48.     -webkit-transform: rotateZ(-90deg);
    49.     -ms-transform: rotate(-90deg);
    50.     transform: rotateZ(-90deg);
    51.   }
    52.   /*菜单展开*/
    53.   .el-submenu.is-opened /deep/ .el-submenu__title .el-submenu__icon-arrow{
    54.     -webkit-transform: rotateZ(0deg);
    55.     -ms-transform: rotate(0deg);
    56.     transform: rotateZ(0deg);
    57.   }
    58. style>

    右侧的 collapse LabelList 组件：

    2.  
    3. <script>
    4. import { queryLabels } from '@/api/modules/labelMiddleware.js'
    5. import PopoverLabel from './PopoverLabel.vue'
    6.  
    7. export default {
    8.   components: {
    9.     PopoverLabel
    10.   },
    11.   props: {
    12.     navList: {
    13.       type: Array,
    14.       default: () => []
    15.     },
    16.     selectedLabels: {
    17.       type: Array,
    18.       default: () => []
    19.     },
    20.     curIdArea: {
    21.       type: Array,
    22.       defaut: () => []
    23.     },
    24.     curAreaType: {
    25.       type: String
    26.     }
    27.   },
    28.   data() {
    29.     return {
    30.       loading: false,
    31.       activeItem: 'org',
    32.       labelList: [],
    33.       childLabels: [],
    34.       popoverVisible: {},
    35.       // 定时器
    36.       scrollTimer: null
    37.     }
    38.   },
    39.   watch: {
    40.     // 展开当前区域
    41.     async curIdArea(keyPath) {
    42.       const classificationId = keyPath[0]
    43.       this.activeItem = isNaN(classificationId) ? classificationId : Number(classificationId)
    44.       // 如果左侧是展开的菜单
    45.       if (this.curAreaType === 'menu') {
    46.         await this.openCollapse(classificationId)
    47.         this.scrollToTarget()
    48.       }
    49.       // 如果左侧是点击的item
    50.       if (this.curAreaType === 'item') {
    51.         const curItemId = keyPath[keyPath.length - 1]
    52.         this.scrollToItem(curItemId)
    53.       }
    54.     }
    55.   },
    56.   methods: {
    57.     // 滚动到目标位置, 点击navItem时
    58.     scrollToItem(navId) {
    59.       // 设置当前为左侧滚动标识，不触发右侧滚动
    60.       window.leftScroll = true
    61.       window.clearTimeout(this.scrollTimer)
    62.       this.scrollTimer = setTimeout(_ => {
    63.         // 放开标识
    64.         window.leftScroll = false
    65.       }, 800)
    66.       let el = this.$refs['collapse_sub_' + navId][0]
    67.       el = el.$el ? el.$el : el
    68.       const scrollBox = document.querySelector('.label-middleware-list-wrapper .content')
    69.       this.$nextTick(_ => {
    70.         scrollBox.scrollTo({
    71.           top: el.offsetTop - 8,
    72.           behavior: 'smooth'
    73.         })
    74.       })
    75.     },
    76.     // 滚动到目标位置, 展开menu时
    77.     scrollToTarget(classificationId) {
    78.       // 设置当前为右侧滚动标识，不触发左侧滚动
    79.       window.leftScroll = true
    80.       window.clearTimeout(this.scrollTimer)
    81.       this.scrollTimer = setTimeout(_ => {
    82.         // 放开标识
    83.         window.leftScroll = false
    84.       }, 800)
    85.  
    86.       // 找到目标元素
    87.       const id = classificationId ?? this.curIdArea
    88.       let el = this.$refs['collapse_' + id][0]
    89.       el = el.$el ? el.$el : el
    90.       while (el) {
    91.         if (!el.classList.contains('el-collapse-item')) {
    92.           el = el.parentNode
    93.         } else {
    94.           break
    95.         }
    96.       }
    97.  
    98.       // 通过计算前面有多少元素来手动计算scrollTop高度
    99.       const scrollBox = document.querySelector('.label-middleware-list-wrapper .content')
    100.       const children = Array.from(el.parentNode.children)
    101.       const prevSiblings = []
    102.       for (const child of children) {
    103.         if (child === el) {
    104.           break
    105.         }
    106.         prevSiblings.push(child)
    107.       }
    108.       const top = prevSiblings.length * 48
    109.       this.$nextTick(_ => {
    110.         scrollBox.scrollTo({
    111.           top: top,
    112.           behavior: 'smooth'
    113.         })
    114.       })
    115.     },
    116.     // 添加标签addLabels
    117.     addLabels(label) {
    118.       this.$emit('addLabels', label)
    119.     },
    120.     // 关闭popover
    121.     closePopover() {
    122.       for (let item in this.popoverVisible) {
    123.         this.popoverVisible[item] = false
    124.       }
    125.     },
    126.     // 展示特定的popover
    127.     showPopover(item) {
    128.       this.popoverVisible[item] = true
    129.     },
    130.     // 获取label列表
    131.     async getLabels() {
    132.       try {
    133.         this.loading = true
    134.         const { data } = await queryLabels({
    135.           classificationId: Array.isArray(this.activeItem) ? this.activeItem[this.activeItem.length - 1] : this.activeItem
    136.         })
    137.         this.childLabels = data
    138.         this.loading = false
    139.         const target = this.labelList.find(item => item.classificationId === this.activeItem)
    140.         // 设置数据结构
    141.         data.forEach(item => {
    142.           if (item.labList) {
    143.             item.labList.forEach(label => {
    144.               // 最终值
    145.               label.tagAttributes = []
    146.               label.curRanges = []
    147.               // 临时修改的值，点击确定后才赋值给最终的值
    148.               label.tempTagAttributes = []
    149.               label.tempCurRanges = []
    150.             })
    151.           }
    152.         })
    153.         if (target) {
    154.           this.$set(target, 'children', data)
    155.         }
    156.       } catch (err) {
    157.         console.log(err)
    158.       }
    159.     },
    160.     // 设置机构标签
    161.     async setOrgLabels(id) {
    162.       const target = this.labelList.find(() => id === this.activeItem)
    163.         const data = [{
    164.           classificationId: 'org',
    165.           classificationName: "组织机构",
    166.           labList: [
    167.             {
    168.               labelId: "org_label",
    169.               labelName: "中台机构",
    170.               labelPropType: "org_label",
    171.               labelPropList: [],
    172.               labelRuleDescription: "",
    173.               selected: false,
    174.               tagAttributes: [],
    175.               curRanges: [],
    176.               value: "",
    177.               orgLabel: ''
    178.             }
    179.           ],
    180.           selected: false
    181.         }]
    182.         if (target) {
    183.           this.$set(target, 'children', data)
    184.         }
    185.     },
    186.     // 折叠面板展开设置数据
    187.     async openCollapse(id) {
    188.       if (id) {
    189.         // 初始化手动添加的组织机构
    190.         if (id === 'org') {
    191.           await this.setOrgLabels('org')
    192.         } else {
    193.           // 获取当前详细labels
    194.           await this.getLabels()
    195.         }
    196.       }
    197.     },
    198.     // 展开关闭collapse
    199.     async handleChangeCollapse(id) {
    200.       if (id) {
    201.         await this.openCollapse(id)
    202.         // 当前展开项的第0或者第一个子元素，由于左侧没有本身子元素所以设为第一个
    203.         let classificationId = (this.childLabels[1]?.classificationId ?? this.childLabels[0]?.classificationId) || ''
    204.         // 组织机构是手动添加的数据单独处理
    205.         classificationId = id === 'org' ? 'org_label' : classificationId
    206.         this.$emit('changeCollapse', [String(id), String(classificationId) || String(id)])
    207.         // 先将右侧滚动到目标位置
    208.         this.scrollToTarget(id)
    209.         // 左侧滚动到目标位置
    210.         this.labelListScroll()
    211.       }
    212.     },
    213.     // 右侧滚动的时候左侧滚动到目标位置
    214.     labelListScroll() {
    215.       // 左侧如果正在滚动不触发右侧滚动
    216.       if (window.leftScroll === true) {
    217.         return
    218.       }
    219.       // 设置右侧正在滚动的标识，此时不触发左侧滚动
    220.       window.rightScroll = true
    221.       window.clearTimeout(this.scrollTimer)
    222.       this.scrollTimer = setTimeout(_ => {
    223.         // 右侧滚动结束，放开标识，此时才能触发左侧的滚动
    224.         window.rightScroll = false
    225.       }, 600)
    226.       // 左侧滚动的menu
    227.       const menuEl = document.querySelector('#label-mid-el-menu')
    228.       // menu的滚动高度
    229.       const scrollMenu = menuEl.scrollHeight - menuEl.offsetHeight
    230.       // 右侧的折叠面板
    231.       const labelContent = document.querySelector('.label-middleware-list-wrapper .content')
    232.       // 折叠面板的滚动高度
    233.       const labelScroll = labelContent.scrollHeight - labelContent.offsetHeight
    234.       // 计算滚动比率
    235.       const ratio = scrollMenu / labelScroll
    236.       menuEl.scrollTo({
    237.         top: labelContent.scrollTop * ratio
    238.       })
    239.     }
    240.   },
    241.   mounted() {
    242.     const labelContent = document.querySelector('.label-middleware-list-wrapper .content')
    243.     labelContent.addEventListener('scroll', this.labelListScroll)
    244.   },
    245.   beforeDestroy() {
    246.     const labelContent = document.querySelector('.label-middleware-list-wrapper .content')
    247.     labelContent.removeEventListener('scroll', this.labelListScroll)
    248.   },
    249.   created() {
    250.     this.labelList = this.navList
    251.     this.openCollapse(this.activeItem)
    252.   }
    253. }
    254. script>
    255.  
    256. <style lang="scss" scoped>
    257. .label-middleware-list-wrapper {
    258.   height: 100%;
    259.   .content {
    260.     height: 100%;
    261.     overflow: auto;
    262.   }
    263.   .el-collapse {
    264.     position: relative;
    265.   }
    266.   .el-collapse-item /deep/ .el-collapse-item__content {
    267.     border-top: 1px solid #EBEEF5;
    268.     padding-bottom: 0;
    269.   }
    270.   /deep/ .el-collapse-item__header{
    271.     font-size: 14px;
    272.     font-family: PingFangSC-Regular, PingFang SC;
    273.     font-weight: 500;
    274.     color: #262626;
    275.   }
    276.   .sub-box {
    277.     padding: 8px 16px 0 12px;
    278.     background: #FAFAFA;
    279.  
    280.     .sub-title {
    281.       height: 18px;
    282.       font-size: 13px;
    283.       font-family: PingFangSC-Regular, PingFang SC;
    284.       font-weight: 400;
    285.       color: #292B33;
    286.       line-height: 18px;
    287.       margin-bottom: 9px;
    288.     }
    289.     .label-box {
    290.       display: flex;
    291.  
    292.       /deep/ .label-item {
    293.         white-space: nowrap;
    294.         display: flex;
    295.         align-items: center;
    296.         height: 28px;
    297.         padding: 0 8px;
    298.         background: #F1F1F1;
    299.         border-radius: 3px;
    300.         font-size: 12px;
    301.         font-family: PingFangSC-Regular, PingFang SC;
    302.         font-weight: 400;
    303.         color: #595959;
    304.         margin-right: 8px;
    305.         margin-bottom: 8px;
    306.         cursor: pointer;
    307.       }
    308.     }
    309.   }
    310.  
    311. }
    312. style>

     menu 和 右侧的 LbelList 组件的父组件：

    2.  
    3. <script>
    4. import NavList from './NavList.vue'
    5. import LabelList from './LabelList.vue'
    6. import { getClassificationTree } from '@/api/modules/labelMiddleware.js'
    7. export default {
    8.   components: {
    9.     NavList,
    10.     LabelList
    11.   },
    12.   props: {
    13.     visible: {
    14.       type: Boolean,
    15.       default: false
    16.     },
    17.     selectedLabels: {
    18.       type: Array,
    19.       default: () => []
    20.     },
    21.     total: {
    22.       type: Number
    23.     },
    24.     renderLabelInfo: {
    25.       type: Function,
    26.       default: () => () => {}
    27.     }
    28.   },
    29.   data() {
    30.     return {
    31.       navList: [],
    32.       search: '',
    33.       curIdArea: [],
    34.       // 左侧选中的type，展开还是点击item
    35.       curAreaType: '',
    36.       curMenuId: ['org', 'org_label']
    37.     }
    38.   },
    39.   methods: {
    40.     // 添加label
    41.     addLabels(label) {
    42.       this.$emit('addLabels', label)
    43.     },
    44.     // 删除label
    45.     deleteLabel(label, index) {
    46.       this.$emit('deleteLabel', label, index)
    47.     },
    48.     // 左侧菜单当前展开项
    49.     setCurIdArea(keyPath, type) {
    50.       this.curIdArea = keyPath
    51.       this.curAreaType = type
    52.     },
    53.     // 获取navList，左侧的menu菜单数据，右侧的面板一级数据
    54.     async getNavList() {
    55.       const { data } = await getClassificationTree()
    56.       this.navList = data || []
    57.       this.navList.unshift({
    58.         classificationId: 'org',
    59.         classificationName: "组织机构",
    60.         childList: [
    61.           {
    62.             childList: null,
    63.             classificationId: 'org_label',
    64.             classificationName: "组织机构"
    65.           }
    66.         ]
    67.       })
    68.     },
    69.     // 点击清空重选
    70.     handleClickClearAll() {
    71.       this.$emit('resetSelectLabels')
    72.     },
    73.     // 点击确定
    74.     handleClickSubmit() {
    75.       this.$emit('getTableData')
    76.       this.handleClose()
    77.     },
    78.     // 关闭dialog
    79.     handleClose() {
    80.       this.$emit('closeDialog')
    81.     },
    82.     // 修改了折叠面板,设置当前展开想的父级和当前id
    83.     changeCollapse(idArr) {
    84.       this.curMenuId = idArr
    85.     }
    86.   },
    87.   mounted() {
    88.     this.getNavList()
    89.   }
    90. }
    91. script>
    92.  
    93. <style lang="scss" scoped>
    94. .dialog {
    95.   /deep/ .el-dialog{
    96.     margin-top: 8vh !important;
    97.   }
    98.   /deep/ .el-dialog__body {
    99.     padding: 0;
    100.   }
    101.   .left-nav {
    102.     height: 100%;
    103.     width: 240px;
    104.   }
    105.   .content {
    106.     display: flex;
    107.     border: 1px solid rgba(0, 0, 0, 0.1);
    108.     border-right: none;
    109.     border-left: none;
    110.     margin-bottom: 8px;
    111.     height: 556px;
    112.     padding: 0;
    113.     padding-right: 16px;
    114.  
    115.     .label-collapse {
    116.       flex: 1;
    117.       overflow: auto;
    118.       /deep/ {
    119.         .el-collapse-item__header {
    120.           padding-left: 20px;
    121.         }
    122.       }
    123.     }
    124.  
    125.   }
    126.   .selected-label {
    127.     margin-bottom: 18px;
    128.     padding: 0 16px;
    129.     .title {
    130.       height: 20px;
    131.       font-size: 14px;
    132.       font-family: PingFangSC-Medium, PingFang SC;
    133.       font-weight: 500;
    134.       color: #262626;
    135.       line-height: 20px;
    136.       margin-bottom: 12px;
    137.     }
    138.     .labels-box {
    139.       display: flex;
    140.       min-height: 50px;
    141.       max-height: 76px;
    142.       overflow: auto;
    143.       flex: 1;
    144.       flex-wrap: wrap;
    145.  
    146.       .label-item {
    147.         display: flex;
    148.         align-items: center;
    149.         height: 28px;
    150.         background: rgba(224, 45, 57, 0.06);
    151.         border-radius: 3px;
    152.         padding: 4px 11px 4px 8px;
    153.         margin-right: 8px;
    154.         margin-bottom: 8px;
    155.         white-space: nowrap;
    156.  
    157.         .text {
    158.           display: flex;
    159.           align-items: center;
    160.           white-space: nowrap;
    161.           font-size: 14px;
    162.           font-family: PingFangSC-Regular, PingFang SC;
    163.           font-weight: 400;
    164.           color: #595959;
    165.           margin-right: 24px;
    166.           .value-item:not(:last-child){
    167.             margin-right: 8px;
    168.           }
    169.         }
    170.         .delete-label {
    171.           color: #8C8C8C;
    172.           cursor: pointer;
    173.           font-size: 16px;
    174.         }
    175.       }
    176.     }
    177.   }
    178.  
    179.   .footer {
    180.     display: flex;
    181.     justify-content: space-between;
    182.     align-items: center;
    183.  
    184.     .tip {
    185.       font-size: 12px;
    186.       font-family: PingFangSC-Regular, PingFang SC;
    187.       font-weight: 400;
    188.       color: #595959;
    189.       line-height: 17px;
    190.  
    191.       .number {
    192.         font-size: 12px;
    193.         font-family: PingFangSC-Regular, PingFang SC;
    194.         font-weight: 400;
    195.         color: #E02D39;
    196.         line-height: 17px;
    197.         padding: 0 4px;
    198.       }
    199.     }
    200.     .buttons {
    201.       display: flex;
    202.       align-items: center;
    203.       .btn-reset {
    204.         width: 72px;
    205.         height: 28px;
    206.         display: flex;
    207.         align-items: center;
    208.         justify-content: center;
    209.         border-radius: 3px;
    210.         border: 1px solid #E02D39;
    211.         font-size: 12px;
    212.         font-family: PingFangSC-Medium, PingFang SC;
    213.         font-weight: 500;
    214.         color: #E02D39;
    215.         margin-right: 8px;
    216.         cursor: pointer;
    217.       }
    218.       .btn-confirm {
    219.         height: 28px;
    220.         display: flex;
    221.         align-items: center;
    222.         justify-content: center;
    223.         width: 60px;
    224.         background: #E02D39;
    225.         border-radius: 3px;
    226.         font-size: 12px;
    227.         font-family: PingFangSC-Medium, PingFang SC;
    228.         font-weight: 500;
    229.         color: #FFFFFF;
    230.         cursor: pointer;
    231.       }
    232.     }
    233.   }
    234. }
    235. style>

  • 相关阅读:
    SQLite表添加主键
    SQL Server基础指令（创建与检索）
    泛微E9，独立选择框对应数据库表查询
    RT-Thread移植到STM32单片机过程
    Docker 实用操作文档
    数据结构-红黑树
    【leetcode】有效的回文
    RabbitMQ【RabbitMQ】
    人工智能学习与实训笔记（四）：神经网络之NLP基础—词向量
    js serialport 串口通讯
  • 原文地址：https://blog.csdn.net/MFWSCQ/article/details/126381359