iview の純粋な CSS の美化選択と Cascader スクロール バー

例：iviewコンポーネントライブラリで選択したスクロールバーを美化したい場合

現在のページで有効にしたい場合:スタイルタグにscopedを追加します。

/deep/.ivu-select-dropdown {
	overflow-y:auto;
}
/deep/.ivu-select-dropdown::-webkit-scrollbar {
	/*滚动条整体样式*/
	width:10px;
	/*高宽分别对应横竖滚动条的尺寸*/
	height:1px;
}
/deep/.ivu-select-dropdown::-webkit-scrollbar-thumb {
	/*滚动条里面小方块*/
	border-radius:10px;
	box-shadow:inset 0 0 5px #beccf1;
	background:#beccf1;
}
/deep/.ivu-select-dropdown::-webkit-scrollbar-track {
	/*滚动条里面轨道*/
	box-shadow:inset 0 0 5px #f8f9fe;
	border-radius:10px;
	background:#f8f9fe;
}

効果：

カスケード カスケード セレクターのスクロール バーも美しくしたい場合:  

例：

現在のページでも有効です

/deep/ .ivu-cascader-menu{
  overflow-y:auto;
}
/deep/.ivu-cascader-menu::-webkit-scrollbar {
	/*滚动条整体样式*/
	width:10px;
	/*高宽分别对应横竖滚动条的尺寸*/
	height:1px;
}
/deep/.ivu-cascader-menu::-webkit-scrollbar-thumb {
	/*滚动条里面小方块*/
	border-radius:10px;
	box-shadow:inset 0 0 5px #beccf1;
  background: #beccf1;
}
/deep/.ivu-cascader-menu::-webkit-scrollbar-track {
	/*滚动条里面轨道*/
	box-shadow:inset 0 0 5px #f8f9fe;
	border-radius:10px;
	background:#f8f9fe;
}

効果：

すべてのページに設定するのではなく、グローバルに有効にしたい場合は、app.vue で設定するだけです。

app.vue のコードはグローバルに有効になります

/* select 下拉选择器 */ 

.ivu-select-dropdown {
	overflow-y:auto;
}
.ivu-select-dropdown::-webkit-scrollbar {
	/*滚动条整体样式*/
	width:10px;
	/*高宽分别对应横竖滚动条的尺寸*/
	height:1px;
}
.ivu-select-dropdown::-webkit-scrollbar-thumb {
	/*滚动条里面小方块*/
	border-radius:10px;
	box-shadow:inset 0 0 5px #beccf1;
	background:#beccf1;
}
.ivu-select-dropdown::-webkit-scrollbar-track {
	/*滚动条里面轨道*/
	box-shadow:inset 0 0 5px #f8f9fe;
	border-radius:10px;
	background:#f8f9fe;
}


/* cascader 级联选择器 */ 

.ivu-cascader-menu{
  overflow-y:auto;
}
.ivu-cascader-menu::-webkit-scrollbar {
	/*滚动条整体样式*/
	width:10px;
	/*高宽分别对应横竖滚动条的尺寸*/
	height:1px;
}
.ivu-cascader-menu::-webkit-scrollbar-thumb {
	/*滚动条里面小方块*/
	border-radius:10px;
	box-shadow:inset 0 0 5px #beccf1;
  background: #beccf1;
}
.ivu-cascader-menu::-webkit-scrollbar-track {
	/*滚动条里面轨道*/
	box-shadow:inset 0 0 5px #f8f9fe;
	border-radius:10px;
	background:#f8f9fe;
}