diff --git a/examples/src/App.vue b/examples/src/App.vue index 73e351c..2239d58 100644 --- a/examples/src/App.vue +++ b/examples/src/App.vue @@ -124,7 +124,7 @@ -
+

单选框组件集合

@@ -134,7 +134,8 @@
+ selectedLabelKey="selectedLabel" @change="radioChange" :rules="rules.language" label-key="name" + :disabledKeys="['1']" value-key="id" />
@@ -152,6 +153,16 @@
+
+

下拉展开组件集合

+
+ + + +
+
@@ -496,6 +507,9 @@ export default { } }, methods: { + selectChangeTest(val) { + console.log(val, 'select-----选中的'); + }, // 手动copy内容 handleClickCopy() { this.$copy(this.form.input1, { diff --git a/packages/GuipRadio/src/index.vue b/packages/GuipRadio/src/index.vue index 05d2486..9024e97 100644 --- a/packages/GuipRadio/src/index.vue +++ b/packages/GuipRadio/src/index.vue @@ -23,6 +23,10 @@ export default { type: Boolean, default: false }, + selectedLabelKey: { + type: String, + default: '' + }, // 选项列表,支持多种格式: // 1. 数组格式: [{ label: '显示文本', value: '值', disabled: false }] // 2. 对象格式: { key1: 'value1', key2: 'value2' } @@ -131,7 +135,13 @@ export default { return option.value; } - return option[this.labelKey] || option; + // 当前选项是否选中 + const isSelected = this.getValue(option) === this.selectedValue; + + // 选中状态下优先返回selectedLabel,其次返回labelKey指定的属性 + return isSelected && option[this.selectedLabelKey] + ? option[this.selectedLabelKey] + : option[this.labelKey] || option; }, getValue(option) { // 处理对象格式的选项 diff --git a/packages/GuipSelect/index.js b/packages/GuipSelect/index.js new file mode 100644 index 0000000..0927cd6 --- /dev/null +++ b/packages/GuipSelect/index.js @@ -0,0 +1,7 @@ +import GuipSelect from './src/index.vue' + +GuipSelect.install = function(Vue) { + Vue.component(GuipSelect.name || 'GuipSelect', GuipSelect) +} + +export default GuipSelect \ No newline at end of file diff --git a/packages/GuipSelect/src/index.vue b/packages/GuipSelect/src/index.vue new file mode 100644 index 0000000..38c64c2 --- /dev/null +++ b/packages/GuipSelect/src/index.vue @@ -0,0 +1,128 @@ + + + \ No newline at end of file diff --git a/packages/index.js b/packages/index.js index b8bf423..fe4415a 100644 --- a/packages/index.js +++ b/packages/index.js @@ -5,6 +5,7 @@ import PromptText from './PromptText' import GuipTextarea from './GuipTextarea' import DevicePreview from './DevicePreview' import GuipRadio from './GuipRadio' +import GuipSelect from './GuipSelect' import 'element-ui/lib/theme-chalk/index.css' // 如果依赖Element import './styles/index.css' // 全局引入 import './styles/common.scss' // 全局引入 @@ -16,7 +17,8 @@ const components = [ PromptText, GuipTextarea, DevicePreview, - GuipRadio + GuipRadio, + GuipSelect ] const install = function (Vue) { @@ -36,5 +38,6 @@ export default { PromptText, GuipTextarea, DevicePreview, - GuipRadio + GuipRadio, + GuipSelect } \ No newline at end of file diff --git a/packages/styles/common.scss b/packages/styles/common.scss index b47ad3f..8cc74d7 100644 --- a/packages/styles/common.scss +++ b/packages/styles/common.scss @@ -40,9 +40,11 @@ body { text-align: left; } /* 隐藏全局滚动条 */ -::-webkit-scrollbar { +/* 全局隐藏滚动条但排除el-table */ +*:not(.el-table)::-webkit-scrollbar { display: none; } + body { scrollbar-width: none; -ms-overflow-style: none; @@ -56,6 +58,17 @@ body { .element::-webkit-scrollbar { display: none; /* Chrome, Safari, Edge */ } + +.el-table__body-wrapper::-webkit-scrollbar { + display: block !important; + width: 6px; + height: 6px; + } + .el-table__body-wrapper::-webkit-scrollbar-thumb { + background: #c1c1c1; + border-radius: 3px; + } + .common_title{ font-weight: bold; letter-spacing: 0.08em; @@ -174,14 +187,14 @@ body { div { width: 16px; height: 16px; - background-image: url('../assets/addIcon.svg'); + background-image: url(../assets/addIcon.svg); margin-right: 12px; } &:hover { transition: all .3s; div { - background-image: url('../assets/addIcon_light.svg'); + background-image: url(../assets/addIcon_light.svg); } border-color: #006AFF; @@ -647,10 +660,9 @@ body { // textarea start .el-textarea__inner { - padding: 10px 12px 30px; + padding: 10px 12px; border-radius: 2px; height: 100% !important; - font-family: Microsoft YaHei UI; } .el-textarea__inner:hover { @@ -672,8 +684,9 @@ body { .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label::after, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label::after { - content: url('../assets/require.svg'); + content: url(../assets/require.svg); display: inline-block; + // background-image: url(../../assets/require.svg); color: #ff4d4f; margin-right: 4px; margin-left: 4px;