做名宿比较好的网站,做设计时可以参考的网站,海天建设集团公司网站,wordpress有什么局限性基于Element UI库的Vue组件#xff0c;实现了一个单选/多选框组合的效果#xff0c;可以根据 type 属性的不同值来切换单选框#xff08;默认#xff09;和按钮式单选框/多选框。 创建组件index.vue (src/common-ui/radioGroup/index.vue)
templateel-radio-g… 基于Element UI库的Vue组件实现了一个单选/多选框组合的效果可以根据 type 属性的不同值来切换单选框默认和按钮式单选框/多选框。 创建组件index.vue (src/common-ui/radioGroup/index.vue)
templateel-radio-groupv-modelhValue:sizesize:disableddisabled:text-colortextColor:fillfilltemplate v-for(item, index) in dataSourceel-radio-buttonv-iftype button:keyindex:labelitem[hProps.value]:disableditem[hProps.disabled]:nameitem[hProps.name]{{ item[hProps.label] }}/el-radio-buttonel-radiov-else:keyindexelse:labelitem[hProps.value]:disableditem[hProps.disabled]:borderitem[hProps.border] || border:sizeitem[hProps.size]:nameitem[hProps.name]:class{ vertical }{{ item[hProps.label] }}/el-radio/template/el-radio-group
/templatescriptexport default {name: HRadioGroup,props: {border: Boolean,dataSource: {type: Array,label: [String, Number],value: [String, Number, Boolean],disabled: {type: Boolean,default: false},border: {type: Boolean,default: false},size: {type: String,validator(value) {return [medium, small, mini].indexOf(value) ! -1;}},name: String},disabled: {type: Boolean,default: false},fill: String,size: {type: String,validator(value) {return [medium, small, mini].indexOf(value) ! -1;}},textColor: String,type: {type: String,default: normal,validator(value) {return [normal, button].indexOf(value) ! -1;}},value: {type: [String, Number, Boolean]},vertical: Boolean,props: {type: Object,default() {return {};}}},computed: {hValue: {get() {return this.value;},set(value) {this.$emit(input, value);this.$emit(change, value);}},hProps() {return {label: label,value: value,disabled: disabled,border: border,size: size,name: name,...this.props};}}};
/scriptstyle langscss scoped.vertical {display: block;margin-left: 0 !important; .vertical {margin-top: 10px;}}
/style
页面引入
在需要使用HRadioGroup组件的地方通过import语句引入组件注册并使用 templatedivh-radio-group:valueselectedValue:data-sourcedataSourcechangeval handleRadioGroupChange(val)/h-radio-group/div
/template
scriptimport HRadioGroup from /common-ui/radioGroup/indexexport default {components: {HRadioGroup},data() {return {filterVal: ,dataSource: [],selectedValue: }},methods: {handleRadioGroupChange(val, row) {console.log(val,选中的数据)},}// ...}
/script确保你已经安装了Vue.js和Element UI并在项目中引入它们。